eslint配置推荐

• 安装

  # npm 
  npm install --save-dev eslint babel-eslint eslint-plugin-vue
  # yarn
  yarn add eslint babel-eslint eslint-plugin-vue --dev
  # 如果是vue-cli3项目，以上配置的eslint插件默认已安装

• 根目录新建.eslintrc.js, 添加规则：

  0: 'off', 1: 'warn', 2: 'error'

module.exports = {
  root: true, // 根配置文件
  parserOptions: {
    // 语法解析器选项
    parser: 'babel-eslint', // es6, 兼容箭头函数等
    sourceType: 'module',
  },
  env: {
    // 执行环境
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended', 'prettier'], // 基础配置进行扩展
  plugins: ['prettier'],
  rules: {
    // 校验规则
    'vue/component-definition-name-casing': ['error', 'PascalCase'], // vue组件name, PascalCase为大驼峰
    'vue/html-end-tags': {
      'vue/html-self-closing': [
        'warn',
        {
          html: {
            void: 'never', // 不要关闭无内容标签
            normal: 'always',
            component: 'always',
          },
          svg: 'always',
          math: 'always',
        },
      ],
    }, // 自闭合标签
    'vue/max-attributes-per-line': [
      2,
      {
        singleline: 10,
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ], // 每行的最大属性数
    'vue/singleline-html-element-content-newline': 0, // 单行元素的内容前后强制换行
    'vue/multiline-html-element-content-newline': [
      'warn',
      {
        ignoreWhenEmpty: true,
        ignores: ['pre', 'textarea', ...INLINE_ELEMENTS],
        allowEmptyLines: false,
      },
    ], // 多行元素的内容前后强制换行
    'vue/no-multi-spaces': [
      'error',
      {
        ignoreProperties: false,
      },
    ], // 删除标签中不用于缩进的多个空格
    'vue/require-prop-types': 2, // prop必须声明类型
    'vue/v-bind-style': ['warn', 'shorthand'], // 动态绑定用缩写:
    'vue/v-on-style': ['warn', 'shorthand'], // 事件绑定用缩写@
    'vue/component-tags-order': [
      'error',
      {
        order: ['template', 'script', 'style'],
      },
    ], // 模板顺序

    // todo 根据env环境设置是否允许console和debugger
    'no-console': 0, // 禁用 console
    'no-debugger': 1, // 禁用 debugger
    'require-await': 2, // 禁止使用不带 await 表达式的 async 函数
    'constructor-super': 2, // 要求在构造函数中有 super() 的调用
    'handle-callback-err': [2, '^(err|error)$'], // 要求回调函数中有容错处理
    'new-cap': [
      2,
      {
        newIsCap: true,
        capIsNew: false,
      },
    ], // 要求构造函数首字母大写
    'no-caller': 2, // 禁用 arguments.caller 或 arguments.callee
    'no-eval': 2, // 禁用 eval()
    'no-extend-native': 2, // 禁止扩展原生类型
    'no-extra-bind': 2, // 禁止不必要的 .bind() 调用
    'no-extra-parens': [2, 'functions'], // 禁止不必要的括号
    'no-floating-decimal': 2, // 禁止数字字面量中使用前导和末尾小数点
    'no-implied-eval': 2, // 禁止使用类似 eval() 的方法
    'no-iterator': 2, // 禁用 __iterator__ 属性
    'no-label-var': 2, // 不允许标签与变量同名
    'no-labels': [
      2,
      {
        allowLoop: false,
        allowSwitch: false,
      },
    ], // 禁用标签语句
    'no-lone-blocks': 2, // 禁用不必要的嵌套块
    'no-multi-str': 2, // 禁止使用多行字符串
    'no-array-constructor': 2, // 禁用 Array 构造函数
    'no-new-object': 2, // 禁止使用new Object()
    'no-new-require': 2, // 禁止调用 require 时使用 new 操作符
    'no-new-wrappers': 2, // 禁止对 String，Number 和 Boolean 使用 new 操作符
    'no-octal-escape': 2, // 禁止在字符串中使用八进制转义序列
    'no-path-concat': 2, // 禁止对 __dirname 和 __filename 进行字符串连接
    'no-proto': 2, // 禁用__proto__, 在 ECMAScript 3.1 中已经被弃用, 使用 Object.getPrototypeOf 和 Object.setPrototypeOf 代替
    'no-return-assign': [2, 'except-parens'], // 禁止在 return 语句中使用赋值语句
    'no-self-compare': 2, // 禁止自身比较
    'no-sequences': 2, // 禁用逗号操作符
    'no-throw-literal': 2, // 禁止抛出异常字面量
    'no-unmodified-loop-condition': 2, // 禁用一成不变的循环条件
    'no-unneeded-ternary': [
      2,
      {
        defaultAssignment: false,
      },
    ], // 禁止可以在有更简单的可替代的表达式时使用三元操作符
    'no-useless-call': 2, // 禁止不必要的 .call() 和 .apply()
    'no-useless-computed-key': 2, // 禁止在对象中使用不必要的计算属性
    'no-useless-constructor': 2, // 禁用不必要的构造函数
    'no-useless-escape': 0, // 禁用不必要的转义字符
    'no-whitespace-before-property': 2, // 禁止属性前有空白
    'operator-linebreak': [
      2,
      'after',
      {
        overrides: {
          '?': 'before',
          ':': 'before',
        },
      },
    ], // 强制操作符使用一致的换行符风格,
  },
}

参考:

Eslint

eslint-plugin-vue