如何在Visual Studio 2022中使自定义ESLint配置生效？

核心原因 #

ESLint 9.x 默认启用扁平配置系统，只会加载根目录下的eslint.config.js，完全忽略传统的.eslintrc.cjs和package.json中的eslintConfig配置项，这就是你遇到配置不生效、移除扁平配置后无检测结果的根本原因。

具体解决步骤 #

1. 迁移全局变量配置到eslint.config.js #

直接在扁平配置文件中定义全局变量，示例如下：

// eslint.config.js
export default [
  {
    files: ["**/*.js", "**/*.cjs"], // 指定要检测的文件范围
    languageOptions: {
      globals: {
        isObject: "readonly", // 定义全局变量，"readonly"表示只读，"writable"表示可写
        // 其他全局变量可在此添加
      }
    }
  }
];

2. 兼容旧配置文件的方案（可选） #

如果不想完全迁移到扁平配置，可安装@eslint/eslintrc包启用旧配置支持：

npm install @eslint/eslintrc --save-dev

然后在eslint.config.js中导入旧配置：

// eslint.config.js
import { FlatCompat } from "@eslint/eslintrc";
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: "eslint:recommended"
});

export default [
  ...compat.config({ extends: "./.eslintrc.cjs" }),
  // 可在此添加额外扁平配置规则
];

这样ESLint会同时加载.eslintrc.cjs中的全局变量等配置。

3. 验证配置生效 #

运行ESLint检测命令，确认全局变量的错误提示消失：

npx eslint .

额外注意事项 #

• 如果项目使用CommonJS规范，可将eslint.config.js改为eslint.config.cjs，并使用CommonJS语法导出：

  // eslint.config.cjs
  module.exports = [
    {
      files: ["**/*.js", "**/*.cjs"],
      languageOptions: {
        globals: {
          isObject: "readonly"
        }
      }
    }
  ];
  

• 建议移除无效的.eslintrc.cjs和package.json中的eslintConfig，避免配置混淆。

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