今天下载了vscode，Visual Studio代码的全称。至于为什么要下载这个，还得从昨天说起。昨天领导想看视觉实验的演示效果。像这样的页面只能通过服务访问。关键时刻我的Hbuilder打不开，坑。之前出现过几次，让我现在不敢戒了。所以，我准备再下载一个IDE作为备份。 　　

　　

　　软件logo就长这样 　　

　　

　　 　　

　　

　　 　　

　　

　　先简单介绍下这个软件 : 　　

　　

　　Visual Studio Code(以下简称vscode)是一款轻量级、功能强大的跨平台开源代码编辑器(IDE)，支持Windows、OSX和Linux。内置JavaScript、TypeScript和Node.js支持，并且拥有丰富的插件生态系统。可以安装插件支持C、C#、Python、PHP等其他语言。 　　

　　

　　优点： 　　

　　

　　轻量级，易于使用，许多插件，关键是免费的，亲爱的朋友。 　　

　　

　　我会讲解如何使用下载地址vscode，如何更改主题vscode，如何更改默认配置选项，比如设置字体大小，如何在浏览器中打开预览文件，如何实时修改，如何实时查看样式(无需手动刷新浏览器页面)，如何与他人分享链接(通过自己电脑的IP地址)1。下载地址官网下载链接。 　　

　　

　　https://code.visualstudio.com/ 　　

　　

　　 　　

　　

　　2.vscode如何更改主题左下角的【设置】-【颜色主题】？内置主题如下图，可以一个一个尝试。 　　

　　

　　 　　

　　

　　 　　

　　

　　3.vscode改变默认的配置选项，比如设置字体大小等。选择下图的菜单栏-【代码】-【代码】-【首选项】-【设置】，可以随意调整配置。一般我只设置字号，因为默认字号对我来说有点小。你可以随意尝试其他参数。 　　

　　

　　 　　

　　

　　 　　

　　

　　4.如何在浏览器中打开预览文件？如果想更方便地在浏览器中预览文件，需要使用插件。我在这里安装的插件是【在brower中打开】 　　

　　

　　 　　

　　

　　安装的具体方法是 　　

　　

　　打开插件面板——搜索【在浏览器中打开】——点击右边的【安装】安装。 　　

　　

　　 　　

　　

　　 　　

　　

　　【open in brower】的使用方法 　　

　　

　　右击页面——可以选择【在浏览器中打开】或者【在其他浏览器中打开】，分别表示在默认浏览器和其他浏览器中打开，也可以用快捷键。 　　

，that is all

　　

　　

5、怎样实现实时修改，实时查看样式（不用手动刷新浏览器页面）再说下第5点，怎样实现实时修改，实时查看样式（不用手动刷新浏览器页面），解决思路是安装插件，我选择的是―【live Server】,安装过程请参考第4点，这边主要说下是怎样使用的

　　

　　

【live Server】使用方法

　　

在想要预览的页面上右键-选择【Open with Live Server】，或者点击右下角【Go Live】都可以，这样做的好处是你每一次的修改，按了ctrl+s保存以后，浏览器中打开的页面不用手动刷新，就能自动改变了，so easy

　　

　　

　　

6、怎样和别人共享链接（通过自己电脑的IP地址）再说下第6点，想要在公司让别的同事查看你写的页面怎么办？解决思路是先拿到自己IP地址，用IP链接的方式让其他人去访问，这一步也是基于第5点说的插件【live Server】的，安装过程请看上面。下面说下具体实现方法

　　

怎样查看自己电脑IP?

　　

我的电脑是mac，这里就以mac为例,电脑右上角点击搜索图标，输入Z（或者终端两个字），打开，命令行输入ifconfig+回车即可,出来的文本你去找下里面有一串数字，比如192.168.0.3，类似这样的就是你自己电脑的IP了

　　

　　

　　

拿到IP以后，打开想看的页面，点击右下角【Go Live】,在浏览器中打开页面，将地址栏前半部分改为你自己的电脑IP就行了，然后复制链接，发给同事，同事就能看到你写的页面效果了。