vscode 插件

一、常用插件：

1、Chinese (Simplified) Language Pack for Visual Studio Code
汉化语言包

2 vue vscode snippets 快速写vue

2 Bracket Pair Colorizer 对应括号

5 editorconfig for vs code EditorConfig
EditorConfig包含一个用于定义代码格式的文件和一批编辑器插件，这些插件是让编辑器读取配置文件并以此来格式化代码，优先级高于编辑器默认的代码格式化规则。
EditorConfig官网：https://EditorConfig.org
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

auto complete tag 

auto import 

git history

gitlens-git superchanged 谁改了代码

html css support 有提示

JavaScript (ES6) code snippets
es6代码片段提示
https://marketplace.visualstudio.com/items?itemName=jmsv.JavaScriptSnippetsStandard

vetur
Vue语法语法高亮、智能感知
https://vuejs.github.io/vetur/

javascript Booster
material theme
material theme icons
One Dark Pro
open in browser

二、常用设置

setting.json

{
  "files.autoSave": "onFocusChange", //切换焦点文件自动保存
  "editor.tabSize": 2, //tab空格
  "eslint.options": {
     "extensions": [".js", ".vue"] //配置eslint应检查的文件扩展名
  },
  "eslint.probe": [
    //为以下文件激活ESlint格式化验证，让以下文件可以使用ESlint进行格式化验证
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown"
  ],
  "eslint.format.enable": true, //为启用ESLint作为格式化验证的文件启用格式化验证。
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true //为文件启用eslint自动格式化扩展
  },
  "editor.formatOnSave": true, //在保存时格式化文件
  "editor.formatOnPaste": true, //粘贴时自动格式化
  "prettier.arrowParens": "avoid", //箭头函数一个参数不加括号
  /*让prettier使用eslint的代码格式进行校验，解决格式化冲突，启用prettier-eslint，
  参考：https://github.com/prettier/prettier-eslint*/
  "prettier.eslintIntegration": true,
  // #去掉代码结尾的分号
  "prettier.semi": false,
  // #使用单引号替代双引号
  "prettier.singleQuote": true,
  "[vue]": {
    //对vue文件启用prettier作为默认格式化程序
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    //对js文件启用prettier作为默认格式化程序
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "emmet.triggerExpansionOnTab": true, //启用tab展开emmet语法
  // 以下为stylus格式化配置
  "stylusSupremacy.insertColons": true, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": true, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": true // 两个选择器中是否换行
}