eslint 9 的 files 配置失效?

Question

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    files: [
      // "/assets/**/*.{js,mjs,cjs,ts,jsx,tsx}",
      // "/components/**/*.{js,mjs,cjs,ts,jsx,tsx}",
      // "/entrypoints/**/*.{js,mjs,cjs,ts,jsx,tsx}",
      // "/modules/**/*.{js,mjs,cjs,ts,jsx,tsx}",
      "/utils/**/*.{js,mjs,cjs,ts,jsx,tsx}",
      // "/*.ts",
    ]
  },
  {
    languageOptions: {
      globals: globals.browser,
    }
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
];

执行 nppx eslint,为什么总是对整个项目的文件都进行检测,files 配置好像没有效果?

Answer 1

在命令行中指定文件路径
直接在命令行中运行以下命令：

npx eslint "utils/**/*.{js,mjs,cjs,ts,jsx,tsx}"

这样可以避免任何配置文件或缓存问题的干扰

Answer 2

"/utils/**/*.{js,mjs,cjs,ts,jsx,tsx}",

这路径前面多加了一个 / 号，去掉就好了

"utils/**/*.{js,mjs,cjs,ts,jsx,tsx}",

---

参考文档：Configuration Files - ESLint，后面还有一个参考文档，可以直接往下拉。

文档中没有说明数组中各配置对象有合并的规则，但是可以级联。我理解 eslint 会对每个文件来匹配配置对象，如果能匹配上的配置对象，就依次进行应用配置属性（可以理解为合并）。为了理解这个问题，做了点实验：

// case1
export default [
    {
        languageOptions: { globals: globals.browser }
    },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    pluginReact.configs.flat.recommended,
    {
        files: [
            "utils/**/*.{js,mjs,cjs,ts,jsx,tsx}"
        ],
        rules: {
            semi: ["error", "always"]
        }
    },
];

在上面这个配置 (case1) 下，会只检查 utils 下的文件。

// case2
export default [
    {
        languageOptions: { globals: globals.browser }
    },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    pluginReact.configs.flat.recommended,
    {
        files: [
            "utils/**/*.{js,mjs,cjs,ts,jsx,tsx}"
        ],
    },
    {
        rules: {
            semi: ["error", "always"]
        }
    },
];

但在这个配置 (case2) 下，会检查所有目录下的文件。

两个配置文件的区别就在于 case1 中 files 和 rules 在同一个配置对象中，而 case2 中，两个配置分别在两个配置对象中。所以，case1 中 rules 会应用于 files 对应的文件；而 case2 中 rules 没有 files 约束，会应用于所有文件。

如果想知道如何合并配置对象，可以参考：Combine Configs - ESLint —— 我觉得这才是你想要的东西。

如果希望预置配置也应用于自己指定的文件范围，可能需要把这个范围合并配置进去，比如

const files = ["utils/**/*.{js,mjs,cjs,ts,jsx,tsx}"];

export default [
    {
        languageOptions: { globals: globals.browser }
    },
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    pluginReact.configs.flat.recommended,
    {
        rules: {
            semi: ["error", "always"]
        }
    },
].map(opt => ({ ...opt, files }));
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 把 files 配置进每一个配置对象里去