Converting old eslint.json to flat eslint.js for custom eslint rules

Previously I got my projects configured this way by using the extend attribute:

{
"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": ["pluginnx/typescript"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"extends": ["pluginnx/javascript"],
"rules": {}
},
{
"files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
"env": {
"jest": true
},
"rules": {}
}
],
"extends": "./eslintrc-custom-rules.json"
}


my eslintrc-custom-rules.json looked like this:

{
"overrides": [
{
"files": ["*.ts"],
"rules": {
"@typescript-eslint/member-ordering": "error",

"@typescript-eslint/naming-convention": "error",

"default-case": "error",
"default-case-last": "error"
},
"extends": "pluginrettier/recommended"
},
{
"files": ["*.html"],
"rules": {
"@angular-eslint/template/attributes-order": ["error"],

"@angular-eslint/template/no-duplicate-attributes": ["error"]

},
"extends": "pluginrettier/recommended"
}
]
}


Now I want to convert that "eslintrc-custom-rules.json" into a flat .js file in order to fit into this auto generated code of NX version 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: {},
},
];


How do I achieve that? Bings Copilot can not help me, there are no existing forum questions, so I'm asking here now.

Continue reading...