前言：俗话说“君欲善其事，必先利其器。”笔者也使用VScode开发有一段时间了，不得不说，VSCode是我目前用到的众多开发工具中最好使用的一款。当然这些功能大多得归功于VSCode的插件生态系统，笔者经过这么长一段时间的开发，也安装了不少关于前端方面插件，参考网上大牛们的文章，整理出了如下插件（排名不分先后！）。由于插件过多，加上繁杂，笔者就没有一一分类，建议收藏下来慢慢看。
学习更多内容欢迎参考我的其他文章：
天之蓝源：三分钟在GitHub上搭建个人博客zhuanlan.zhihu.com
进入正题！
1.HTML Snippets
超级实用且初级的 H5代码片段以及提示
2.HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式
3.Debugger for Chrome
让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试
https://github.com/Microsoft/vscode-chrome-debug/blob/master/images/demo.gif?raw=truegithub.com
4.jQuery Code Snippets
超过130个用于JavaScript代码的jQuery代码片段。只需键入字母'jq'即可获得所有可用jQuery代码片段的列表。
5.vscode-icons
让 vscode 资源树目录加上图标
vscode-icons/vscode-iconsgithub.com
6.Path Intellisense
自动路径补全
7.Document this
“Document This”是Visual Studio代码扩展，它自动为TypeScript和JavaScript文件生成详细的JSDoc注释。
8.ESlint
JavaScript代码检测, JavaScript代码风格检测, JavaScript代码自动格式化.
9.HTMLHint
html代码检测
10.Project Manager
在多个项目之前快速切换的工具
11.beautify
格式化代码的工具
12.Bootstrap 3 Sinnpet
常用 bootstrap 的可以下
13.Atuo Rename Tag
修改 html 标签，自动帮你完成尾部闭合标签的同步修改
formulahendry/vscode-auto-rename-taggithub.com
14.GitLens
丰富的git日志插件
15.fileheader
顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间
16.Bracket Pair Colorizer
让括号拥有独立的颜色，易于区分。可以配合任意主题使用。
17.Class autocomplete for HTMLaessoft
扩展自动扫描一个活动的HTML文件的外部CSS样式表链接。当找到样式表时，类名被提取出来，并与Visual Studio代码的代码完成特性一起使用。
18.Code Runner
能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等
19.css peek
能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义
20.Font-awesome codes for html
用于 html 的Font-awesome代码片段
21.filesize
在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
22.Git History
以图表的形式查看git日志
DonJayamanne/gitHistoryVSCodegithub.com
23.htmltagwrap
可以在选中HTML标签中外面套一层标签
24.Indenticator
突出目前的缩进深度
25.IntelliSense for CSS class names
智能提示 css 的 class 名
26.Image Preview
鼠标移到路径里显示图像预览
27.JavaScript (ES6) code snippets
es6代码片段
28.Live Sass Compiler
实时编译 sass
29.markdownlint
markdown 语法检查
30.open in browser
当前的 html 文件用浏览器打开，类似 webstorm 的那四个小浏览器图标功能，前提条件html 文件必须保
31.Quokka.js
wallabyjs/quokkagithub.com
实时观看 javascript 的变量的变化
32.TSLint
测试正则的插件
Microsoft/vscode-typescript-tslint-plugingithub.com
33.vetur
语法高亮、智能感知
Vetur | Veturvuejs.github.io
34.VueHelper
vue代码片段
OYsun/vscode-VueHelpergithub.com
35.Dracula Official
主题风格
36.One Dark Pro
代码主题
37. Color Info
提供你在 CSS 中使用颜色的相关信息
38.SVG Viewer
无需离开编辑器，便可以打开 SVG 文件并查看它们
39.TODO Highlight
能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务
40.Minify
用于压缩合并 JavaScript 和 CSS 文件的应用程序
到此我所了解到的vscode插件基本都在这里了，更多内容可以参考我的其他文章！
欢迎关注微信公众号：前端切图仔
1172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
