❗❗❗ 先弄第四个步骤，如果操作完发现没问题，那么其他步骤都不用看

eslint rules 中文网站：http://eslint.cn/docs/rules/
最近eslint更新后，项目里前端协同作业遭到了令人脑壳疼的麻烦，经历了几个晚上的折磨，堪堪找到一个解决方法：
**

一、插件安装

在VScode前端IDE里找到插件扩展商店image.png，在这里陆续搜索并安装Eslint image.png , Veturimage.png，以及Prettierimage.png。 后面的小数字是版本，这里唯一需要注意的是安装Vetur时默认是最新版本，但是最近的更新它的最新版和Eslint有很多冲突，所以这里退回到0.23.0版本。步骤如下：
image.png
选择image.png等待安装完成会需要点击重新加载VScode。

二、Prettier的依赖安装

在VScode终端输入 image.png

  1. npm install --save-dev --save-exact prettier

三、VScode的settings.json 文件配置

在VScode的左下角image.png，打开设置，
然后在设置页面的右上角点开image.png这个小图标，把下面的这段代码覆盖进去

  1. // 将设置放入此文件中以覆盖默认设置
  2. {
  3.   //自动保存
  4.   "files.autoSave": "off",
  5.   // 以像素为单位控制字号。
  6.   "editor.fontSize": 20,
  7.   //一个制表符等于的空格数
  8.   "editor.tabSize": 2,
  9.   // 自动更新扩展
  10.   "extensions.autoUpdate": false,
  11.   //关掉自动更新
  12.   "update.mode": "none",
  13.   // 通过使用 tab 键 补全代码
  14.   "emmet.triggerExpansionOnTab": true,
  15.   "window.zoomLevel": 0,
  16.   "workbench.startupEditor": "newUntitledFile",
  17.   "workbench.sideBar.location": "left",
  18.   "explorer.confirmDelete": false,
  19.   "editor.minimap.enabled": true,
  20.   "workbench.iconTheme": "material-icon-theme",
  21.   "explorer.confirmDragAndDrop": false,
  22.   "files.associations": {
  23.     "*.wxss": "css",
  24.     "*.wpy": "vue",
  25.     "*.cjson": "jsonc",
  26.     "*.wxs": "javascript"
  27.   },
  28.   "eslint.validate": [
  29.     "javascript",
  30.     "javascriptreact",
  31.     "html",
  32.     {
  33.       "language": "vue",
  34.       "autoFix": true
  35.     },
  36.     {
  37.       "language": "typescript",
  38.       "autoFix": true
  39.     },
  40.     "typescriptreact"
  41.   ],
  42.   "vetur.format.defaultFormatterOptions": {
  43.     "prettier": {
  44.       "singleQuote": true,
  45.       "semi": false
  46.     },
  47.     "js-beautify-html": {
  48.       "wrap_line_length": 120,
  49.       "wrap_attributes": "auto",
  50.       "end_with_newline": false
  51.     }
  52.   },
  53.   //  从这里往下都给加上
  54.   "eslint.options": {
  55.     "plugins": ["html"],
  56.     "extensions": [".js", ".vue"]
  57.   },
  58.   "search.exclude": {
  59.     "**/node_modules": true,
  60.     "**/bower_components": true,
  61.     "**/dist": true
  62.   },
  63.   "emmet.syntaxProfiles": {
  64.     "javascript": "jsx",
  65.     "vue": "html",
  66.     "vue-html": "html"
  67.   },
  68.   "git.confirmSync": false,
  69.   "editor.renderWhitespace": "boundary",
  70.   "editor.cursorBlinking": "smooth",
  71.   "editor.minimap.renderCharacters": false,
  72.   "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  73.   "editor.codeLens": true,
  74.   "editor.snippetSuggestions": "top",
  75.   // 旧的
  76.   "editor.formatOnSave": true, //#每次保存的时候自动格式化
  77.   "javascript.format.enable": true, // 启动JavaScript格式化
  78.   "prettier.eslintIntegration": true, // 让prettier遵循eslint格式美化
  79.   "workbench.activityBar.visible": true,
  80.   "workbench.statusBar.visible": true,
  81.   "editor.formatOnType": true,
  82.   "editor.codeActionsOnSave": {
  83.     "source.fixAll.eslint": true
  84.   },
  85.   "team.showWelcomeMessage": false,
  86.   "emmet.includeLanguages": {
  87.     "wxml": "html"
  88.   },
  89.   "eslint.run": "onSave",
  90.   "eslint.debug": true,
  91.   "eslint.format.enable": true,
  92.   "minapp-vscode.disableAutoConfig": true,
  93.   "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  94.   "vetur.format.defaultFormatter.ts": "vscode-typescript",
  95.   "eslint.alwaysShowStatus": true,
  96.   "javascript.updateImportsOnFileMove.enabled": "always",
  97.   "[vue]": {
  98.     "editor.defaultFormatter": "octref.vetur"
  99.   },
  100.   //分号
  101.   "prettier.semi": false,
  102.   //单引号包裹字符串
  103.   "prettier.singleQuote": true,
  104.   //html格式化依赖 默认为none
  105.   "vetur.format.defaultFormatter.html": "js-beautify-html",
  106.   //函数前加空格
  107.   //"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  108.   //没有下边这些 上边不生效
  109.   "vetur.format.defaultFormatter.js": "vscode-typescript",
  110.   "terminal.integrated.rendererType": "dom",
  111.   "workbench.colorTheme": "Default Dark+",
  112.   "vetur.validation.template": true,
  113.   "eslint.quiet": true // #每次保存的时候将代码按eslint格式进行修复
  114. }


