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",
  "workbench.editor.enablePreview": false, //打开文件不覆盖
  "editor.formatOnSave": true, //每次保存自动格式化
  "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
  "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"
    }
  },
  "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 // 两个选择器中是否换行
}

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