VS code用户设置

01选择“文件”菜单内的“首选项”里面的“用户代码片段”。

02选择代码片段文件“html.json”。

03输入要自定义的快捷键和模板代码段。

04进入 .html 后缀的文件中按快捷键【vh】后按【tab】键即可实现快速输入代码段，自定义设置完成。

实用插件推荐

01AutoFileName (文件路径自动补全插件)。

02ESLint插件。安装此插件，可使VS Code安装和重启后自动开始工作。

03avaScript (ES6) Code Snippets (代码片段插件) 用代码片段加快ES开发速度，例如输入imd可以自动生成如下代码。

04Project Manager (项目管理器插件)。简单的项目管理器，可以在你的编辑器中快速切换项目。

05Sort Lines (代码行排序插件)。这个插件可以对选中的代码行进行排序，也提供不区分大小写、反向和唯一等排序功能。

06Wallaby.js (测试插件)。一个高级的连续测试运行器，可以对正在工作的文件进行测试，它会在你的编辑器中创建通过测试或测试失败的视觉反馈。

VS code 用户代码片段

01找到菜单 “查看”，点击“命令面板”， 或者按“command + shift + P”快捷键打开命令选项板。 搜索“Preferences: Configure User Snippets”或者“首选项:配置用户代码片段”。

02你可以选择“现有的代码片段文件”或者“创建代码片段文件”，其中创建代码片段文件有两个选项：“全局可用”和“当前项目目录可用”。

03以新建全局代码段文件为例，单击【新建全局代码片段文件…】。 创建.code-snippets后缀的文件。我们可以看到一个大的对象{}，查看注释中示例，JavaScript代码如下图

04其中，Print to console是代码片段名称； scope字段表示作用域，在什么语言下其作用； prefix字段为代码片段前缀，定义如何从IntelliSense和选项卡完成中选择此代码段； body即代码片段的主体内容，其中每个字符串表示一行； description字段为代码片段说明，会在IntelliSense候选栏中出现。未定义的情况下直接显示对象名，上面列子中将会显示Log output to console。

05body 部分可以使用特殊语法结构，来控制光标和要插入的文本，其支持的基本结构有Tabstops（制表符）。 用“Tabstops”可以让编辑器的指针在“snippet”内跳转。使用“1，2”等指定光标位置。这些数字指定了光标跳转的顺序，数字最大表示默认选中，按【tab】键，光标移到下一个指定位置。 特别注意的是，“0”表示最终光标位置。相同序号的“Tabstops”被链接在一起，将会同步更新，比如下列用于生成头文件封装的“snippet”被替换到编辑器上时，光标就将同时出现在所有“1”位置。 JavaScript 代码：