如何将ESLint命令行的文件扩展名配置移至.eslintrc.js？

你当前使用的ESLint命令是eslint --ext .js,.ts,.vue ./，要把扩展名参数迁移到.eslintrc.js配置文件中，按以下步骤操作即可：

步骤1：添加files字段指定检查文件类型 #

在配置文件的顶层添加files数组，用glob模式明确指定需要ESLint检查的文件类型：

files: [
  '**/*.js',
  '**/*.ts',
  '**/*.vue'
],

这个配置的作用和命令行--ext参数完全一致，会告诉ESLint只扫描这些后缀的文件。

步骤2：保留extraFileExtensions配置 #

你的配置里parserOptions下已经有extraFileExtensions: ['.vue']，这个必须保留——它是给TypeScript解析器用的，用来识别.vue文件的语法结构，删除会导致vue文件解析失败。

修改后的完整配置文件 #

module.exports = {
  // 中断配置层级，当前文件为根配置
  root: true,

  // 指定需要检查的文件类型
  files: [
    '**/*.js',
    '**/*.ts',
    '**/*.vue'
  ],

  // 解析器配置
  parserOptions: {
    parser: require.resolve('@typescript-eslint/parser'),
    extraFileExtensions: ['.vue'],
  },

  env: {
    browser: true,
    es2021: true,
    node: true,
    'vue/setup-compiler-macros': true,
  },

  // 继承的规则集
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-essential',
    'prettier',
  ],

  plugins: [
    '@typescript-eslint',
    'vue',
  ],

  globals: {
    ga: 'readonly', // Google Analytics
    cordova: 'readonly',
    __statics: 'readonly',
    __QUASAR_SSR__: 'readonly',
    __QUASAR_SSR_SERVER__: 'readonly',
    __QUASAR_SSR_CLIENT__: 'readonly',
    __QUASAR_SSR_PWA__: 'readonly',
    process: 'readonly',
    Capacitor: 'readonly',
    chrome: 'readonly',
  },

  // 自定义规则
  rules: {
    'prefer-promise-reject-errors': 'off',

    quotes: ['warn', 'single', { avoidEscape: true }],

    '@typescript-eslint/explicit-function-return-type': 'off',

    '@typescript-eslint/no-var-requires': 'off',

    'no-unused-vars': 'off',

    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

验证效果 #

修改完成后，你只需运行eslint ./，就能和原来带--ext参数的命令实现完全相同的检查效果。

内容的提问来源于stack exchange，提问作者chovy