Eslint代码规范

实现步骤

1、在项目的 package.json 文件中添加相关依赖（注意版本间有一定的关联性，这里适用于 vue2）

{
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.19",
    "@vue/cli-plugin-eslint": "^4.5.19",
    "@vue/eslint-config-prettier": "6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^7.2.0",
    "prettier": "^2.5.1",
  },
}

2、安装依赖

npm i

3、配置 ESLint 的规则

在项目的根目录中，创建 .eslintrc.js 文件，加入以下内容（相应的规则可以按照自己想要的效果进行修改）

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended', 'plugin:prettier/recommended'],
  // add your custom rules here
  // it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    // 模板每行属性的数量是否不超过定义的最大值,超过就换行
    'vue/max-attributes-per-line': [
      'warn',
      {
        singleline: 10,
        multiline: {
          max: 10,
          allowFirstLine: true,
        },
      },
    ],
    // 强制在单行元素的内容前后加换行符
    'vue/singleline-html-element-content-newline': 'off',
    // 该规则强制在多行元素的内容前后换行
    'vue/multiline-html-element-content-newline': 'off',
    // 该规则旨在为name属性的大小写强制使用样式，以保持一致性。
    'vue/name-property-casing': ['error', 'PascalCase'],
    // 该规则报告了所有v-html指令的使用，以减少将潜在不安全/未转义的html注入浏览器导致跨站点脚本攻击的风险。
    'vue/no-v-html': 'off',
    'vue/html-closing-bracket-newline': 'off',
    // 模板语法错误
    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
    // 将自关闭符号作为已配置的样式强制执行
    'vue/html-self-closing': 0,
    // 在对象中使用getter/setter
    'accessor-pairs': 2,
    // =>的前/后括号
    'arrow-spacing': [
      2,
      {
        before: true,
        after: true,
      },
    ],
    // 在循环内禁止`await`
    'block-spacing': [2, 'always'],
    // if while function 后面的{必须与if在同一行，java风格
    'brace-style': [
      2,
      '1tbs',
      {
        allowSingleLine: true,
      },
    ],
    // 强制驼峰法命名
    camelcase: [
      0,
      {
        properties: 'always',
      },
    ],
    // always-multiline：多行模式必须带逗号，单行模式不能带逗号 off->2
    'comma-dangle': ['off', 'never'],
    // 控制逗号前后的空格
    'comma-spacing': [
      2,
      {
        before: false,
        after: true,
      },
    ],
    // 控制逗号在行尾出现还是在行首出现
    'comma-style': [2, 'last'],
    // 强制在子类构造函数中用super()调用父类构造函数，TypeScrip的编译器也会提示
    'constructor-super': 2,
    // 强制所有控制语句使用一致的括号风格
    curly: [2, 'multi-line'],
    // object, '.' 号应与对象名在同一行
    'dot-location': [2, 'property'],
    // 文件末尾强制换行
    'eol-last': 2,
    // 使用 === 替代 ==
    eqeqeq: ['off'],
    // 生成器函数*的前后空格
    'generator-star-spacing': [
      2,
      {
        before: true,
        after: true,
      },
    ],
    // nodejs 处理错误
    'handle-callback-err': [2, '^(err|error)$'],
    // 缩进风格 off->2
    indent: [
      'error',
      2,
      {
        SwitchCase: 1,
      },
    ],
    'vue/html-indent': [
      'off',
      2,
      {
        SwitchCase: 1,
      },
    ],
    // JSX 属性中一致使用双引号或单引号
    'jsx-quotes': [2, 'prefer-double'],
    // 对象字面量中冒号的前后空格
    'key-spacing': [
      2,
      {
        beforeColon: false,
        afterColon: true,
      },
    ],
    // 在关键字前后强制使用一致的空格
    'keyword-spacing': [
      2,
      {
        before: true,
        after: true,
      },
    ],
    // 函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
    'new-cap': [
      2,
      {
        newIsCap: true,
        capIsNew: false,
      },
    ],
    // 在调用没有参数的构造函数时强制或禁止使用圆括号
    'new-parens': 2,
    // 不允许“数组”构造函数
    'no-array-constructor': 2,
    // 不允许使用“arguments.caller”或“arguments.callee”
    'no-caller': 2,
    // 不允许使用 "console"
    'no-console': 'off',
    // 禁止重新分配类成员
    'no-class-assign': 2,
    // 在条件表达式中禁止赋值操作符
    'no-cond-assign': 2,
    // 禁止对const变量重新赋值
    'no-const-assign': 2,
    // 禁止在正则表达式中使用控制字符
    'no-control-regex': 0,
    // 不允许删除变量 var
    'no-delete-var': 2,
    // 在“函数”定义中禁止重复参数
    'no-dupe-args': 2,
    // 禁止重复的类成员
    'no-dupe-class-members': 2,
    // 禁止在对象字面量中出现重复的键
    'no-dupe-keys': 2,
    // 禁止重复的大小写标签
    'no-duplicate-case': 2,
    // 禁止在正则表达式中使用空字符类
    'no-empty-character-class': 2,
    // 不允许空解构模式
    'no-empty-pattern': 2,
    // 禁止使用' eval()
    'no-eval': 2,
    // 禁止在' catch '子句中重新赋值异常
    'no-ex-assign': 2,
    // 禁止扩展本机类型
    'no-extend-native': 2,
    // 禁止不必要地调用' .bind() '
    'no-extra-bind': 2,
    // 禁止不必要的布尔类型转换
    'no-extra-boolean-cast': 2,
    // 禁止不必要的括号
    'no-extra-parens': [2, 'functions'],
    // 禁止跌落' case '语句
    'no-fallthrough': 2,
    // 在数字字面值中禁止前导或后导小数点
    'no-floating-decimal': 2,
    // 禁止对' function '声明重新赋值
    'no-func-assign': 2,
    // 禁止使用' eval() '类方法
    'no-implied-eval': 2,
    // 禁止在嵌套块中声明变量或'函数'
    'no-inner-declarations': [2, 'functions'],
    // 禁止在' RegExp '构造函数中使用无效的正则表达式字符串
    'no-invalid-regexp': 2,
    // 不允许不规则的空白
    'no-irregular-whitespace': 2,
    // 禁止使用' __iterator__ '属性
    'no-iterator': 2,
    // 禁止与变量共享名称的标签
    'no-label-var': 2,
    // 不允许标记语句
    'no-labels': [
      2,
      {
        allowLoop: false,
        allowSwitch: false,
      },
    ],
    // 禁止不必要的嵌套块
    'no-lone-blocks': 2,
    // 禁止使用空格和制表符混合进行缩进
    'no-mixed-spaces-and-tabs': 2,
    // 不允许多行空格
    'no-multi-spaces': 2,
    // 不允许多行字符串
    'no-multi-str': 2,
    // 禁止多个空行
    'no-multiple-empty-lines': [
      2,
      {
        max: 1,
      },
    ],
    // 禁止赋值给本机对象或只读全局变量+
    'no-global-assign': 2,
    // 禁止对关系操作符的左操作数取反+
    'no-unsafe-negation': 2,
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    // 不允许对象的构造函数
    'no-new-object': 2,
    'no-new-require': 2,
    // 禁止“Symbol”对象使用“new”操作符
    'no-new-symbol': 2,
    // 禁止使用' String '、' Number '和' Boolean '对象的' new '操作符
    'no-new-wrappers': 2,
    // 禁止调用全局对象属性作为函数
    'no-obj-calls': 2,
    // 不允许八进制文字
    'no-octal': 2,
    // 禁止在字符串字面量中使用八进制转义序列
    'no-octal-escape': 2,
    'no-path-concat': 2,
    // 禁止使用' __proto__ '属性
    'no-proto': 2,
    // 不允许变量redeclaration
    'no-redeclare': 2,
    // 禁止在正则表达式中使用多个空格
    'no-regex-spaces': 2,
    // 禁止在' return '语句中使用赋值操作符
    'no-return-assign': [2, 'except-parens'],
    // 禁止两边完全相同的作业
    'no-self-assign': 2,
    // 禁止两边完全相同的比较
    'no-self-compare': 2,
    // 不允许逗号操作符
    'no-sequences': 2,
    // 禁止标识符隐藏受限制的名称
    'no-shadow-restricted-names': 2,
    // 要求或不允许函数标识符与其调用之间有空格+
    'func-call-spacing': 2,
    'no-spaced-func': 2,
    // 不允许稀疏阵列
    'no-sparse-arrays': 2,
    // 在构造函数中调用super()之前禁止使用' this ' / ' super '
    'no-this-before-super': 2,
    // 禁止将文字作为异常抛出
    'no-throw-literal': 2,
    // 禁止行尾有空格
    'no-trailing-spaces': 2,
    // 禁止使用未声明的变量，除非在' /*global */ '注释中提到
    'no-undef': 2,
    // 禁止将变量初始化为“undefined”
    'no-undef-init': 2,
    // 禁止混乱的多行表达式
    'no-unexpected-multiline': 2,
    // 禁止未修改的循环条件
    'no-unmodified-loop-condition': 2,
    // 当存在更简单的选择时，禁止使用三元运算符
    'no-unneeded-ternary': [
      2,
      {
        defaultAssignment: false,
      },
    ],
    // 禁止在' return '， ' throw '， ' continue '和' break '语句之后出现不可到达的代码
    'no-unreachable': 2,
    // 禁止在' finally '块中使用控制流语句
    'no-unsafe-finally': 2,
    // 不允许未使用的变量
    'no-unused-vars': [
      2,
      {
        vars: 'all',
        args: 'none',
      },
    ],
    // 禁止不必要地调用' .call() '和' .apply()
    'no-useless-call': 2,
    // 禁止在对象和类中使用不必要的计算属性键
    'no-useless-computed-key': 2,
    // 禁止不必要的构造函数
    'no-useless-constructor': 2,
    // 禁止不必要的转义字符
    'no-useless-escape': 0,
    // 属性前不允许有空格
    'no-whitespace-before-property': 2,
    // 不允许`with`语句
    'no-with': 2,
    // 强制在函数中同时声明或单独声明变量
    'one-var': [
      2,
      {
        initialized: 'never',
      },
    ],
    // 强制操作符使用一致的换行样式
    'operator-linebreak': [
      2,
      'after',
      {
        overrides: {
          '?': 'before',
          ':': 'before',
        },
      },
    ],
    // 要求或禁止在块内填充
    'padded-blocks': [2, 'never'],
    // 强制一致使用反引号、双引号或单引号
    quotes: [
      2,
      'single',
      {
        avoidEscape: true,
        allowTemplateLiterals: true,
      },
    ],
    // 要求或不允许用分号代替ASI off->2
    semi: ['off', 'never'],
    // 强制分号前后有一致的空格
    'semi-spacing': [
      2,
      {
        before: false,
        after: true,
      },
    ],
    // 强制在块之前有一致的空格
    'space-before-blocks': [2, 'always'],
    // 强制在“函数”定义开括号前有一致的空格
    'space-before-function-paren': [0, 'never'],
    // 在圆括号内强制使用一致的空格
    'space-in-parens': [2, 'never'],
    // 要求中缀操作符周围有空格
    'space-infix-ops': 2,
    // 强制一元运算符前后有一致的空格
    'space-unary-ops': [
      2,
      {
        words: true,
        nonwords: false,
      },
    ],
    // 空格注释强制在注释中的' // '或' /* '后面有一致的空格
    'spaced-comment': [
      2,
      'always',
      {
        markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','],
      },
    ],
    // 要求或禁止模板字符串内嵌表达式周围有空格
    'template-curly-spacing': [2, 'never'],
    // 检查' NaN '时要求调用' isNaN() '
    'use-isnan': 2,
    // 强制将' typeof '表达式与有效字符串进行比较
    'valid-typeof': 2,
    // 要求立即调用' function '时使用圆括号
    'wrap-iife': [2, 'any'],
    // 要求或禁止' yield* '表达式中的' * '周围有空格
    'yield-star-spacing': [2, 'both'],
    // 要求或不允许“尤达”条件
    yoda: [2, 'never'],
    // 对于声明后从未重新赋值的变量，要求使用' const '声明
    'prefer-const': 2,
    // 禁止使用'debugger'
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    // 在大括号内强制使用一致的空格
    'object-curly-spacing': [
      2,
      'always',
      {
        objectsInObjects: true,
      },
    ],
    // 在数组括号内强制使用一致的空格
    'array-bracket-spacing': [2, 'never'],
    'vue/no-lone-template': [
      'off',
      {
        ignoreAccessible: true,
      },
    ],
  },
};

