VSCode工作区设置

1,389 阅读2分钟

VSCode工作区设置之插件安装

一、必备插件,必须安装!

  1. Vetur

    vue语法支持插件,提供vue代码高亮、代码提示、Emmet、代码格式化等功能,详见Vetur官网

  2. ESLint

    提供js/vue等代码格式化、代码检测、错误修复等功能,详见ESLint官网; 因最新项目均使用TS作为基础开发语言,所有同时需要安装TSLint 对应scss/css格式化需要安装 stylelint

  3. Prettier - Code formatter

    可提供js/jsx/HTML/vue/css/scss等多种语言代码格式化、功能,详见Prettier官网; 在vue单文件组件中使用需要由Vetur设置;

  4. npm Intellisense

    引入node_modules包时提供代码提示

  5. Path Intellisense

    引入文件时提供代码提示,如果设置了路径别名,如@/**则需要设置jsconfig.js或者tsconfig.js文件;

  6. Code Spell Checker

    单词拼写检查,有效减少代码拼写错误、代码命名不规范、等低级错误;

  7. Bracket Pair Colorizer 2

    代码块不同颜色区分


二、强烈推荐VSCode主题插件 (保证清晰代码高亮、文件类型识别)

  1. One Dark Pro
    主题文件,用于代码高亮
  2. Material Icon Theme
    图标主题,用于文件类型识别

三、Git插件 (commit历史,代码找回)

  1. Git History
    commit历史查看,commitId获取,cherryPick代码恢复;
  2. GitLens
    commit变更文件查看,文件变更历史查看等高级操作,详情查看GitLens官网

四、高效开发插件,强烈推荐安装! (成倍提升开发效率的插件)

  1. Auto Close Tag
    自动关闭html标签
  2. Auto Rename Tag
    自动同步修改html标签
  3. Element UI Snippets
    element-ui的代码提示插件,高效开发element,强烈推荐!
  4. change-case
    修改变量格式,如小驼峰转横杆等
  5. JSON to TS
    自动同步修改html标签
  6. javascript console utils
    自动同步修改html标签
  7. Bookmarks
    自动同步修改html标签
  8. TODO Highlight
    自动同步修改html标签
  9. Vue Peek
    自动同步修改html标签
  10. CodeMetrics
    自动同步修改html标签
  11. JavaScript (ES6) code snippets
    es6代码片段

五、其他插件


  1. Settings Sync
    VSCode配置云同步插件,可插件保存列表,vscode设置,代码片段,快捷键等;