VSCode 是一款跨平台的轻量级编辑器，凭借着优秀的编辑体验，良好的可扩展性、可配置性，已经成为了前端开发使用最多的工具。
VSCode 拥有庞大的插件市场，开始使用 VSCode 进行前端开发的过程中，众多的插件选择可能会让我们难以抉择。结合社区和插件市场推荐以及自己使用的情况，将开发过程中感觉有明显收益的插件分享一波，供大家参考。
Bracket Pair Colorizer
圆括号 ()、中括号[] 和花括号 {} 是大多数编程语言常用的操作符，javascript 中，函数定义、条件语句、数组、解构 … 括号的使用更是无处不在。在我们在编写或者阅读代码的时候，很难一眼看出两个匹配的括号。这样可能会导致两个负面影响：1、代码阅读效率降低，阅读时需要确认代码是否在同一括号间以确定执行逻辑；2、在缺乏 lint 功能完成较长代码片段，可能会漏写括号会导致代码执行错误，需要花废一点时间去重新梳理。
Bracket Pair Colorizer 插件提供了括号的高亮和匹配标记功能，帮助我们快速定位匹配的括号。
<video src=”http://cdn.jaylin.wang/vsc_ex…; controls></video>
Auto Complete Tag
编写 HTML 或者 JSX 代码过程中，如果我们有这样的需求：输入 <div> 时自动补全为 <div></div>；将 <div> 修改为 <section>，与之匹配的标签名称也随之更改, 最终成为 <section></section>。虽然 H5 中对未闭合的标签在有些时候可以显示，但还是鼓励所有标签都能主动闭合。Auto Complete Tag 能帮我们在编码过程快速实现这两个诉求。
<video src=”http://cdn.jaylin.wang/vsc_ex…; controls></video>
类似的插件还有：
Auto Close Tag
Auto Rename Tag
Close HTML/XML tag
ESLint
为了更规范的开发前端代码，规避代码中一些容易造成问题的代码，社区沉淀了 lint 的方案，目前最常用的是 ESlint。通常 ESLint 是在通过命令行执行命令，根据文件夹下的 .eslintrc 和 .eslintignore 文件进行代码的校验，然后再回到编辑器修改校验出错的代码。这样代码检测与编码过程脱离的，从一定程度会影响效率。ESLint 插件识别项目下的配置，直接在编码过程做出提示，并且可以配置保存文件时自动修复错误。
<video src=”http://cdn.jaylin.wang/vsc_ex…; controls></video>
类似的插件有：
jslint
sass lint 对 Sass 语法执行 lint
Prettier
ESLint 定义了代码层面上的规范，Prettier 则定义了不同编辑器的代码格式化规范, 确保同一项目经过不同开发者格式化后是一致的。编辑器对代码格式化的差异，会为代码合带来不必要的麻烦。Prettier 的详细介绍可以在 Prettier 官网 了解，Prettier 插件 通过项目下的 .prettier 配置格式化代码，我们将这个文件提交至项目仓库，支持 prettier 的编辑器打开项目后都会以同样的方式格式化代码。
类似的插件有：
EditorConfig for VS Code
REST Client
前后端应用联调或 Node 接口测试过程中，我们会有请求接口验证返回结果的需求。通常使用的工具有 Postman 和 CURL。Postman 提供的功能很完备，但需要在开发时额外安装一个软件，并且开发过程多几次软件的切换也不完美了。CURL 是系统自带的命令行工具，功能也很强大，但个人感觉控制台中输入 curl 命令不太友好。REST Client 为我们提供了在编辑器视窗中快速请求接口的能力，而且我们可以将请求的 API 列表保存在项目文件中，方便后面的使用。
<video src=”http://cdn.jaylin.wang/vsc_ex…; controls></video>
GitLens
Gitlens 对 VSCode 的 git 功能做了很多扩充，功能十分强大。最吸引人的是其快速跟踪代码变更的能力，从项目、文件、代码行的维度都能快速定位。代码行的 hover 提示容易造成编码的干扰，个人建议代码编写过程中关闭行变更提示。
Quokka.js
验证 javascript/Typescript 的一些语法或特性时，我们可能想要一个能快速执行的环境，以前通常会用到浏览器自带的 snippet 功能，在浏览器中编码，代码提示效果自然会弱一点，而且对一些新的特性也不能完全支持。Quokka.js 为编辑器提供了快速创建 js/ts playground 功能，我们可以快速在编辑器中编写可执行的代码片段，验证一些特性。Quokka.js 提供了社区版和 Pro 版本（收费，还不便宜），社区版不能将已保存的文件重新加入运行环境，每次需要新建一个文件来执行。个人感觉平时做一些特性验证已经够用了。
<video src=”http://cdn.jaylin.wang/vsc_ex…; controls></video>
类似的插件有：
Code Runner
Snippet
Snippet 为我们提供了提供的代码片快速插入功能。如安装 react snippet 后，输入 imrc 就能快速生成 import React, {Component} from ‘react。在插件市场，大多数框架和语言都能找到 snippet 实现。因为总是记不全代码片的缩写，个人对代码片用的不多。
推荐几个不错的代码片插件：
ES7 React/Redux/GraphQL/React-Native snippets
JavaScript (ES6) code snippets
Vetur
主题
开发过程，有一款能让自己愉快编码的主题也会在一定程度上提升编程效率和灵感。当然，不同人对于视觉的偏好是不同的，所以在只在最后分享一下我的主题配置。我现在使用的两个主题插件：Material Icon Theme 文件类型添加对应的图标展示；One Dark Pro 一款看着更柔顺的主题。
期待我们在 VSCode 的助力下，更高效更高质的完成工作。
文中如有纰漏，也欢迎大家指正：）