VScode设置Eslint规则并在保存时自动修复，让编程如丝般顺滑

不管是多人合作还是个人项目，代码规范是很重要的。使用Eslint规则来规范代码风格不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来写 vue。

平时常用的ESLint规则参考如下，并将文件保存至.eslintrc.js文件：
ESLint规则.

首先在Vscode安装Eslint、Prettier-Code、formatter、Vetur插件。

接着点开VScode的文件—>首选项—>设置处选择setting，根据个人情况选择user还是Workspce

在setting.jason文件中增加如下代码：

{
  // tab 大小为2个空格
  "editor.tabSize": 2,
  // // 保存时格式化
  "editor.formatOnSave": false,
  // // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  //  显示 markdown 中英文切换时产生的特殊字符
  "editor.renderControlCharacters": true,
  // eslint 检测文件类型
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    },
    "prettyhtml": {
      "printWidth": 200,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    },
    "prettier": {
      "semi": false,
      "singleQuote": true
    }
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

最后，按 ctrl+s 即可自动修复不符合Eslint要求的代码。

另外，为了防止组件export default 组件的 name值被自动修复成PascalCase编码，在.eslintrc.js文件的这一行语句将error，改成off。

"vue/name-property-casing": ["off", "PascalCase"]