背景

之前一直是只用WebStorm作为IDE来编写代码，但是由于：

1. 手中的这台Mac接了两个显示器以后，使用WebStorm会有卡顿。
2. WebStorm需要付费（虽然可以通过某方法和谐）。

所以需要寻找一个新的编辑器或者IDE来进行边写代码。

为什么选择VS Code

1. VS Code的性能明显由于Atom。
2. VS Code的插件系统使用方便程度远高于Sublime。
3. VS Code相对于WebStorm来说是免费的。

VS Code配置

注：当前VS Code相关的配置基于v1.20.1版本。

用户设置

在首选项->设置中，能够对VS Code相关的属性进行设置，目前有调整字段如下：

• "editor.fontSize": 16，该设置用来调整编辑器中的字体大小，目前设置大小为16。
• "files.autoSave": "onFocusChange"，该设置用来调整编辑器的自动保存策略，当前字段含义为当该文件失焦后保存，即切换到其他应用或者文件的时候自动进行一次保存。
• "editor.cursorWidth": 2，该设置是用来控制光标的粗细，目前设置大小为2。
• "editor.suggestSelection": "recentlyUsedByPrefix"，该设置是用来控制自动补全的建议，目前设置为根据之前补全过建议的前缀来进行建议，大概的意思就是你上次通过co选择了const，这次你再输入co的时候，也会建议你选择const。

代码片段

VS Code可以通过名为代码片段的功能像编辑器中插入一段指定的文本，具体操作步骤为首选项->用户代码片段->新建全局代码片段。

我们可以增加一些常用的文件声明注释、通用模板等代码片段，从而避免频繁的复制粘贴和重复劳动。

我举一个简单的文件声明注释的例子来说明下这个功能：

{// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected.// Example:// "Print to console": {//     "prefix": "log",//     "body": [//         "console.log('$1');",//         "$2"//     ],//     "description": "Log output to console"// }"JS & TS description": {"prefix": "jsfile","body": ["/**","* @module ${TM_FILENAME_BASE}","* @author: Hjava","* @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}","*/","","'use strict';",""],"description": "Insert description."}
}

其中，JS & TS description表示这个片段的名称，其他具体字段含义如下表所示：

具体示例效果如下：

插入后效果如下：

插件

在左侧插件面板中，可以进行插件的搜索、安装与卸载。推荐插件如下：

• Auto Close Tag，能够在你编写HTML中自动帮你加上闭合的标签。
• Auto Rename Tag，能够在你修改一个标签时自动调整与之成对的另一个标签。
• js-beautify for VS Code，能够格式化你的JavaScript文件。当然，它还提供了格式化JSON的能力。
• Beautify css/sass/scss/less，它能够让你对CSS相关文件进行格式化。
• Better Comments，能够让你的注释看上去更加友好。
• Document This，能够自动的给函数和方法添加注释。
• ESLint，这个不用多说，给VS Code提供了ESLint相关功能。
• PostCSS Syntax Highlighting，能够让VS Code支持PostCSS语法。
• vscode-icons，能够让你的文件树增加图标标识。

总结

VS Code总体上来说是一个使用比较方便的编辑器，能够通过一些特定的插件提高你的工作效率。相较于其他的IDE或者编辑器来看，他有着自己独特的优势。