因为要开发小程序，所以小新用到了微信开发者工具，但是发现前端开发的真正大佬是 Visual Studio Code。

下面小新就来教你微软的这款工具怎么安装。

一：下载这个软件

下载方法1、

首先，我们可以去微软商店（Microsoft Store）搜索

然后点击了解更多，就会转到网页上面，（如果你已经打开了浏览器，则需要你自己去点开观看）

不要下载上面紫色的，在下面你会看到Visual Studio Code,蓝色的那个才是

下载方法2、

登录它的官网下载，官网链接https://code.visualstudio.com/（官网进比较慢）

上面的两张图分别是中文版和英文版，因为怕读者下载时看不到英文版，所以翻译了中文版。

二、安装说明

当下载完成后，我们只要一直点确认同意就好。（注意更改安装路径，除C盘外都可以，安装路径不要出现中文名，这是一条）当出现如下的图片时，小新建议除“将Code注册为受支持的文件类型的编译器”不打勾外，其余4项全部打勾

下面小新来解释为什么这样做：

①将“通过code 打开“操作添加到windows资源管理器文件上下文菜单

②将“通过code 打开”操作添加到windows资源管理器目录上下文菜单

说明：当鼠标对文件、目录点击右键时，可以出现选择使用 VS Code 打开。

③将Code注册为受支持的文件类型的编辑器

说明：默认使用 VScode 打开诸如 txt,py 等文本类型的文件（一般建议不勾选）。

④添加到PATH（重启后生效）

说明：这步骤默认的，勾选上，不用配置环境变量，可以直接使用。

做完安装说明，我们就一路傻瓜式的默认同意就ok了。

三、初始设置

运行软件，会发现全是英文，作为一名有正义感的China People。我要让他变成中文界面。

方法1：

使用插件；

点击左列最下方的小方块，搜素Chinese找到中文简体的插件，点击instal,重新打开就会变成中文页面。

方法2：

（1）启动VSCode，然后按Ctrl + Shift + P打开命令调试板，然后输入“Configure Display Language”，选择并按下Enter键，会打开一个locale.json文件。将文件中的配置项修改为"locale":"zh-cn"，并且保存修改。

（2）接着在VSCode应用商店安装所需要的语言包，在搜索框中输入“Language Packs”，选择中文（简体）安装。

（3）最后重启VSCode，就可以开始使用中文版啦。

入门操作篇

1：设置字体；

Ctrl+逗号键，进入设置页面，文本编辑器~字体

2：修改为自己喜欢的主题

点击扩展商店搜索你要找的插件名称如Atom One Dark Theme或One Dark Pro或Eva Theme或Material Palenight Theme

点击安装；

安装好了之后只是证明你本地的Vs Code上面有这个插件了，还需要将当前使用的主题插件切换成你想要的才行；

方法一：Ctrl+逗号，常用设置~工作台~外观，然后就可以自定义你的主题了。

方法二：点击“设置”图标，找到“颜色主题”。

3：设置及时保存

设置图标~常用设置~Files:Auto Save,设置成如图就好（一般设置成afterDelay就好了）

6：自动换行

设置图标~常用设置~往下拉找到Editor:Word Wrap,设置成如图所示

5：Vs Code常用快捷键

Ctrl+/ 注释(VS只能整行注释)

Ctrl + f 搜索代码

Ctrl + tab 切换代码页面

Ctrl+shift+k 删除选中行

Ctrl+enter 另起一行

Script:src src链接快捷键

Fn+ 上下 左右 代码页面快捷移动

Ctrl+shift+K 删除当前行

Shift+alt+↓/↑ 快速复制当前行到下/上一行

Fn+ 上下 左右 代码页面快捷移动

Ctrl + d 快速选择相同内容

Ctrl + h 替换代码

6：常用插件

选择自己所用到的插件安装。不要都安装，安装多了，编译器会变慢。

VsCode部分插件安装 选择安装哦

Open-In-Browse （快捷菜单中添加默认浏览器打开 ）

HTML Snippets （HTML代码提示）

HTML CSS Support （CSS代码提示补全）

HTML Snippets （HTML代码提示）

Beautify (格式化 html ,js,css)

Bracket Pair Colorizer(给括号加上不同的颜色，便于区分不同的区块)

jQuery Code Snippets（ jQuery代码提示）

PHP Intelephense（ PHP代码提示）

Live Server （使用服务器的方式打开）

easy less （less编译插件）

cssrem(rem单位转换器)（设置:文件→首选项→设置里搜索cssrem→rootFontSize一般修改为100重启完成）

vetur （语法高亮显示）

vue2 （代码补全提示）

好了，终于略略完了，希望你可以看懂。

每日语录

栖守道德者，寂寞一时；依阿权势者，凄凉万古。达人观物外之物，思身后之身，宁受一时之寂寞，毋取万古之凄凉。

解释：做人不忘良心，坚守道德底线，在社会上往往却受到冷落，但孤独寂寞也只是一时的；而那些阿谀奉承，依附权势 的人，虽然一时看起来风光无限，但终究为人所不齿，不是民心所向，早晚都会陷入凄凉孤独的境地。

——菜根谭