eslint从0配置到1（vue3）

1、安装

npm i -D eslint

npm i -D eslint-plugin-vue

npm i -D vite-plugin-eslint

2、 创建文件（根据自己的配置规则去增删）：.eslintrc.cjs

module.exports = {

  root: true,

  // 使 eslint 支持 node 与 ES6

  env: {

    browser: true,

    es2021: true,

    node: true

  },

  // 引入推荐的语法校验规则

  extends: [

    'plugin:vue/vue3-recommended', // https://eslint.vuejs.org/user-guide/#usage

    "eslint:recommended", // http://eslint.cn/docs/rules/

  ],

  // 解析器的详细配置

  parserOptions: {

    // 使用最新版 ES 语法

    ecmaVersion: 'latest',

    // 使用 ESLint TS 解析器

    // 使用 ES 模块化规范

    sourceType: 'module'

  },

  // 使用的插件

  // 自定义规则

  rules: {

    "vue/html-self-closing": 'off',

    "vue/max-attributes-per-line": [2, {

      "singleline": 10,

      "multiline": {

        "max": 1,

      }

    }],

    "vue/singleline-html-element-content-newline": "off",

    "vue/multiline-html-element-content-newline": "off",

    "vue/multi-word-component-names": "off", // 组件名称需采用驼峰命名

    "vue/component-definition-name-casing": "off",

    "vue/no-mutating-props": "off", // 有些组件去修改了如DragSelect\index.vue

    "vue/valid-attribute-name": "off", // 有些组件属性名不规范如AiTable.vue

    "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': 'off',

    'comma-spacing': [2, {

      'before': false,

      'after': true

    }],

    'comma-style': [2, 'last'],

    'constructor-super': 2,

    'curly': [2, 'multi-line'],

    'dot-location': [2, 'property'],

    'eol-last': 0,

    'eqeqeq': "off",

    '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': 'off',

    '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': 'off',

    'semi': 0,

    'semi-spacing': [2, {

      'before': false,

      'after': true

    }],

    'space-before-blocks': [2, 'always'],

    'space-before-function-paren': 0,

    '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/no-v-model-argument': 0,

    'vue/no-parsing-error': [2, {

      'x-invalid-end-tag': false

    }],

    "require-atomic-updates": "off"

  }

};

3、vite.config.js配置（这一步是关键）

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({

  plugins: [

    vue(),

    eslintPlugin({

      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']

    })

  ],

})