前言：俗话说“君欲善其事，必先利其器。”笔者也使用VScode开发有一段时间了，不得不说，VSCode是我目前用到的众多开发工具中最好使用的一款。当然这些功能大多得归功于VSCode的插件生态系统，笔者经过这么长一段时间的开发，也安装了不少关于前端方面插件，参考网上大牛们的文章，整理出了如下插件（排名不分先后！）。由于插件过多，加上繁杂，笔者就没有一一分类，建议收藏下来慢慢看。

学习更多内容欢迎参考我的其他文章：

天之蓝源：三分钟在GitHub上搭建个人博客​zhuanlan.zhihu.com

天之蓝源：零基础Hexo+Github搭建静态个人博客​zhuanlan.zhihu.com

天之蓝源：原生js实现点击按钮复制文本内容​zhuanlan.zhihu.com

天之蓝源：九种跨域方式实现原理​zhuanlan.zhihu.com

天之蓝源：前端面试考点多？看这些文章就够了（转载）​zhuanlan.zhihu.com

天之蓝源：干货！值得收藏的前端学习网站​zhuanlan.zhihu.com

天之蓝源：原生JS实现一个日期选择器（DatePicker）组件​zhuanlan.zhihu.com

天之蓝源：原生js一步一步实现《别踩白块儿》小游戏​zhuanlan.zhihu.com

天之蓝源：原生js利用localstorage实现简易TODO list应用​zhuanlan.zhihu.com

天之蓝源：原生js实现瀑布流效果​zhuanlan.zhihu.com

天之蓝源：原生js实现图片懒加载（lazyLoad）​zhuanlan.zhihu.com

天之蓝源：原生js实现简单路由切换​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=true​github.com

4.jQuery Code Snippets

超过130个用于JavaScript代码的jQuery代码片段。只需键入字母'jq'即可获得所有可用jQuery代码片段的列表。

5.vscode-icons

让 vscode 资源树目录加上图标

vscode-icons/vscode-icons​github.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-tag​github.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/gitHistoryVSCode​github.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/quokka​github.com

实时观看 javascript 的变量的变化

32.TSLint

测试正则的插件

Microsoft/vscode-typescript-tslint-plugin​github.com

33.vetur

语法高亮、智能感知

Vetur | Vetur​vuejs.github.io

34.VueHelper

vue代码片段

OYsun/vscode-VueHelper​github.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插件基本都在这里了，更多内容可以参考我的其他文章！

欢迎关注微信公众号：前端切图仔