1.Mithril Emmet(代码快速编写工具)
Emmet前身是zen-coding
A.快速编写HTML代码
![](https://img.haomeiwen.com/i2172404/08b865bb1b83300e.gif)
![](https://img.haomeiwen.com/i2172404/f67eb972fa20fd8d.gif)
![](https://img.haomeiwen.com/i2172404/aadbb4dc31aa55ed.gif)
![](https://img.haomeiwen.com/i2172404/8aeb39eb40e42d06.gif)
![](https://img.haomeiwen.com/i2172404/e7ee9b43e1c05e11.gif)
B.快速生成CSS样式
![](https://img.haomeiwen.com/i2172404/6369fbe5be783276.gif)
2.HTML Snippets
![](https://img.haomeiwen.com/i2172404/48fafc732108bf6c.png)
3.Debugger for Chrome
断点调试工具
4.Path Intellisense
自动路由补全
![](https://img.haomeiwen.com/i2172404/3a22fa4f2c5bed0c.gif)
5.beautify
格式化代码的工具
6.vscode-fileheader
快捷键:ctrl+alt+i
顶部注释,可定义作者、时间等信息,保存文件时自动更新最后修改时间。
7.Vue 2 Snippets
vue2 高亮 补全
8.Atom One Dark Theme
喜欢atom主题的可以下载,安装过后,设置一下
![](https://img.haomeiwen.com/i2172404/f00d864f845fecab.png)
9.vscode-icon
图标样式,必备插件
安装后,ctrl+shift+p调出命令行,输入theme,选择vscode-icon
![](https://img.haomeiwen.com/i2172404/e0faa2a90f499b4d.png)
![](https://img.haomeiwen.com/i2172404/d5f4bd3e3a98105f.png)
10.特别好用的 Vue 插件 - vetur
代码补全功能,综合比较应该是目前 VSCode 上面最好用的 Vue 插件。
能够实现在 .vue 文件中:
- 语法错误检查,包括 CSS/SCSS/LESS/Javascript/TypeScript
- 语法高亮,包括 html/jade/pug css/sass/scss/less/stylus js/ts
- emmet 支持
- 代码自动补全(目前还是初级阶段),包括 HTML/CSS/SCSS/LESS/JavaScript/TypeScript
配合 ESLint(代码规范和错误检查工具)插件效果更佳。
11.CSS Auto Prefix(css兼容性前缀补全插件)
既可以用于缩进样式,也可以用于单行CSS样式。要激活它,只需在工作台命令窗口中使用Ctrl + Shift + p,键入“Auto Prefix”。
![](https://img.haomeiwen.com/i2172404/5f9d916570b6cdfa.gif)
网友评论