前端vscode必备插件，给你更好的编程体验！

工欲善其事，必先利其器。在这里，我会给你推荐很多实用的插件，让你对 vscode 有更深刻的体会，渐渐地你就会知道它有多好用。
走马观花前，请先将你的 vscode 更新到最新版本。

通用插件

HTML Snippets

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

1625604254-57bc7582e3a60_articlex.jpeg

HTML CSS Support

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

3580247599-57bc75f477974_articlex.jpeg

Debugger for Chrome

让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试，真666~
配置稍微复杂一些，哪天心情好我再另写教程吧~

jQuery Code Snippets

jquery 重度患者必须品，废话不多说，上图

3684834102-57bc776bb6f6b_articlex.jpeg

vscode-icon

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

1604174724-57bc77c0d0f00_articlex.jpeg

Path Intellisense

自动路劲补全，默认不带这个功能的，赶紧装

281069640-57bc7829cba1a_articlex.gif

Npm Intellisense

require 时的包提示（最新版的vscode已经集成此功能）

472843894-57bcf2f9f0da9_articlex.gif

Document this

js 的注释模板 （注意：最新版的vscode已经原生支持）

481603181-57bc799018eaa_articlex.gif

HTMLHint

html代码检测

581897998-58ad18e647be6_articlex.png

Project Manager

在多个项目之前快速切换的工具

beautify

格式化代码的工具

Bootstrap 3 Sinnpet

常用 bootstrap 的可以下

Atuo Rename Tag

修改 html 标签，自动帮你完成尾部闭合标签的同步修改，不过有些bug

3091801986-57bcee8b9c0c5_articlex.gif

GitLens

丰富的git日志插件

fileheader

顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间

filesize

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

1675133622-58bc6205b271d_articlex.jpeg

Bracket Pair Colorizer

让括号拥有独立的颜色，易于区分。可以配合任意主题使用。

CSS Peek

2ed000033cd2344d5528.gif

使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

插件地址：
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Prettier

2eca00035337e42b3698.gif

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！

插件地址：
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Color Info

2ec10004dddbb4b57f5e.gif

这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
插件地址：
https://marketplace.visualstudio.com/items?itemName=bierner.color-info

Icon Fonts

2ed100033c7d06389537.gif

这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

插件地址：
https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts

Minify

2ed100033c8077e81d7d.gif

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

使用F1 运行文件缩小器Minify
插件地址：
https://marketplace.visualstudio.com/items?itemName=HookyQR.minify

Vue插件

以下推荐vue框架所需的插件

vetur

语法高亮、智能感知、Emmet等

2544643075-58ac224b6d8c3_articlex.png

VueHelper

snippet代码片段

主题

Material

冷门、好看、实用。此主题已停更许久

3432080261-57bcf0149f5f0_articlex.jpeg