vue-cli3 老项目的eslint配置

问题解决及收藏记录
已有老项目如何添加eslint配置
包含vscode配置方案

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',
    }
  }

————————————————
版权声明：本文为CSDN博主「某瓜写代码」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_46183615/article/details/120835141

自用的

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": 5,
            "multiline": {
                "max": 6,
                "allowFirstLine": true
            }
        }],
        "vue/name-property-casing": ["error", "PascalCase"],
        // 禁止或强制在单行代码块中使用空格
        'block-spacing': [2, 'always'],
        // 不允许不必要的转义字符
        'no-useless-escape': [0, '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': [0, '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': [0, 'never'],
        'arrow-spacing': [
            2,
            {
                before: true,
                after: true
            }
        ], //=>的前/后括号
        // 要求或禁止使用分号而不是 ASI（这个才是控制行尾部分号的，）
        'semi': [0, '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': 'off',
        'no-debugger': 'off',
        'generator-star-spacing': 'off',
        "vue/v-on-style": ["error", "shorthand"],
        "vue/require-prop-types": 'off',
        // 设置标签 元素/组件特性的顺序
        "vue/attributes-order": ["error", {
            "order": [
                "EVENTS",
                "DEFINITION",
                "CONDITIONALS",
                "LIST_RENDERING",
                "RENDER_MODIFIERS",
                "GLOBAL",
                "UNIQUE",
                "TWO_WAY_BINDING",
                "OTHER_DIRECTIVES",
                "OTHER_ATTR",
                "CONTENT"
            ]
        }],
        // vue 组件/实例的选项的顺序
        "vue/order-in-components": ["error", {
            "order": [
                "el",
                "name",
                "parent",
                "functional",
                ["delimiters", "comments"],
                ["components", "directives", "filters"],
                "extends",
                "mixins",
                "inheritAttrs",
                "model",
                ["props", "propsData"],
                "data",
                "computed",
                "watch",
                "methods",
                "LIFECYCLE_HOOKS",
                ["template", "render"],
                "renderError"
            ]
        }]
    }
}