vue-cli 中 ESLint 配置

1. eslint 中的规则配置文件名称

规则配置	说明
xxx/base	Settings and rules to enable correct ESLint parsing.
xxx/essential	xxx/base, plus rules to prevent errors or unintended behavior.
xxx/strongly-recommended	xxx/essential, plus rules to considerably improve code readability and/or dev experience.
xxx/recommended	xxx/strongly-recommended, plus rules to enforce subjective community defaults to ensure consistency.

2. vue2 + TS

.eslintrc.js:

const { resolve } = require('path');

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  settings: {
    // #region 解决 “.ts 文件 import/extensions import/no-unresolved” 报错的问题
    // 参考：https://qa.1r1g.com/sf/ask/4556640931/
    // 'import/extensions': ['.js', '.jsx', '.mjs', '.ts', '.tsx'],
    'import/resolver': {
      webpack: {
        config: {
          resolve: {
            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],

            // 解决 “.vue 文件 @ 不识别” 报错的问题
            alias: {
              '@': resolve('./src'),
            },
          },
        },
      },
    },
    // #endregion
  },

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

    'vue/multi-word-component-names': 'warn',
    'max-len': 'off',

    // #region 解决 ts 中使用枚举时， no-shadow 报错的问题
    'no-shadow': 'off',
    '@typescript-eslint/no-shadow': ['error'],
    // #endregion

  },
};

3. vue3 + TS 配置

2024年04月13日 更新

const { resolve } = require('path');

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    '@vue/airbnb',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  settings: {
    // #region 解决 “.ts 文件 import/extensions import/no-unresolved” 报错的问题
    // 参考：https://qa.1r1g.com/sf/ask/4556640931/
    // 'import/extensions': ['.js', '.jsx', '.mjs', '.ts', '.tsx'],
    'import/resolver': {
      webpack: {
        config: {
          resolve: {
            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],

            // 解决 “.vue 文件 @ 不识别” 报错的问题
            alias: {
              '@': resolve('./src'),
            },
          },
        },
      },
    },
    // #endregion
  },
  rules: {
    'no-console': isProd ? 'warn' : 'off',
    'no-debugger': isProd ? 'warn' : 'off',

    // #region 解决 ts 中使用枚举时， no-shadow 报错的问题
    'no-shadow': 'off',
    '@typescript-eslint/no-shadow': ['error'],
    // #endregion

    'max-len': 'off',
    'no-use-before-define': 'off',
    'vuejs-accessibility/click-events-have-key-events': 'off',
    camelcase: 'warn',
    'import/prefer-default-export': 'off',
    'vuejs-accessibility/form-control-has-label': 'off',
    'vue/multi-word-component-names': 'off',
    'vue/no-v-model-argument': 'off',
    'vue/no-multiple-template-root': 'off',
    'linebreak-style': 'off',
    'vuejs-accessibility/no-autofocus': 'off',
    '@typescript-eslint/no-explicit-any': 'warn',
  },
};

4. 参考

• https://eslint.vuejs.org/user-guide/#usage (opens new window)