VSCode插件推荐(前端)

1.Mithril Emmet(代码快速编写工具)

Emmet前身是zen-coding

A.快速编写HTML代码

初始化.gif
内容.gif

分组.gif
id/class.gif
嵌套.gif

B.快速生成CSS样式

css.gif

2.HTML Snippets

html提示.png

3.Debugger for Chrome

断点调试工具

4.Path Intellisense

自动路由补全

路由补全.gif

5.beautify

格式化代码的工具

6.vscode-fileheader

快捷键:ctrl+alt+i
顶部注释,可定义作者、时间等信息,保存文件时自动更新最后修改时间。

7.Vue 2 Snippets

vue2 高亮 补全

8.Atom One Dark Theme

喜欢atom主题的可以下载,安装过后,设置一下

设置.png

9.vscode-icon

图标样式,必备插件
安装后,ctrl+shift+p调出命令行,输入theme,选择vscode-icon

theme.png
icon.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”。

demonstration.gif
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容