vue3+ts项目：.eslintrc.js

一、背景

记录eslintrc.js的配置，方便日后回顾：

二、配置文件包括：

package.json、.eslintrc.js

三、常见配置项：

root：true
ESLint 自动在要检测的文件目录里寻找配置文件，紧接着是父级目录，一直到文件系统的根目录（除非指定 root: true）。当你想对一个项目的不同部分的使用不同配置，或当你希望别人能够直接使用 ESLint，而无需记住要在配置文件中传递什么，这种方式就很有用。
env ：指定环境。
Globals：脚本在执行期间访问的额外的全局变量。
每个环境都有自己预定义的全局变量，可以同时指定多个环境，不矛盾。
parser：指定解析器。
plugins：配置插件。
rules：配置规则。
processor：指定处理器。
settings：添加共享设置。

四、一般规则：

rules: {
    "规则名": [规则值, 规则配置]
}

五、规则值：

"off"或者0    //关闭规则
"warn"或者1    //作为警告（不影响退出代码）
"error"或者2    //作为一个错误（退出代码触发时为1）

六、禁用规则

6.1、文件禁用规则

/* eslint-disable */
// 放在文件顶部
console.log('err');

6.2、针对下一行禁用：

// eslint-disable-next-line
console.log('err');

七、package.json

"gitHooks": {
   "pre-commit": "lint-staged"
 },
 "lint-staged": {
   "*.ts": [
     "vue-cli-service lint",
     "git add"
   ],
   "*.vue": [
     "vue-cli-service lint",
     "git add"
   ]
}

八、 .eslintrc.js（本人项目使用供参考）

module.exports = {
    root: true,
    env: {
      node: true
    },
    extends: [
      'plugin:vue/essential',
      '@vue/typescript/recommended'
    ],
    parserOptions: {
      ecmaVersion: 2020
    },
    rules: {
      '@typescript-eslint/ban-types': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/member-delimiter-style': ['error',
        {
          multiline: {
            delimiter: 'none'
          },
          singleline: {
            delimiter: 'comma'
          }
        }],
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/no-var-requires': 'off',
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'space-before-function-paren': ['error', 'never'],
      'vue/array-bracket-spacing': 'error',
      'vue/arrow-spacing': 'error',
      'vue/block-spacing': 'error',
      'vue/brace-style': 'error',
      'vue/camelcase': 'error',
      'vue/comma-dangle': 'error',
      'vue/component-name-in-template-casing': ['error', 'kebab-case'],
      'vue/eqeqeq': 'error',
      'vue/key-spacing': 'error',
      'vue/match-component-file-name': 'error',
      'vue/object-curly-spacing': 'error'
    },
    overrides: [
      {
        files: [
          '**/__tests__/*.{j,t}s?(x)',
          '**/tests/unit/**/*.spec.{j,t}s?(x)'
        ],
        env: {
          jest: true
        }
      }
    ]
  }

九、欢迎交流指正

十、参考链接：

(15条消息) Vue中ESlint配置文件eslintrc.js文件详解_大雄-dx的博客-CSDN博客_eslintrc.js配置

(15条消息) 【ESLint】配置 ESLint_少莫千华-CSDN博客_eslint overrides

vue3+ts项目：.eslintrc.js

猜你喜欢