vscode vue eslint 格式化那些事

使用 vue-cli 创建项目时开启了 eslint 检测，部分功能复用以前的代码，但是之前代码并没有严格按照Eslint的规则进行格式化的，那么问题来了。手动一个个改不是我们的风格，怎么实现自动化也是我们的风格。

百度出来很多相关文章，研究了很久，并没有完美解决这个问题的。

1. 接下来开始解决问题 安装vscode插件: Eslint 、Vetur、 Prettier(这个插件其实很坑，最终没使用)、Manta’s Stylus Supremacy （stylus）
2. 确认eslint相关依赖已安装 ，以下是我安装的eslint相关依赖，没有试过哪个是必须的，哪个是非必须，项目初始化时就有了。后期我没装所以不清楚哦，有时间的可以试试 😄
   
3. 在vscode配置文件中 (setting.json)增加配置

  "editor.formatOnSave": true, //每次保存自动格式化
  "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复，js代码格式化靠这个设置
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "none", //关闭格式化vue文件中javascript代码的插件，因为没有好用的插件 ，prettier 也不能完全符合要求
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }    
  },
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行

4. 到这里就实现了保存以Eslint规则自动格式化vue文件 ，又可以偷懒了！哈哈
5. 最后附上可以实现保存自动格式化的完整配置。

{
  "workbench.colorTheme": "Atom One Dark",
  "workbench.iconTheme": "material-icon-theme",
  // 在保存时格式化文件。优先使用自定义格式化程序，如没有定义使用默认
  // vue项目中建议关闭,因为他的优先级最高（在最后执行），会破坏之前格式化的内容
  "editor.formatOnSave": false,
  // vue 项目中的js代码用eslint来格式化，所以需要关闭冲突的格式化程序
  "editor.codeActionsOnSave": {
    // 使用下面这条规则需要在eslintrc.js文件中定义plugin
    "source.fixAll.eslint": true,
  },
  // 控制折行的方式。
  //  - off: 永不换行。
  //  - on: 将在视区宽度处换行。
  //  - wordWrapColumn: 在 `editor.wordWrapColumn` 处折行。
  //  - bounded: 在视区宽度和 `editor.wordWrapColumn` 中的较小值处折行。
  "editor.wordWrap": "on",
  // 一个制表符等于的空格数。在 `editor.detectIndentation` 启用时，根据文件内容，该设置可能会被覆盖。
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  // 定义js文件的格式化程序
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // 定义函数参数括号前的空格处理方式。
  // "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // "javascript.preferences.quoteStyle": "auto",
  // 定义非必要分号的处理方式。要求在工作区内使用 TypeScript 3.7 或更高版本。
  //  - ignore: 不要插入或删除任何分号。
  //  - insert: 在语句末尾插入分号。
  //  - remove: 删除不必要的分号。
  // "javascript.format.semicolons": "remove",
  // 启用或禁用 JavaScript 文件的语义检查。若有 jsconfig.json 或 tsconfig.json 文件，将覆盖此设置。要求工作区使用高于 2.3.1 版本的 TypeScript。
  // "javascript.implicitProjectConfig.checkJs": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatterOptions": { //参考网站 https://vuejs.github.io/vetur/formatting.html#settings
  "js-beautify-html": { // 参数参考 https://github.com/beautify-web/js-beautify
  "wrap_attributes": "force-expand-multiline" //auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned
    }
  },
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    "vue",
    "html"
  ],
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": true, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": true,  
}

参考
Eslint Rules
Prettier配置参数
参考资料1
参考资料2