Nx中使用@nx/eslint:convert-to-flat-config生成器转eslint.config.mjs的问题

1. @nx/eslint:convert-to-flat-config生成器是否支持转换为.mjs格式？ #

截至Nx v18.x版本，该生成器默认仅支持生成CommonJS格式的eslint.config.js文件，没有直接生成.mjs格式的命令选项。不过可以先通过生成器生成CJS格式的配置文件，再手动修改为ES模块格式的.mjs文件。

2. 使用eslint.config.mjs替代eslint.config.js需要的配置更改 #

步骤1：修改文件后缀 #

将生成的eslint.config.js重命名为eslint.config.mjs。

步骤2：调整导出语法 #

把CommonJS的导出方式替换为ES模块的导出：

• 原CJS导出：module.exports = [/* 配置数组 */]
• 改为ES模块导出：export default [/* 配置数组 */]

步骤3：替换导入语法 #

将配置中所有require()调用替换为ES模块的import语句：

• 原CJS导入：const nxPlugin = require('@nx/eslint-plugin')
• 改为ES模块导入：import nxPlugin from '@nx/eslint-plugin'
  如果插件导出多个成员，使用解构导入：import { someConfig } from 'eslint-plugin-example'

步骤4：更新Nx项目配置 #

确保项目的project.json或根目录的nx.json中，ESLint的配置路径指向新的.mjs文件。例如在project.json的lint目标中：

{
  "targets": {
    "lint": {
      "executor": "@nx/eslint:lint",
      "options": {
        "lintConfig": "eslint.config.mjs"
      }
    }
  }
}

步骤5：验证兼容性 #

• 如果项目根目录的package.json中设置了"type": "commonjs"，无需额外修改，.mjs文件会被Node.js自动识别为ES模块。
• 如果设置了"type": "module"，则所有.js文件会被当作ES模块，但.mjs文件依然可以正常使用。

示例对比 #

原CJS格式（eslint.config.js）

module.exports = [
  require('@nx/eslint-plugin').configs.base,
  {
    files: ['*.ts', '*.tsx'],
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn'
    }
  }
];

修改后的ES模块格式（eslint.config.mjs）

import nxPlugin from '@nx/eslint-plugin';

export default [
  nxPlugin.configs.base,
  {
    files: ['*.ts', '*.tsx'],
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn'
    }
  }
];

步骤6：测试验证 #

运行nx lint <你的项目名称>命令，检查是否能正常执行lint，排查是否存在语法错误或导入问题。

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