vscode+eslint+vetur配置，针对Vue项目

1、配置插件

eslint、vetur  这里不需要Prettier - Code formatter这个插件，容易造成混乱

 2、打开vscode配置步骤

设置>用户>扩展>eslint>settings.json，在settings.json 中配置

3、配置采坑经验

           在配置中很容踩到坑，因为跟着vscode 及插件跟新一些代码段弃用，出现了很多变更；或者一些插件起了冲突，这种就要到项目里的.eslintrc.js配置

例如：

配置中一些变动

 

4、配置代码

详细配置里面有些可以不用

{
  // ----------------
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #每次保存的时候将代码按eslint格式进行修复
  //"eslint.autoFixOnSave": true,以弃用   改成下面的"editor.codeActionsOnSave"
  "editor.codeActionsOnSave": {
    // #每次保存的时候将代码按eslint格式进行修复
    "source.fixAll.eslint": true,
    "eslint.autoFixOnSave": true,
  },
  // 启用eslint作为格式化程序
  "eslint.format.enable": true,
  // 添加支持格式
  //autoFix默认开启，只需输入字符串数组即可
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ],
  // #这个按用户自身习惯选择 ， html 使用 beautify
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 设置下面这组会执行prettier格式
  // "vetur.format.defaultFormatter.html": "prettyhtml",
  // "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "wrap_attributes": "force-aligned",
    "js-beautify-html": {
      // - auto: 仅在超出行长度时才对属性进行换行。
      // - force: 对除第一个属性外的其他每个属性进行换行。
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
      // - force-expand-multiline: 对每个属性进行换行。
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
      "wrap_attributes": "force-aligned",
      // #vue组件中html代码格式化样式,可选
      // "wrap_line_length": 200,
      // "end_with_newline": false,
      // "semi": true,
      // "singleQuote": true
    },
    "prettier": {
      //设置分号
      "semi": false,
      //双引号变成单引号
      "singleQuote": true,
      //禁止随时添加逗号,这个很重要。找了好久
      "trailingComma": "none"
    }
  },
  // "explorer.confirmDelete": false,
  "diffEditor.ignoreTrimWhitespace": true,
  // "workbench.sideBar.location": "left",
  // "files.autoGuessEncoding": true,
  "editor.formatOnType": true,
  // "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  // "editor.suggest.snippetsPreventQuickSuggestions": false,
}