前端编程规约——EsLint配置 #

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true
  },
  // 当规则冲突时，后面的会覆盖前面的
  extends: [
    'eslint:recommended',
    '@vue/prettier',
    'plugin:vue/vue3-recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 当规则冲突时，此处定义的规则会覆盖继承的规则。
    'indent': ['warn', 2], // 缩进2字符
    'quotes': ['warn', 'single'], // 仅允许单引号
    'no-dupe-keys': 2, // 在创建对象字面量时不允许键重复 {a:1,a:1}
    'no-dupe-args': 2, // 函数参数不能重复
    'no-duplicate-case': 0, // switch中的case标签不能重复
    'no-func-assign': 2, // 禁止重复的函数声明
    'no-multiple-empty-lines': [1, { max: 2 }], // 空行最多不能超过2行
    'no-redeclare': 2, // 禁止重复声明变量
    'no-console': 'warn',
    'no-debugger': 'warn',
    'curly': ['error', 'all'], // 必须使用 if(){} 中的{}
    'default-case': 2, // switch语句最后必须有default
    'comma-spacing': [2, { before: false, after: true }], // 控制逗号前后的空格，前面没有，后面一个
    'comma-style': [2, 'last'], // 控制逗号在行尾出现
    'comma-dangle': [2, 'never'], // 数组和对象键值对最后一个逗号  never：不能带末尾的逗号 always：必须带末尾的逗号
    'no-spaced-func': 2, // 函数调用时 函数名与()之间不能有空格
    'no-sparse-arrays': 2, // 禁止稀疏数组， [1,,2]
    'no-undef-init': 2, // 变量初始化时不能直接给它赋值为undefined
    'no-unused-vars': 2, // 声明了变量但是没有使用检测
    'no-use-before-define': 2, // 未定义前不能使用
    'no-prototype-builtins': 0, // 防止Object.prototype直接从对象调用方法
    'no-async-promise-executor': 0, // 禁止使用异步函数作为 Promise executor
    'prettier/prettier': 'off',
    // 元素每行最多写几个属性
    'vue/max-attributes-per-line': ["error", {
      // 单行情况：3个
      "singleline": {
        "max": 3
      },
      // 多行情况： 1个
      "multiline": {
        "max": 1
      }
    }],
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multi-word-component-names': 'warn', // 组件名应由多个单词组成
    'vue/html-self-closing': [
      'error',
      {
        // HTML void元素自关闭
        html: {
          void: 'always',
          normal: 'always',
          component: 'always'
        },
        svg: 'always',
        math: 'always'
      }
    ],
    // 不允许覆盖保留字
    'vue/no-reserved-keys': ['error', {
      'reserved': ['if', 'else', 'switch', 'case', 'break', 'return', 'then', 'catch', 'finally', 'for', 'white', 'continue', 'this', 'function', 'with', 'default', 'throw', 'delete', 'in', 'try', 'do', 'instranceof', 'typeof', 'const', 'let', 'var'],
      'groups': []
    }],
    'vue/no-shared-component-data': 'error', //强制data必须是一个带返回值的函数
    'vue/no-duplicate-attributes': 'error', //不允许重复的attributes
    'vue/no-template-key': 'error', // <template>不允许key属性
    'vue/no-dupe-keys': 'error', // 不允许重复的keys
    'vue/no-arrow-functions-in-watch': 'error', // 禁止在watch里使用箭头函数
    'vue/no-async-in-computed-properties': 'error', // 禁止在computed内使用异步方法
    'vue/no-mutating-props': 'warn', // 禁止从子组件对props中的变量直接赋值
    // vue文件内的选项排序
    "vue/order-in-components": ["error", {
      "order": [
        "name",
        "model",
        "components",
        ["directives", "filters"],
        ["props", "propsData"],
        ["provide", "inject"],
        "emits",
        "functional",
        "mixins",
        "data",
        "computed",
        "watch",
        "watchQuery",
        "beforeCreate",
        "setup",
        "created",
        "beforeMount",
        "mounted",
        "activated",
        "deactivated",
        "beforeUpdate",
        "updated",
        "beforeUnmount",
        "unmounted",
        "errorCaptured",
        "renderTracked",
        "renderTriggered",
        "methods",
        ["template", "render"],
        "renderError"
      ]
    }],
  }
};