美文网首页我爱编程
VSCode插件推荐(前端)

VSCode插件推荐(前端)

作者: Keiko_Yen | 来源:发表于2017-08-09 18:08 被阅读1079次

    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

    相关文章

      网友评论

        本文标题:VSCode插件推荐(前端)

        本文链接:https://www.haomeiwen.com/subject/nfjfrxtx.html