全网最好用的VS Code插件推荐

Visual Studio Code是一个跨平台的轻量级但功能强大的源代码编辑器，懂它的人都很爱它，不懂得人也会爱上它，它的好，你自己探索 …

本文是结合自己使用以及使用过程中从各处搜罗到的插件精华，在此分享给需要的朋友

语言

Chinese (Simplified) Language Pack

中文语言包，英文不太好或者不喜欢用英文的童鞋们必备

代码编辑

Auto Close Tag

自动添加HTML / XML关闭标签

Auto Rename Tag

自动重命名配对的HTML / XML标签

Bracket Pair Colorizer

用不同颜色高亮显示匹配的括号
对配对的括号进行着色，方便区分，未安装该插件之前括号统一都是白色的。

Color Info

这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了，点击还可以切换颜色模式

colorize

在设置下面直接显示颜色，更直观的知道你设置的是什么颜色，同时也支持Less、Sass的变量

vscode-fileheader

顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间
快捷键: Ctrl+Alt+i

Highlight Matching Tag

高亮显示匹配标签
这个插件自动帮我们将选中的匹配标签高亮显示，再也不用费劲查找了。

TODO Highlight

高亮
如果我们在编写代码时想在某个地方做一个标记，后续再来完善或者修改里面的内容，可以利用此插件高亮显示，之后可以帮助我们快速定位到需要修改的代码行。

IntelliSense for CSS class names in HTML

在 HTML 中调用定义好的样式名时，有时需要经常在 HTML 与 CSS 文件之间切换，来回地查看你已定义好的 CSS 类名。
而有了 IntelliSense for CSS class names in HTML 插件后，你可以在 HTML 中需要调用 CSS 类名的地方，此插件会智能地给你已定义 CSS 类名的提示。

Regex Previewer

这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。

Markdown Preview Enhanced

实时预览markdown，markdown使用者必备

markdownlint

markdown语法纠错

代码运行与调试

Code Runner

非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等
安装完成后，右上角会出现：▶

Debugger for Chrome

直接在vscode里面进行调试js文件，跟谷歌的控制台是一样的功能，下载了它就不用打开浏览器的控制台就能进行打断点。

Live Server 实时预览

安装这个插件之后，我们在编辑器中修改代码，按Ctrl+S保存，修改效果就会实时同步，显示在浏览器中，再不用手动刷新。

代码提示与格式化

Beautify

格式化代码

Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。

HTML Snippets

超级实用且初级的 H5代码片段以及提示

HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式
新版已经支持scss文件检索

HTMLHint

HTML 代码格式检测

ESlint

ESlint 接管原生 js 提示，可以自定制提示规则

jshint

JSHint提示工具，规范JavaScript的编码

JavaScript (ES6) code snippets

es6代码片段

Code Spell Checker

我们在编写代码的时候经常会不小心拼写错误造成软件运行失败，安装这个插件后会自动帮我们识别单词拼写错误并且给出修改建议，大大帮我们减轻了排除bug的压力。

JavaScript Snippet Pack

一个片段包

jQuery Code Snippets

jQuery代码智能提示

文件相关

Image Preview

鼠标移到路径里显示图像预览

Path Intellisense

路径自动补全

filesize

在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

Path Autocomplete

自动提示文件路径

SVG Viewer

此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项

Import Cost

引入包大小计算,对于项目打包后体积掌握很有帮助

Version Lens

工具包版本信息
在package.json中显示你下载安装的npm工具包的版本信息，同时会告诉你当前包的最新版本。

Minify

这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。

Git相关

Git History

以图表的形式查看 git 日志

GitLens

显示文件最近的 commit 和作者，显示当前行 commit 信息，同时也会显示每一行代码的编辑提交情况

css预编译

Easy LESS

Less编译工具

Easy Sass

Sass编译工具

Vue插件

vueHelper

可能是目前vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码提示
同时它可以支持代码高亮，在vue文件中部分支持html/jade/pug的高亮，style部分支持css/scss/less/stylus的高亮，script部分支持js/ts的高亮

Vetur

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

编辑器辅助

vscode-icon

让 vscode 资源树目录加上图标，必备良品！

Settings Sync VSCode

设置同步到Gist
有时候我们到了新公司或者换了新电脑需要配置新的开发环境，这时候一个一个下载插件，再重新配置vs code就非常麻烦而且你还不一定记得那么全面，通过这个插件我们可以将当前vs code中的配置上传到Gist，之后再通过Gist下载，就可以将所有配置同步到新环境中了。
这个插件绝对是一个神器。 详细使用方法，请阅读 《vsCode配置通过Github同步(Settings Sync)》