高效率工具：web前端开发VScode必备插件大全(欲其善其事必先利其器)

Bracket Pair Colorizer

友好的给括号加上不同的颜色，便于区分不同的区块，使用者还可以定义括号类型和颜色，尤其是 Dart 语言开发，尤为重要。

Terminal

编辑器中内嵌一个似 cmd 终端程序，直接在编辑器中运行终端命令。

Path Intellisense

插件自动提示文件路径，支持各种文件无脑快速引入，非常方便。

JavaScript(ES6) code snippets

ES6 语法智能提示及快速输入，不仅仅支持 .js，还支持.ts，.jsx，.tsx，.html，.vue。

ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/Reatc Native/react-router 语法智能提示，React 开发者必备。

Vetur

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

Npm Intellisense

npm 装包后，require 时的包智能提示，import 语句中自动填充 npm 模块。

Markdown Preview Enhanced

实时预览 Markdown，Markdown(.MD) 使用者必备。

code spell checker

检查你的英文单词拼写是否有误，如果有库里不存在的单词则会下下波浪线。

Better Comments

使注释有人性化的高亮显示，团队中非常适用，突出重点提示。 符号有：* 、! 、TODO 、@param。

markdownlint

Markdown 语法纠错，快速上手 MD 语法。

Auto Close Tag

自动闭合 HTML / XML 标签，非常快速的编写 HTML 代码。

Auto Rename Tag

自动完成 HTML / XML 另一侧标签的同步修改，非常方便。

ESLint

JavaScript 语法纠错，可以自定义配置，也可以参照官网的配置，摆正开发者的代码格书写格式。

GitLens

快捷方便查看 Git 日志，高频使用 Git 者必备，这里有配置教程。

HTML CSS Support

智能提示 CSS 类名以及 id 名，非常高效。

HTML Snippets

智能提示 HTML 标签，以及标签的含义，再也不用翻手册了。

jQuery Code Snippets

jQuery 代码智能提示，非常优雅。

vscode-icons

美化插件，用于美化目录树图标主题。

Dracula Official

编辑器颜色主题，很漂亮。

Class autocomplete for HTML

智能提示HTML class =“”属性，很好用。

IntelliSense for CSS class names

智能提示 css 的 class 名，无脑录入。

vsc-netease-music

写代码无聊，来点音乐？好的！

Power Mode

打字炫酷特效震动光效插件，这是配置教程，可以装着玩玩。

live Server

模拟本地服务器，编写网页时保存后自动刷新，无需到浏览器中刷新。

Visual Studio IntelliCode

给开发者提供最合适的 IntelliSense 上下文建议功能，除此之外，还有代码格式化和规则推测等功能。

Image Preview

鼠标悬浮在链接或者装订线(gutter)左边可以预览到图片，非常方便。

Output Colorizer

输出提示的文字颜色有一些变化，方便获取关键信息。

filesize

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

SVG Viewer

无需离开编辑器，便可以打开 SVG 文件并查看。

WakaTime

如果你想记录每天编程所花的时间，它可以帮助记录和存储有关编程活动的指标和分析。

Color Info

提供你在 CSS 中使用颜色的相关信息，悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）。

Minify

用于压缩合并 JavaScript 和 CSS 文件的应用程序，命令生成 .min 文件。