在这里，我会给你推荐很多实用的插件，让你对 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
网友评论