VScode的下载地址：VScode官网

在拓展程序页面搜索该名称的插件：

Chinese (Simplified) Language Pack for Visual Studio Code

即为上图所展示的插件，点击2处的绿色“Install”即可下载（这里已经下载过了，所以显示的是设置图标），然后按照提示重启软件后即为中文。

如果重启后仍不为中文，可以使用Ctrl+Shift+P唤起搜索栏，在其中输入：

Configure Display Language

选择其对应项，再选择“zh-cn”选项，再次重启软件后，即为中文。

在项目内新建文件后，VScode并不知道你想要写什么，所以默认为“纯文本”格式，右下角显示为“纯文本”。 点击“纯文本”后选择HTML语言，在第一行输入“！”，然后按下Tab即可快速生成标准的HTML代码。

当然了，写好之后就是要运行了，这里可以安装：

View In Browser

拓展插件，安装方法与安装中文简体插件的方式相同，其展示页如下： 安装完成后，返回你要运行的文件界面，右击该文件，选择“View In Browser”选项，即可在默认浏览器中运行该文件。

提示：VScode不会像HBuilder X那样每次运行前提示保存，所以每次运行前请先手动保存。

调试文件所需的插件为：

Debugger for Chrome

其安装方法与安装中文简体插件的方式相同，其展示页如下： 安装完成后返回代码界面，按下F5，选择“Chrome”，会转到launch.json文件，如果没有转到launch.json的话，可以前往“运行和调试”——“创建launch.json文件”进行创建。

在打开的launch.json页面中添加如下语句：

其中的第一行的“，”不要忘记，谷歌浏览器的安装路径改为自己的，需要调试的页面如果不是“index.html”请更改为相应的名字。添加后的代码布局大致为： 然后在“运行和调试”中选择“使用本机Chrome调试”。

在需要添加断点的地方，点击某行的最前方空白处即可添加断点。右键需要监视的变量，即可添加到监视，准备工作完毕后按F5即可进行调试。

其中调试控制台的几个按钮分别为“暂停/继续”、“单步跳过”、“单步调试”、“单步跳出”、“重启”和“停止”。

每次码代码都想偷懒，希望一个缩写就能完成重复且枯燥的常用语句，VScode可以自定义用户代码段，让自己所输入的就是自己所想的。

点击“文件”——“首选项”——“用户代码段”，选择自己要定义哪些语言的自定义片段，HTML选择“html.json”，JS选择“javascript.json”，以此类推… …

进入对应的文件后，可以输入以下片段：

即输入dw后按Tab即可显示为document.write(" ")，其中prefix为用来触发自定义代码段的关键字，body为自定义的代码段，description为备注。当然可以输入多条，中间用“，”分隔，如下图所示：

用户自定义的代码段关键字（应该）不会与对应语言的保留关键字发生冲突，所以不必担心命名问题。

在拓展中搜索：

background

其安装方法与安装中文简体插件的方式相同，其展示页如下： 首次安装后会提示报错，选择不再提示即可。

选择“文件”——“首选项”——“设置”，在设置搜索栏中输入“background”，然后选择"在settings.json中编辑"。

在文件中添加以下代码段：

其中的关键语句都已经打过注释了，style里大致就是CSS样式，根据自己的喜好调整即可。

当还总在为不小心输入中文却毫不自知而苦恼时，当运行效果不对却一眼看不出问题出在哪里时，或许这款插件可以帮到你，在拓展中搜索：

HTMLHint

其安装方法与安装中文简体插件的方式相同，其展示页如下：

安装完插件后，会在屏幕下方的“问题”一栏中显示提示信息，如下图的title未给值，以及name和type误用了中文引号：

该插件可以完成自动完成文件名的工作，在拓展中搜索：

Path Intellisense

其安装方法与安装中文简体插件的方式相同，其展示页如下：

该插件可以在文件前显示对应的图标，在拓展中搜索：

vscode-icons

其安装方法与安装中文简体插件的方式相同，其展示页如下：

安装完成后的效果如下图所示：

本篇都是笔者边实践边记录的，如果遇到按照方法仍然无法实现的，可以联系我。另外推荐插件会不定时更新的，如果遇到好用的，就添加上。好了，别的就没什么了，还是那句话，如有错误或不足，还望指正。