概述

距离之前给大家介绍的 VS Code 插件已经过去了一年多了，在这之间有不少插件已经更新消失，也有不少的新的好用的新的插件，让我们来看下有哪些配置和插件能够提高我们的效率。

本次我们推荐的插件都是基于当前最新版本的 VS Code，即 1.31 版本。

VS Code 配置

`setting.json` 设置

首先，我们来看下 VS Code 推荐的设置属性。下面是我自己的配置文件：

{
    "editor.fontSize": 19,
    "files.autoSave": "onFocusChange",
    "workbench.iconTheme": "vscode-icons",
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
    "vsicons.dontShowNewVersionMessage": true,
    "files.associations": {
        "*.css": "css"
    },
    "git.confirmSync": false,
    "workbench.activityBar.visible": true,
    "window.zoomLevel": -1,
    "typescript.check.npmIsInstalled": false,
    "git.enableSmartCommit": true,
    "explorer.confirmDragAndDrop": false,
    "git.autofetch": true,
    "explorer.confirmDelete": false,
    "editor.suggestSelection": "first",
    "editor.cursorWidth": 2,
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "editor.fontFamily": "Inziu IosevkaCC SC",
    "terminal.integrated.fontSize": 16,
    "terminal.external.osxExec": "iTerm.app",
    "workbench.editor.enablePreview": false,
    "npm.enableScriptExplorer": true,
    "editor.tabCompletion": "on",
    "sync.gist": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    }
}

我们来说下里面值得推荐设置的几个：

files.autoSave，这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。这个设置比延时保存更加方便有效。
editor.fontFamily，这个属性是表示编辑区的字体，大家可以根据自己的喜好来进行设置，我推荐大家一个不错的字体 Inziu IosevkaCC SC，具体展示如下图：
git.autofetch，这个属性可以让 VS Code 自动去检测 Git 远端是否有发生新的更改，推荐设置为true。
editor.cursorWidth，这个属性是用来设置光标宽度的，推荐值为2。在设置此属性之前，需要先设置属性editor.cursorStyle的值为line。
editor.suggestSelection，这个属性是用来设置建议值的，就是我们在输入co时，编辑器提示我们const这个功能。推荐设置为first——即每次默认选中推荐值第一个，比如你输入co，推荐值为const和constant（按顺序），那么就会选择const。当然，我也推荐设置为recentlyUsedByPrefix，即上次你选择或者输入过什么，这次就默认选中什么，比如你输入co，推荐值为const和constant（按顺序），上次你选择了constant，这次就还是默认选中cosntant。
editor.tabCompletion，这个属性是表示在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为true。
editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true。

代码片段

在 VS Code 中，我们可以利用代码片段来避免我们复制粘贴大量重复代码块。我们通过首选项中的用户代码片段来进行代码片段的添加。具体操作路径如图所示：

之后，我们选择新增用户代码片段即可：

以我设置的代码片段为例，我是用于增加每个文件的注释头信息。因此配置如下：

// typescript.json
{
	"TS description": {
		"prefix": "tsfile",
		"body": [
			"/**",
			"* @module ${TM_FILENAME_BASE}",
			"* @author: Hjava",
			"* @description: ",
			"* @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"*/",
			""
		],
		"description": "Insert description."
	}
}

文件名typescript.json表示了这个代码片段只在 TypeScript 语言中生效。各个属性含义如下表所示：

字段	说明
prefix	前缀，即你在编辑器中输入的内容为前缀指定内容时，能够在编辑器建议中选择此片段。
body	具体文本内容，在选择此片段后，会将此数组根据`\n`进行组合输出到编辑器中。其中有部分特定的常量，可以获取输入时的部分信息，如： ${CURRENT_YEAR}:当前年份，具体字段可以见此处说明：在写此文章时，部分1.20.0版本增加的常量并不在上面的文档中，具体字段为： `CURRENT_YEAR`：年（4位数） `CURRENT_YEAR_SHORT`：年（2位数） `CURRENT_MONTH`：月 `CURRENT_DATE`：日 `CURRENT_HOUR`：小时 `CURRENT_MINUTE` ：分钟 `CURRENT_SECOND`：秒
description	描述说明，在片段说明中会显示此字段的文本内容。