超大只番薯

安装

npm install eslint --save-dev

当前版本: "eslint": "^8.42.0"

初始化配置文件

使用npx eslint --init初始化配置文件

若之前没有使用过该命令, 会提示@eslint/create-config@0.4.4, 意思是需要安装该包

如下图:

初始化配置文件

此时我们回复y即可, 会自动安装该包

然后会有以下对话:

img.png

三个选择分别是:

  1. 只检查语法
  2. 检查语法和代码风格
  3. 检查语法和代码风格, 并且在保存时自动修复

我们选择第二个, 也可以选择三,根据需要选择

然后会有以下对话:

img.png

意思是, 你的项目中是否使用了ES Module或CommonJS或None of these

我们选择第一个, 因为我们的项目中使用了ES Module

然后会有以下对话:

img.png

意思是, 你的项目中是否使用了React或Vue或None of these

根据需要选择就行, 我们当然选择Vue了

然后会有以下对话:

img.png

询问你的项目中是否使用了TypeScript

我们选择Yes, 根据实际情况选择

然后会有以下对话:

img.png

选择在浏览器使用还是在Node中使用

我们选择Browser

然后会有以下对话:

img.png

生成的配置文件格式

我们选择js类型的

然后会有以下对话:

img.png

询问你是否需要安装一些插件

我们选择Yes

然后会有以下对话:

img.png

询问你是否使用npm或yarn或None of these

我们选择npm, 根据实际情况选择

如果过程中有报错, 可以尝试使用yarn安装, 或者重新执行npx eslint --init

Vue配置文件

下面主要介绍Vue3+TS的配置文件

vue3环境代码校验插件

  1. 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查

"eslint-config-prettier": "^8.6.0" "eslint-plugin-import": "^2.27.5" "eslint-plugin-node": "^11.1.0"

  1. 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低

"eslint-plugin-prettier": "^4.2.1"

  1. vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南

"eslint-plugin-vue": "^9.9.0"

  1. 该解析器允许使用Eslint校验所有babel code

"@babel/eslint-parser": "^7.19.1"

批量安装:

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

修改.eslintrc.cjs配置文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  /* 指定如何解析语法 */
  parser: 'vue-eslint-parser',
  /** 优先级低于 parse 的语法解析配置 */
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  /* 继承已有的规则 */
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', '@typescript-eslint'],
  /*
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
   */
  rules: {
    // eslint（https://eslint.bootcss.com/docs/rules/）
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的转义字符

    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
    '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
    '@typescript-eslint/semi': 'off',

    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
  },
}

Vue2+js的配置文件

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }],
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline":"off",
    "vue/name-property-casing": ["error", "PascalCase"],
    "vue/no-v-html": "off",
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }],
    'block-spacing': [2, 'always'],
    'brace-style': [2, '1tbs', {
      'allowSingleLine': true
    }],
    'camelcase': [0, {
      'properties': 'always'
    }],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [2, {
      'before': false,
      'after': true
    }],
    'comma-style': [2, 'last'],
    'constructor-super': 2,
    'curly': [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 2,
    'eqeqeq': ["error", "always", {"null": "ignore"}],
    'generator-star-spacing': [2, {
      'before': true,
      'after': true
    }],
    'handle-callback-err': [2, '^(err|error)$'],
    'indent': [2, 2, {
      'SwitchCase': 1
    }],
    'jsx-quotes': [2, 'prefer-single'],
    'key-spacing': [2, {
      'beforeColon': false,
      'afterColon': true
    }],
    'keyword-spacing': [2, {
      'before': true,
      'after': true
    }],
    'new-cap': [2, {
      'newIsCap': true,
      'capIsNew': false
    }],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-caller': 2,
    'no-console': 'off',
    'no-class-assign': 2,
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-control-regex': 0,
    '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,
    'no-eval': 2,
    'no-ex-assign': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-parens': [2, 'functions'],
    'no-fallthrough': 2,
    'no-floating-decimal': 2,
    'no-func-assign': 2,
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-invalid-regexp': 2,
    'no-irregular-whitespace': 2,
    '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-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-symbol': 2,
    'no-new-wrappers': 2,
    'no-obj-calls': 2,
    'no-octal': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-redeclare': 2,
    'no-regex-spaces': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-assign': 2,
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,
    'no-sparse-arrays': 2,
    'no-this-before-super': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef': 2,
    'no-undef-init': 2,
    'no-unexpected-multiline': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [2, {
      'defaultAssignment': false
    }],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
    'no-unused-vars': [2, {
      'vars': 'all',
      'args': 'none'
    }],
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-useless-escape': 0,
    'no-whitespace-before-property': 2,
    '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
    }],
    'semi': [2, 'never'],
    'semi-spacing': [2, {
      'before': false,
      'after': true
    }],
    'space-before-blocks': [2, 'always'],
    'space-before-function-paren': [2, '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'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    'yoda': [2, 'never'],
    'prefer-const': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false
    }],
    'array-bracket-spacing': [2, 'never']
  }
}

相关依赖版本如下:

"@vue/cli-plugin-eslint": "4.4.4",
"babel-eslint": "10.1.0",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",

添加忽略文件

项目根目录下添加.eslintignore文件

build/*.js
src/assets
public
dist

添加脚本

在package.json中添加脚本

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix",
}

React + TS配置文件

.eslintrc.cjs

module.exports = {
  root: true,
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaVersion: 2020,
    ecmaFeatures: {
      legacyDecorators: true
    }
  },

  env: {
    node: true,
    browser: true,
    jest: true
  },

  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],

  rules: {
    // 取消末尾分号 -- Cancellation tail sign
    semi: 'off',
    // 引号为单引号 -- Single quotes
    quotes: ['error', 'single'],
    // 缩进为2个空格 但是jsx不限制 -- Indentation is 2 spaces but jsx is not limited
    indent: ['error', 2, { SwitchCase: 1, ignoredNodes: ['JSXElement'] }],
    // 对象字面量的键值空格风格 -- Object literal key value space style
    'key-spacing': ['error', { beforeColon: false, afterColon: true }],
    // 在对象字面量中是否添加空格 -- Whether to add spaces in object literals
    'object-curly-spacing': ['error', 'always'],
    //End force no semicolon
    '@typescript-eslint/semi': ['error', 'never'],
    // 对象最后一个不要逗号 -- Object last no comma
    'comma-dangle': ['error', 'never'],
    // 允许使用any类型 -- Allow use any type
    '@typescript-eslint/no-explicit-any': 'off',
    // 允许使用@ts-ignore注释 -- Allow use @ts-ignore comment
    '@typescript-eslint/ban-ts-comment': 'off',
    // 大括号风格 -- Brace style
    'brace-style': ['error', '1tbs', { allowSingleLine: true }],
    // 取消未使用变量的警告 -- Cancellation of warning for unused variables
    '@typescript-eslint/no-unused-vars': 'off'
  }
}
Last Updated:
Contributors: huangdingxin, 黄定鑫