将旧的 eslint.json 转换为扁平 eslint.js 以用于自定义 eslint 规则

Question

之前我通过使用扩展属性以这种方式配置了我的项目：

    {
  "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"
    }
]
}

现在我想将“eslintrc-custom-rules.json”转换为平面 .js 文件，以适应 NX 版本 18+ 的自动生成代码

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'],
    // Override or add rules here
    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'],
    // Override or add rules here
    rules: {},
  },
];

我如何实现这一目标？ Bings Copilot 无法帮助我，没有现有的论坛问题，所以我现在在这里提问。

Answer 1

我找到了一个解决方案...只需添加此处列出的内容https://github.com/prettier/eslint-plugin-prettier?tab=readme-ov-file#configuration-new-eslintconfigjs

const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');
    
module.exports = [
  // Any other config imports go at the top
  eslintPluginPrettierRecommended,
];