4、配置 ESLint 忽略文件（可选）

在项目的根目录中，创建 .eslintignore 文件，把想要忽略格式化的文件路径加入进去（以下是示例）

src/assets
src/lib
src/icons
public
dist
node_modules
vab-icons

5、配置 Prettier 规则

在项目的根目录中，创建 .prettierrc.js 文件，加入以下内容（由于 ESLint 和 Prettier 的代码格式化规则不太一样，所以需要保持同步）

module.exports = {
  // 指定自动换行的行长，默认值80。
  printWidth: 150,
  //开启 eslint 支持
  eslintIntegration: true,
  //使用单引号
  singleQuote: true,
  //结尾加分号
  semi: true,
};

6、安装 VSCode 插件

• ESLint
• Prettier

7、推荐团队成员安装相关插件（可选）

在项目的根目录中，创建 .vscode 文件夹，在 .vscode 里面创建 extensions.json 文件，加入想要推荐的插件

{
  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

8、设置 VSCode 保存时自动格式化（避免多种格式化插件冲突）

在项目的根目录中，创建 .vscode 文件夹，在 .vscode 里面创建 settings.json 文件，加入以下内容

{
  // 以下程序用于格式化Vue项目，其他项目可以根据原理一通百通。
  // 设置保存时格式化。只用于用于格式化css/less程序
  "editor.formatOnSave": true,
  // 关闭js/ts的默认format,统一用eslint进行格式化（tslint已经不维护了，所以转eslint吧）
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  // 关闭vetur的js/ts/html的formatter。html用eslint-plugin-vue格式化。
  // js/ts程序用eslint，防止vetur中的prettier与eslint格式化冲突
  "vetur.format.defaultFormatter.html": "none",
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none",
  // 开启eslint自动修复js/ts/jsx/tsx功能
  "eslint.format.enable": true,
  // 设置js的formatter为eslint
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // jsonc是有注释的json
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.codeActionsOnSave.mode": "problems",
  "eslint.validate": ["typescript", "javascript", "javascriptreact", "typescriptreact"],
  // 将json文件识别为jsonc格式
  "files.associations": {
    "*.json": "jsonc"
  },
  "editor.cursorBlinking": "smooth",
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
}