Vs code常用前端工具插件

Vs code前端插件

一.通用插件
1.HTML Snippets
超级实用且初级的H5代码片段以及提示。

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

3.Debugger for Chrome
让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试。

4.jQuery Code Snippets

5.vscode-icon
让vscode 资源树目录加上图标，必备良品。

6.Path Intellisense
自动路劲补全。

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

8.Document this
js的注释模板（新版的vscode已经原生支持，在function上输入/**tab）

9.ESlint
ESlint接管原生js提示，可以自定制提示规则。

10.HTML Hint
html代码检测。

11.Project Manager
在多个项目之前快速切换的工具。

12.beautify
格式化代码的工具

13.Bootstrap 3 Sinnpet
常用bootstrap的可以下载

14.Auto Rename Tag
修改html标签，自动帮你完成尾部闭合标签的同步修改，目前有些Bug。

15.GitLens
丰富的git日志插件
16.fileheader
顶部注释模板，可定义作者、时间等信息，并会自动更新组以后修改时间。

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

18.Bracket Pair Colorizer
让括号拥有独立的颜色，易于区分。可以配合任意主题.

19.Auto Close Tag
自动闭合HTML标签

20.Color Picker
拾色器

21.Color Highlight
颜色值在代码中高亮显示

22.File Peek
根据路径字符串，快速定位到文件

23.Output Colorizer
彩色输出信息

24.Test Spec Generator
测试用例生成（支持chai、should、jasmine）

25.Partial Diff
对比两段代码或文件

-----------------------------------------------------------------------------------------------------------------------

二.Vue框架所需插件
1.vetur
语法高亮、智能感知、Emmet等。

2.VueHelper
snippet代码片段

3.Import Cost
引入包大小计算，对于项目打包后体积掌握很有帮助。

-----------------------------------------------------------------------------------------------------------------------

三.主题
Material

Dracula

One Dark Pro

Bimbo

-----------------------------------------------------------------------------------------------------------------------

游戏结束：over