一、基础插件

  1. Chinese (Simplified) Language Pack for Visual Studio Code
    适用于 VS Code 的中文(简体)语言包

  2. ESLint
    VS Code ESLint 插件,规范代码格式的。

二、Vue相关

  1. Vetur
    用vue开发的必装,官方推荐
    作用:高亮.vue文件,附带有格式化功能,配合Eslint插件对代码进行格式化检查
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=octref.vetur
    Vetur.png

  2. Vue 2 Snippets
    主要加强vue的便捷写法
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
    Vue 2 Snippets.gif
    Vue 2 Snippets_1.gif

  3. Vue Peek
    用于Vue快速查看组件定义以及组件跳转,具体使用见插件文档地址中的使用方法。
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek
    Vue Peek.gif
    三、Theme


  1. One Dark Pro
    一款热门的主题,安装前后比较。
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
    One Dark Pro.png
  2. Material Icon Theme
    Material风格的icon文件图标,可以看下安装前后的区别。
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
    material-icon-theme.png
  3. vscode-icons
    Icons for Visual Studio Code
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

四、提高效率

  1. Bookmarks
    可以对成片的代码做一些书签标记,方便后续查看。
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
    Bookmarks.gif
  2. Auto Close Tag
    自动闭合标签所用
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
    Auto Close Tag.gif
  3. Auto Rename Tag
    自动修改重命名配对的标签
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
    Auto Rename Tag.gif
  4. Bracket Pair Colorizer
    对括号进行着色,方便区分,下面的图分别是安装前后的比较
    Bracket Pair Colorizer_before.png
    Bracket Pair Colorizer_after.png
  5. Path Intellisense
    路径自动感知,在配置文件中配置@后我们就可以很方便快捷的引用各种文件了
    "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
    }
    请输入图片描述
  6. Document This
    用于方法的注释,选中方法名,按两次Ctrl+Alt+D,即可快速生成标准的注释
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=joelday.docthis
    Document This.gif
  7. Beautify
    格式化html的,也可以格式化vue template中的html
    配合vetur插件,需要做些设置,格式化html支持以下四种模式auto|force|force-aligned|force-expand-multiline
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
    Beautify.png
  8. vscode-element-helper
    element-ui 提示
    插件文档地址:https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper
    vscode-element-helper.gif
    vscode-element-helper_1.gif