vue-cli3 老项目的eslint配置

vue-cli3 老项目的eslint配置：

这个是在已经建了项目的基础上再配置。配置了好久，所以以后千万千万要在一开始的配置好，不然一堆Bug

我看着配置的的链接，嘻嘻嘻，挺全的 点击开始-eslint配置

## 原链接有点问题，setting.jss需要改一下代码

// 重新设定tabsize
"editor.tabSize": 2,
// 每次保存的时候将代码按eslint格式进行修复
// "eslint.autoFixOnSave": true,
// 此配置已作废，使用editor.codeActionsOnSave，里面配置source.fixAll.eslint 属性把"eslint.autoFixOnSave": true 改成：
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
// 添加 vue 支持
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  "vue"
],
// 每次保存的时候自动格式化（建议关掉，用eslint来修复）
"editor.formatOnSave": false
}

部分配置项的知识点：

// 开启验证
 lintOnSave : true,

lintOnSave 作用：设置是否在开发环境下每次保存代码时都启用 eslint验证。

value：
false：关闭每次保存都进行检测
true：开启每次保存都进行检测，效果与warning一样
‘error’：开启每次保存都进行检测，lint 错误将显示到浏览器页面上，且编译失败。
‘default’：同’error’
‘warning’：开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败。

遇到的问题：

**问题一：**warning: Expected 1 line break before closing tag (), but 2 line breaks found (vue/multiline-html-element-content-newline)

**解决：**在.eslintrc.js文件中添加以下代码即可

'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',

个人配置建议：

由于eslint的规则很多，我选择了其中一些个人认为必要的，以下是配置

.eslintrc.js

module.exports = {
    // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有   "root": true，它就会停止在父级目录中寻找。
    root: true,
    parserOptions: {
      // 对Babel解析器的包装使其与 ESLint 兼容。
      parser: 'babel-eslint',
      // 代码是 ECMAScript 模块
      sourceType: 'module'
    },
    env: {
       // 预定义的全局变量，这里是浏览器环境
      browser: true,
      node: true,
      es6: true,
    },
    // 扩展风格
    extends: ['plugin:vue/recommended', 'eslint:recommended'],
    // 规则的细节请到ESLint官方网站查看http://eslint.org/docs/rules/
    rules: {
      "vue/max-attributes-per-line": [2, {
        "singleline": 10,
        "multiline": {
          "max": 1,
          "allowFirstLine": false
        }
      }],
      "vue/name-property-casing": ["error", "PascalCase"],
      // 禁止或强制在单行代码块中使用空格
      'block-spacing': [2, 'always'],
      // 强制使用一致的缩进 第二个参数为 "tab" 时，会使用tab
      'brace-style': [2, '1tbs', {
        'allowSingleLine': true
      }],
      //  数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号
      'comma-dangle': [2, 'never'],
      // 控制逗号前后的空格
      'comma-spacing': [2, {
        'before': false,
        'after': true
      }],
      'comma-style': [2, 'last'],
    
      // 强制在对象字面量的属性中键和值之间使用一致的间距
      'key-spacing': [2, {
        'beforeColon': false,
        'afterColon': true
      }],
      // 强制在关键字前后使用一致的空格
      'keyword-spacing': [2, {
        'before': true,
        'after': true
      }],
      // 要求构造函数首字母大写
      'new-cap': [2, {
        'newIsCap': true,
        'capIsNew': false
      }],
      // 禁止不必要的括号 //(a * b) + c;//报错
      'no-extra-parens': [2, 'functions'],
      // 禁止在字符串和注释之外不规则的空白
      'no-irregular-whitespace': 2,
      // 禁用 __iterator__ 属性
      'no-iterator': 2,
      // 不允许标签与变量同名
      'no-label-var': 2,
      // 禁用不必要的嵌套块
      'no-lone-blocks': 2,
      //不允许空格和 tab 混合缩进
      'no-mixed-spaces-and-tabs': 2,
      // 禁止使用多个空格
      'no-multi-spaces': 2,
      // 禁止使用多行字符串，在 JavaScript 中，可以在新行之前使用斜线创建多行字符串
      'no-multi-str': 2,
      // 不允许多个空行
      'no-multiple-empty-lines': [2, {
        'max': 1
      }],
      // 禁用行尾空格
      'no-trailing-spaces': 2,
      // 强制操作符使用一致的换行符
      'operator-linebreak': [2, 'after', {
        'overrides': {
          '?': 'before',
          ':': 'before'
        }
      }],
      // 强制在 function的左括号之前使用一致的空格
      'space-before-function-paren': [2, 'never'],
       // 要求或禁止使用分号而不是 ASI（这个才是控制行尾部分号的，）
       'semi': [2, 'never'],
       // 强制分号之前和之后使用一致的空格
       'semi-spacing': [2, {
         'before': false,
         'after': true
       }],
        // 强制在块之前使用一致的空格
        'space-before-blocks': [2, 'always'],
        // 要求操作符周围有空格
        'space-infix-ops': 2,
         // 指定数组的元素之间要以空格隔开(, 后面)， never参数：[ 之前和 ] 之后不能带空格，always参数：[ 之前和 ] 之后必须带空格
         'array-bracket-spacing': [2, 'never'],
          // 要求或禁止模板字符串中的嵌入表达式周围空格的使用
        'template-curly-spacing': [2, 'never'],
      // 强制在圆括号内使用一致的空格
      // 'space-in-parens': [2, 'never'],
      
      // 强制在注释中 // 或 /* 使用一致的空格
      'spaced-comment': [2, 'always', {
        'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
      }],
      // 强制在花括号中使用一致的空格
      'object-curly-spacing': [2, 'always', {
        objectsInObjects: false
      }],
      // 标签</>前后不换行
      'vue/singleline-html-element-content-newline': 'off',
      'vue/multiline-html-element-content-newline': 'off',
     // self-closing问题
     "vue/html-self-closing": ["error",{
      "html": {
        "void": "never",
        "normal": "any",
        "component": "any"
      },
      "svg": "always",
      "math": "always"
    }],
    // 问题
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'generator-star-spacing': 'off',
    }
  }