早在2016年就不时听到微软家的Visual Studio Code（下文简称VS Code），以前独自开发一个sublime就够了，后面因为公司项目原因不得已尝试了下IDEA，感觉还是太沉重了，而且还丑！今年因为参与构建公司产品涉及了前端服务，因此转用了VSCode，体验了下便爱不释手！这里分享一些比较实用的插件吧。

插件：

  • Auto rename tag

    在HTML, XML文件中修改标签时，直接在前标签名上修改，插件会自动修改后标签名。

  • Beautify

    HTML、CSS、JS、JSON语法高亮

  • Chinese Language Pack for Visual Studio Code

    汉化中文包

  • CSS Peek

    右键选择“ Go to Definition 和 Peek definition ”选项，可追踪至样式表中 CSS 类和 ids 定义的地方

  • ESLint 【重磅】

    安装插件成功后重启VSCode，打开”设置”，打开“settings.json”添加以下配置内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    > "eslint.validate": [
    >     "javascript",
    >     "javascriptreact",
    >     "html",
    >     { "language": "vue", "autoFix": true }
    > ],
    > "eslint.options":{ "plugins": ["html"] },
    > "eslint.autoFixOnSave": true,
    >

    >

    通常情况下，当我们需要根据ESLint的相关错误提示手动修改并保存文件。然而VSCode提供了"eslint.autoFixOnSave": true,这个配置项，当我们直接保存文件时，VSCode会自动根据项目下的.eslintrc.js文件中的相关配置对代码进行格式化修复。这个配置项在开发中很实用！

  • HTML Boilerplate

    HTML 模板扩展将不必手动写入新的 HTML 文档的 head 和 body 标签。只需在空文件中输入 html ，按 Tab 键即可生成干净的文档结构。(这一个功能貌似Emmet也提供了？)

  • HTML CSS Support

    在编写样式表的时候，自动补全功能

  • HTML Snippets

    html自动补全提示

  • HTML Hint

    html代码检测

  • jQuery Code Snippets

    juqery自动补全提示

  • Mithril Emmet

    代码快速编写工具，装机必备，不解释。

  • Open in Browser

  • Path intellisense

    自动路由补全

  • Quokka.js

    Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈（我基本没用到这个插件）

  • Vetur【重磅】

    vue语法下代码补全工具，据说是综合比较下，目前VSCode上面最好的Vue插件了，配合ESLint效果无敌！

  • Vue VSCode Snippets

    很全面的vue代码片段

  • VueHelper

    可能是目前vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码提示

  • wpy-beautify

    wepy脚手架下开发小程序，可使用该插件来实现代码格式优化

  • Monokai主题

  • vscode-icons

    图标样式，必备插件，从此我的工作界面都比别人帅！