这里有些个人爱好的设置我都有注释在代码后面，比如VScode的字号大小。

四、.eslintrc 文件中的rules配置

在项目更目录下，有一个.eslintrc.js文件image.png，打开后找到(Ctrl+F直接搜索也可以)rules配置对象image.png，将rules替换成以下代码

  1. rules: {
  2.     indent: [0], //缩进 // allow async-await
  3.     "generator-star-spacing": "off", //函数前后空格 // allow debugger during development
  4.     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
  5.     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", //不允许debugger
  6.     "no-control-regex": 0, //是否监测正则控制符异常
  7.     "no-tabs": "off", //不允许使用制表符，包括在注释中
  8.     "no-dupe-keys": "error", //在创建对象字面量时不允许键重复 {a:1,a:1}
  9.     "no-dupe-args": "error", //函数参数不能重复
  10.     "no-duplicate-case": "error", //switch中的case标签不能重复
  11.     "no-floating-decimal": "error", //禁止省略浮点数中的0 .5 3.
  12.     "no-multiple-empty-lines": ["warn", { max: 100 }], //空行最多不能超过100行
  13.     "no-mixed-spaces-and-tabs": ["off"], //不允许使用混合空格和制表符进行缩进
  14.     "spaced-comment": "off", //注释风格要不要有空格什么的
  15.     "no-multi-spaces": "off", //不能用多余的空格
  16.     "no-undef": "error", //不能有未定义的变量
  17.     "no-unused-vars": [
  18.       "error",
  19.       { vars: "all", args: "none", ignoreRestSiblings: false },
  20.     ], //不能有声明后未被使用的变量或参数
  21.     camelcase: "off", //强制驼峰法命名
  22.     "comma-dangle": [2, "never"], //对象字面量项尾不能有逗号
  23.     "comma-spacing": "off", //逗号前后的空格
  24.     semi: ["error", "never"], //在语句末尾需要分号  忽略块中的最后一个分号 这里我有点不解 import Main from '@/views/Main.vue';会报错  但是现在这样确实是我要的效果
  25.     "space-after-keywords": ["off", "always"], //关键字后面是否要空一格
  26.     "space-before-blocks": ["off", "always"], //不以新行开始的块{前面要不要有空格
  27.     "space-before-function-paren": ["off", "always"], //函数定义时括号前面要不要有空格
  28.     "space-in-parens": ["off", "never"], //小括号里面要不要有空格
  29.     "space-infix-ops": "off", //中缀操作符周围要不要有空格
  30.     "space-return-throw-case": "off", //return throw case后面要不要加空格
  31.     "space-unary-ops": ["off", { words: true, nonwords: false }], //一元运算符的前/后要不要加空格
  32.     "spaced-comment": "off", //注释风格要不要有空格什么的
  33.     quotes: ["off", "single"], //引号类型
  34.     "no-trailing-spaces": [
  35.       "off",
  36.       { skipBlankLines: true, ignoreComments: true },
  37.     ], //可以在行尾添加尾随空格
  38.     "keyword-spacing": ["off", { before: true, after: true, overrides: null }], //在关键字前后加空格，overrides允许覆盖指定关键字的间距样式
  39.     "key-spacing": "off", //强制在对象字面量的键和值之间使用一致的空格
  40.     "semi-spacing": ["off", { before: false, after: false }], //分号前后空格
  41.     "no-eq-null": "off", //禁止对null使用==或!=运算符
  42.     eqeqeq: ["off"], //对象比较时不强制考虑类型安全
  43.   }

五、可能需要添加一个.prettierrc 文件

本来在settings.js里面已经配置过使用 prettier 为美化代码的标准了，而且也生效了，但有时候遇到版本更新时又偶尔会失效，这个文件是为这种情况预留的一个激活文件，遇到代码格式化无效的时候，可以打开它然后保存一下就激活了，这个文件里面甚至都可以没有什么内容。
这个文件放在根目录下和.eslintrc.js平级的位置：image.png

  1. {
  2.   "semi": false,
  3.   "singleQuote": false
  4. }

悄悄的告诉你一个消极的方法，在config文件夹下的index.js文件中，把useEslint改成false,万事大吉。