如何配置ESLint仅检查.js和.jsx文件（白名单方式）

直接在ESLint的配置文件中通过files字段定义白名单文件模式，就能让ESLint只扫描匹配的文件，完全跳过其他类型（比如.png、.less）的文件，不需要维护.eslintignore。以下是具体实现步骤：

1. 基础配置：全局指定要检查的文件 #

在你的ESLint配置文件（比如.eslintrc.js、.eslintrc.json等）中添加files字段，明确列出要检查的文件模式：

如果你用JavaScript格式的配置文件（.eslintrc.js） #

module.exports = {
  // 保留你原有的env、extends、rules等配置
  env: {
    browser: true,
    es2021: true
  },
  extends: ["eslint:recommended"],
  rules: {
    // 你的自定义规则
  },
  // 核心：指定白名单文件
  files: ["**/*.js", "**/*.jsx"]
};

如果你用JSON格式的配置文件（.eslintrc.json） #

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "rules": {},
  "files": ["**/*.js", "**/*.jsx"]
}

这里的**/*.js表示匹配所有目录下的.js文件，**/*.jsx同理匹配所有.jsx文件。

2. 进阶：针对特定文件配置差异化规则 #

如果需要给.jsx文件单独设置规则（比如React相关规则），可以结合overrides字段实现：

module.exports = {
  files: ["**/*.js", "**/*.jsx"],
  env: { browser: true, es2021: true },
  extends: ["eslint:recommended"],
  rules: {
    // 所有.js和.jsx通用的规则
    "no-unused-vars": "warn"
  },
  overrides: [
    {
      // 仅针对.jsx文件的规则
      files: ["**/*.jsx"],
      extends: ["plugin:react/recommended"],
      rules: {
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error"
      }
    }
  ]
};

3. 验证配置是否生效 #

运行ESLint时加上--debug参数，查看扫描的文件列表，确认只有.js和.jsx文件被处理：

eslint . --debug

在输出日志中，你会看到类似Processing /path/to/your/file.js的条目，而.png、.less等文件会被直接跳过。

这种方式比.eslintignore更精准，因为它是主动指定要检查的文件，而非被动排除不需要的文件，完全符合你的需求。

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