2019年，前端工程师需要安装的15个VSCode 插件

插件由Traversy Media提供，提到的插件基本都在用，而且真的蛮好用，所以推荐给大家，如果你有好用的插件可以留言评论，分享给更多的前端开发者们。

1.Live Server

唤起浏览器开启本地服务，对于

2.Live Sass Compiler

支持sass直接编译成css文件

3.HTML CSS Support

支持html编写class提示已经定义的类名

4.Auto Rename Tag

适用于 JSX、Vue、HTML，在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键；

5.Prettier – Code formatter

实际上已经是代码格式化的工具标准，支持格式化几乎所有的前端代码，并且类似于 EditorConfig 支持用文件来配置格式规则；

6.JavaScript (ES6) code snippets

ES6语法中的JavaScript代码片段（支持JavaScript和TypeScript）

7.Turbo Console Log

通过自动执行编写有意义的日志消息的操作，使调试更加容易。

8.Guides 缩进参考

与内置的缩进参考线不同，Guides能够让你通过配置项来修改参考线的颜色、样式、缩进空白的背景色等，如果你愿意折腾，甚至能够配置出类似 Indent Rainbow 那样风格的参考线。下图是我使用 Solarized Dark 主题时参考线的配置：

{
    "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)",
    "guides.normal.color.light": "rgba(220, 220, 220, 0.7)",
    "guides.active.color.dark": "rgba(210, 110, 210, 0.6)",
    "guides.active.color.light": "rgba(200, 100, 100, 0.7)",
    "guides.active.style": "dashed",
    "guides.normal.style": "dashed",
    "guides.stack.style": "dashed",
}

复制代码

9.Bracket Pair Colorizer

识别代码中的各种括号，并且标记上不同的颜色，方便你扫视到匹配的括号，在括号使用非常多的情况下能环节眼部压力，编辑器快捷键固然好用，但是在临近嵌套多的情况下却有些力不从心

10.Code Spell Checker

强烈推荐，对大部分非英语母语又不想写出四不像变量名的程序员来说，正确识记拼写各种单词还是有不小的挑战，比模棱两可时需要去查在线词典不同的是，这款插件能实时的识别单词拼写是否有误，并给出提示，不少 bug 都是因为拼写错误导致的。

11.GitLens — Git supercharged

把VSCode 结合 Git的使用体验优化到了极致，能让我们在不离开编辑器，不执行任何命令的情况下知晓光标所在位置代码的修改时间、作者信息等。

12.Auto-Open Markdown Preview

打开Markdown文件时自动打开Markdown预览

13.Vetur

vue项目支持插件

14.ES7 React/Redux/GraphQL/React-Native snippets

react项目支持插件