VS Code前端开发好用的插件

我用VS Code来做前端开发，有很多第三方插件可以帮助我们更快更好的写代码，以下是我认为很好的插件。

1.Emmet

该插件可以让VS Code像Sublime Text那样很简单的进行代码扩展（按Tab键进行扩展），写前端代码的人都知道，标签代码太多，如果安装了这个插件，就可以让写代码变得轻松。具体操作方法可以另外搜索。

VSCODE现在已经内置了这个插件，不用安装了。

2.Prettier - Code formatter

该插件可以让我们专注于写代码，而不用担心格式的问题，因为插件在我们按Ctrl+S进行保存代码时，会自动的格式化代码，非常方便。

3.open in browser

该插件可以让我们直接在代码编写好了之后，用浏览器打开查看效果，而不是通过文件打开的方式查看。

4.Auto Rename Tag

该插件可以将html/xml的标签进行成对的修改，比如说h标签需要修改为p标签，那么将前一个h标签改为p标签后，后面一个对应的h标签就会自动改为p标签了。

5.Bracket Pair Colorizer 2

该插件可以让一段代码中的括号呈现不同的颜色，方便我们的查看。

6.Debugger for Chrome

该插件可以在VS Code里面设置JS代码的断点，然后在chrome浏览器中显示调试的效果。

7.ESLint

该插件是检查JS代码的工具，具体使用还需要进行配置，下载量巨大。

8.HTML Snippets

该插件提供丰富的html语言支持，生成模板、代码补全、代码扩展等等。

9.IntelliSense for CSS class names in HTML

该插件可以根据你的文件里的CSS类名给出提示，这个文件可以是自己的文件，也可以是引用的文件，非常方便。

10.HTML CSS Support

该插件根据你的文件里的CSS类名给出提示，支持多种语言。

11.Live Server

该插件可以让我们在写代码的同时在浏览器中实时的看到效果，不用写一次代码打开一次浏览器那么麻烦。

12.Settings Sync

该插件可以让我们使用的多个VS Code编辑器保留同样的设置，因为我们很可能使用多台电脑，而且VS Code暂时不支持用户名登录，所以这款插件还是非常有用的。在实际开发过程中，为了保持代码的规范性，小组里面也可能要求在同一配置的编辑器下写代码，这个插件就派上用场了。

13.TODO Highlight

该插件支持在代码中插入TODO代码，用来提示当前进度，第二天写代码时就知道自己前一天的进度在哪里，而不用到处找了。

14.TODO Tree

该插件用来支持TODO Highlight插件，方便我们查看文件中哪些地方没有做完，有时候我们在多个地方留下了未完成的任务，该插件就可以集中显示出来。

15.vscode-icons

该插件在每个文件前面加上一个高大上的图标，方便我们查看文件的类型。

16.Path Intellisense

该插件可以将路径自动补全。

17.Import Cost

该插件可以计算引入包之后的大小，对于控制代码体积有帮助。

18.Indent Rainbow

该插件可以让代码前的空格呈现彩色，方便我们查看代码的层级，毕竟前端代码层级很多，单看括号的话，眼神不好就会看错，有了这个插件就非常方便了。

这里只列出了部分插件，大家可以在平时的使用中发现好用的插件，这些插件有的是直接安装就可以使用的，但是有些插件使用还是需要进行学习的，这里就不一一列出了。