vscode 前端好用插件汇总

本篇文章根据实际开发中使用的扩展插件，结合《精选！15 个必备的 VSCode 插件（前端类）》、《vscode 插件推荐 - 献给全部前端工程师（2017.8.18更新）》中的介绍进行编辑。

HTML相关：

HTML Boilerplate：

经过使用 HTML 模版插件，你就摆脱了为 HTML 新文件从新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 tab 键，便可生成干净的文档结构。也能够输入！，而后按tab键或者enter键来生成初始干净的文档结构。

HTML Snippets：

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

HTML CSS Support：

让 html 标签上写class 智能提示当前项目所支持的样式。

 

Path Intellisense：

自动路劲补全

Atuo Rename Tag：

修改 html 标签，自动帮你完成尾部闭合标签的同步修改。

Auto Close Tag:

自动关闭标签

highlight-matching-tag：

高亮当前所在标签的开始和结束为位置。

HTML Boilerplate：

HTML模板，输入HTML在下拉列表中能够选择对应的模板来新建HTML文件。

HTML CSS Support：

在HTML文档中提供对css代码的支持。

htmltagwrap：

按着快捷键ALT+W能够实现给代码块加父标签。

IntelliSense for CSS class names：

样式名提示

 

CSS相关:

CSS Peek：

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

CSScomb:

支持语言
1.CSS, Less, Sass, SCSS
2.Styles inside  or  tags: HTML, Vue

<style><style lang="LANGUAGE">

Sass:

高亮scss并支持语法补全

 

 

JS相关:

 

Babel ES6/ES7:

将ES6和ES7的代码转化成ES5的。

 

JavaScript (ES6) snippets:

JS 代码片断

文件相关:

自动补全

Document this：

js 的注释模板

fileheader：

同vscode-fileheader

 

 

vscode-fileheader：

 

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

Auto Import:

自动引入模块

filesize：

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

代码检测:

ESlint：

ESlint 接管原生 js 提示，能够自定制提示规则。

HTMLHint：

HTML代码检测

Code Spell Checker :

代码拼写检查

 

stylelint:

进行css,less,scss语法检查

TSLint：

对不一样的类型文件进行代码检查。

JSHint:

js代码检查。

vscode-caniuse:

 

Can I Use：

 

显示浏览器支持信息:The default keybinding is ctrl+shift+i on Windows/Linux and ctrl+c on Mac. You can override it with your custom settings.

 

代码格式化:

beautify：

格式化代码的工具

 Prettier：

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

预览相关:

open in browser:

能够在HTML文件上右键单击选择在浏览器中打开,浏览器中的地址栏的地址和在文件夹中双击打开HTML文件同样。

View In Browser:

在默认浏览器中查看,地址也是双击打开的地址 。

 

Color Info：

这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就能够预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

SVG Viewer：

此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，即可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。

 

Preview:

在VScode 中预览连接对应文件

素材相关:

VSCode Faker：

使用流行的 JavaScript 库 – Faker，可以帮你快速的插入用例数据。Faker 能够随机生成姓名、地址、图像、电话号码，或者经典的乱数假文段落，而且每一个类别还包含了各类子类别，你能够根据自身的需求来使用这些数据。

1. Type cmd+shift+p
2. Choose fake data category
3. Choose sub category

Icon Fonts：

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

Bootstrap 3 Sinnpet：

经常使用 bootstrap 的能够下

主题：

1.Themes：

1.Material   2.Dracula   3.One Dark Pro

2.图标主题：

1.vscode-icons：

3.代码主题相关:

Bracket Pair Colorizer：

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

调试：

Debugger for Chrome：

让 vscode 映射 chrome 的 debug功能，静态页面均可以用 vscode 来打断点调试。

 

 Quokka ：

 Quokka是一个调试工具插件，可以根据你正在编写的代码提供实时反馈。它易于配置，并可以预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它可以开箱即用。

 

工程管理相关:

SVN:

集成SVN工具

tortoise-svn:

集成SVN工具

 

Project Manager：

 

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

 

 

vue插件：

vetur：

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

VueHelper：

snippet代码片断

Vue 2 Snippets：

这个插件基于最新的 Vue 官方语法高亮文件添加了Syntax Highlight，而且依据 Vue 2 的 API 添加了Code Snippets。