本文总结了一下前端开发人员一些经常用的可以提高开发效率的VSCode插件，好的工具可以事半功倍。主要分为：基础通用篇，自由可选篇，框架工具篇，主题篇（按照我自己的想法分的）
基础通用篇
Chinese
vscode编辑器汉化包，安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。
Auto Rename Tag
自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改。
Auto close tag
自动闭合 HTML / XML 标签，非常快速的编写 HTML 代码。
Material icon theme
VSCode文件图标,根据文件类型展示不同图标。
koroFileHeader
在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，使用简单！（可以查询一下配置）
TODO Highlight
高亮展示TODO
TODO Tree
我们经常会在代码中使用TODO来标记我们的代码，提高可读性，TODO Tree提供在VSCode 树形图标里面显示打上TODO标记的文件。
GitLens
详细的 Git 提交日志。Git 重度使用者必备，尤其是多人协作时：哪一行代码，何时、何人提交都有记录。再也不用担心背锅了！
Git History
GitHistory可查看和搜索git日志以及图形和详细信息，同时还支持分支比较，分支管理等操作，非常方便。
JavaScript (ES6) code snippets
该插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6语法支持。ES6 语法智能提示及快速输入，不仅仅支持 .js，还支持.ts，.jsx，.tsx，.html，.vue。
ESLint
JavaScript 语法纠错，可以自定义配置，也可以参照官网的配置，摆正开发者的代码格书写格式。（语法配置很多正在研究中。。。）
TSlint (注意：TSLint将在废弃，TSLint官方推荐使用ESLint)
Prettier
代码格式工具，和esLint不同在于，ESLint只是一个代码质量工具(确保没有未使用的变量、没有全局变量，等等)；而Prettier只关心格式化文件(最大长度、混合标签和空格、引用样式等)。可见，代码格式统一的问题，交给Prettirer再合适不过了。和Eslint配合使用，风味更佳。
Beautify
Beautify是格式化代码的插件可美化JS、JSON、CSS、Sass、HTML（其他类型的文件不行），可在文件夹根目录下创建 .jsbeautifyrc 文件。一般用Eslint + prettier + beautify组合使用，Beautify格式化vue的html部分。
Stylelint
StyleLint 是『一个强大的、现代化的 CSS 检测工具』, 与 ESLint 类似, 是通过定义一系列的编码风格规则帮助我们避免在样式表中出现错误。stylelint是运行工具，stylelint-config-standard是stylelint的推荐配置，stylelint-order是CSS属性排序插件(先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)。
Better comments（代码注释高亮）
Document This
添加注释快
/items?itemN…
此插件可以统一大家的注释块，可统一生成注释文档
快捷键: ctrl+alt+dd(连续按两次d)
设置文件中还可配置：
“docthis.includeAuthorTag”: true,//出现@Author
“docthis.includeDescriptionTag”: true,//出现@Description
“docthis.authorName”: “shenzekun”,//作者名字
自由可选篇
Markdown All in One
这款神器可以让我们在vscode里面快乐的书写Markdown，功能强大。提供了丰富的快捷键，可边写边看，轻松转化为html或pdf文件，十分好用，强烈推荐。
（我平时主要就是用它编写边看写readme文档，预览快捷键command+shift+v）
HTML Snippets
HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了（一般适用于新手前端开发）。
open in browser
从浏览器中查看html文件，使用系统的当前默认浏览器。默认的快捷键Ctrl+1,可以自定义修改。（适用于平时写一些静态页面）
vscode-fileheader
顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间（只安装koroFileHeader也可以）
Language-Stylus
对stylus的支持和格式化，如项目中没有请忽略
Live Server
如果我们是在做一个静态页排版，这个插件可以提供给我们一个本地实时预览服务器，预览会在谷歌浏览器打开。。右键“Open With Live Server”开启。
Path Intellisense
文件自动补全功能，加入此插件让我们在应用文件（例如图片）时，有智能的路径提示。
vscode-icon
让 vscode 资源树目录加上图标，必备良品！这一款是VSCode官方的图标主题包，有超过500万+下载量。与Material Icon最大的区别在于文件夹。
cssrem
px2rem
px换成rem的插件
CSS Peek
调试css样式的必备插件,鼠标放在类名，id上的时候，显示出此类型下的css样式，并可以直接跳转到css文件。
Bracket Pair ColorZer
颜色识别匹配括号
Indenticator
突出目前的缩进深度
Project Manager
如果你的公司有非常多项目，需要来回切换的话，推荐Project Manage可以让你轻松在项目直接替换，无需在导入项目文件夹打开。
Settings Sync
如果你有多台设备，或者以后不想在重新配置vscode，推荐你用Settings Sync，将vscode上传到gist，以后登录账号就可以一键完成。
project-tree
在README.md里面自动追加生成项目树状图；很好用，使用简单；
在项目下 Shift + Cmd + p输入：Project tree回车
框架工具篇
VUE
Vetur
开发Vue的童鞋必装插件之一。支持标签、属性的智能补全等等。
Vue 2 Snippets
这个插件加入了Vue2的代码块，让我们开发的过程中可以快速生成Vue2的代模版。
Angular
Angular Extension Pack
最全的全家桶之一，里面包括各种你需要的插件，基本安装它一个就可以了。
Angular Language Service（1中已包括）
超好用的从模板（html）F12一键定位变量定义位置
Angular 10 Snippets（1中已包括）
React
ES7 React/Redux/GraphQL/React-Native snippets
这个扩展为你提供了JavaScript和ES7中的React/Redux代码片段，以及VSCode的Babel插件特性。编写React的童鞋，这个插件是必备之一。
React.js code snippets
用ES6语法去开发React.js应用非常方便。
小程序
minapp-vscode
微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
