如何将自定义ESLint规则的旧JSON配置转为NX18+适配的Flat JS格式

之前项目通过extend属性引入自定义规则文件eslintrc-custom-rules.json配置ESLint，现在需要将该自定义规则文件转换为Flat格式的.js文件，以适配NX 18+自动生成的ESLint配置代码，具体实现步骤如下：

原项目ESLint配置 #

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@nx/typescript"],
      "rules": {}
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nx/javascript"],
      "rules": {}
    },
    {
      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
      "env": {
        "jest": true
      },
      "rules": {}
    }
  ],
  "extends": "./eslintrc-custom-rules.json"
}

原自定义规则配置文件eslintrc-custom-rules.json #

{
"overrides": [
    {
    "files": ["*.ts"],
    "rules": {
        "@typescript-eslint/member-ordering": "error",
        "@typescript-eslint/naming-convention": "error",
        "default-case": "error",
        "default-case-last": "error"
    },
    "extends": "plugin:prettier/recommended"
    },
    {
    "files": ["*.html"],
    "rules": {
        "@angular-eslint/template/attributes-order": ["error"],
        "@angular-eslint/template/no-duplicate-attributes": ["error"]
    },
    "extends": "plugin:prettier/recommended"
    }
]
}

NX 18+自动生成的ESLint配置代码 #

const nx = require('@nx/eslint-plugin');

module.exports = [
  ...nx.configs['flat/base'],
  ...nx.configs['flat/typescript'],
  ...nx.configs['flat/javascript'],
  {
    ignores: ['**/dist'],
  },
  {
    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
    rules: {},
  },
  ...nx.configs['flat/angular'],
  ...nx.configs['flat/angular-template'],
  {
    files: ['**/*.ts'],
    rules: {
      '@angular-eslint/directive-selector': [
        'error',
        {
          type: 'attribute',
          prefix: 'app',
          style: 'camelCase',
        },
      ],
      '@angular-eslint/component-selector': [
        'error',
        {
          type: 'element',
          prefix: 'app',
          style: 'kebab-case',
        },
      ],
    },
  },
  {
    files: ['**/*.html'],
    rules: {},
  },
];

转换及整合步骤 #

1. 创建Flat格式的自定义规则JS文件 #

新建eslint-custom-rules.js文件，将原JSON中的规则转换为Flat格式的配置数组：

// eslint-custom-rules.js
module.exports = [
  // 对应原TS文件规则
  {
    files: ['**/*.ts'],
    extends: ['plugin:prettier/recommended'],
    rules: {
      '@typescript-eslint/member-ordering': 'error',
      '@typescript-eslint/naming-convention': 'error',
      'default-case': 'error',
      'default-case-last': 'error'
    }
  },
  // 对应原HTML文件规则
  {
    files: ['**/*.html'],
    extends: ['plugin:prettier/recommended'],
    rules: {
      '@angular-eslint/template/attributes-order': ['error'],
      '@angular-eslint/template/no-duplicate-attributes': ['error']
    }
  }
];

2. 整合到NX 18+的ESLint配置中 #

修改NX自动生成的ESLint配置文件，引入并插入自定义规则数组：

const nx = require('@nx/eslint-plugin');
const customRules = require('./eslint-custom-rules'); // 引入自定义规则

module.exports = [
  ...nx.configs['flat/base'],
  ...nx.configs['flat/typescript'],
  ...nx.configs['flat/javascript'],
  {
    ignores: ['**/dist'],
  },
  {
    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
    rules: {
      // 保留原有的模块边界规则
      '@nx/enforce-module-boundaries': [
        'error',
        {
          'enforceBuildableLibDependency': true,
          'allow': [],
          'depConstraints': [
            {
              'sourceTag': '*',
              'onlyDependOnLibsWithTags': ['*']
            }
          ]
        }
      ]
    },
  },
  ...nx.configs['flat/angular'],
  ...nx.configs['flat/angular-template'],
  {
    files: ['**/*.ts'],
    rules: {
      '@angular-eslint/directive-selector': [
        'error',
        {
          type: 'attribute',
          prefix: 'app',
          style: 'camelCase',
        },
      ],
      '@angular-eslint/component-selector': [
        'error',
        {
          type: 'element',
          prefix: 'app',
          style: 'kebab-case',
        },
      ],
    },
  },
  // 插入自定义规则，确保优先级符合需求
  ...customRules,
  {
    files: ['**/*.html'],
    rules: {},
  },
];

3. 补充注意事项 #

• 确保已安装eslint-plugin-prettier及相关依赖，若未安装可执行：

  npm install eslint-plugin-prettier prettier --save-dev
  

• Flat格式配置中，extends属性需放在对应配置对象内；配置数组的顺序会影响规则优先级，可根据需要调整自定义规则的插入位置。

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