Task/migrate ESLint configuration to flat config format without FlatCompat (#7938)

* Migrate ESLint configuration to flat config format without FlatCompat

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the get quotes functionality of the _Manual_ service
+- Migrated the _ESLint_ configuration to the flat config format without `FlatCompat`
 - Upgraded `chartjs-chart-treemap` from version `4.2.0` to `4.2.2`
 
 ### Fixed

apps/client/eslint.config.cjs

@@ -1,6 +1,6 @@
 const baseConfig = require('../../eslint.config.cjs');
 const angularEslintPlugin = require('@angular-eslint/eslint-plugin');
-const typescriptEslintPlugin = require('@typescript-eslint/eslint-plugin');
+const typescriptEslintPlugin = require('typescript-eslint').plugin;
 
 module.exports = [
   {

eslint.config.cjs

@@ -1,12 +1,7 @@
-const { FlatCompat } = require('@eslint/eslintrc');
-const js = require('@eslint/js');
 const nxEslintPlugin = require('@nx/eslint-plugin');
+const importPlugin = require('eslint-plugin-import');
 const storybook = require('eslint-plugin-storybook');
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended
-});
+const typescriptEslint = require('typescript-eslint');
 
 module.exports = [
   {
@@ -35,41 +30,16 @@ module.exports = [
       'no-extra-semi': 'off'
     }
   },
-  ...compat
-    .config({
-      extends: ['plugin:@nx/typescript']
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts', '**/*.tsx', '**/*.cts', '**/*.mts'],
-      rules: {
-        ...config.rules
-      }
-    })),
-  ...compat
-    .config({
-      extends: ['plugin:@nx/javascript']
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.js', '**/*.jsx', '**/*.cjs', '**/*.mjs'],
-      rules: {
-        ...config.rules
-      }
-    })),
-  ...compat
-    .config({
-      plugins: ['eslint-plugin-import', '@typescript-eslint'],
-      extends: [
-        'plugin:@typescript-eslint/recommended-type-checked',
-        'plugin:@typescript-eslint/stylistic-type-checked'
-      ]
-    })
-    .map((config) => ({
-      ...config,
+  ...nxEslintPlugin.configs['flat/typescript'],
+  ...nxEslintPlugin.configs['flat/javascript'],
+  ...typescriptEslint.config({
     files: ['**/*.ts'],
+    plugins: { import: importPlugin },
+    extends: [
+      typescriptEslint.configs.recommendedTypeChecked,
+      typescriptEslint.configs.stylisticTypeChecked
+    ],
     rules: {
-        ...config.rules,
       '@typescript-eslint/consistent-indexed-object-style': 'off',
       '@typescript-eslint/dot-notation': 'off',
       '@typescript-eslint/explicit-member-accessibility': [
@@ -190,5 +160,5 @@ module.exports = [
       // and can be remove once solved
       '@typescript-eslint/prefer-nullish-coalescing': 'warn' // TODO: Requires strictNullChecks: true
     }
-    }))
+  })
 ];

libs/ui/eslint.config.cjs

@@ -2,7 +2,7 @@ const baseConfig = require('../../eslint.config.cjs');
 const angularEslintPlugin = require('@angular-eslint/eslint-plugin');
 const angularTemplateEslintPlugin = require('@angular-eslint/eslint-plugin-template');
 const angularTemplateParser = require('@angular-eslint/template-parser');
-const typescriptEslintPlugin = require('@typescript-eslint/eslint-plugin');
+const typescriptEslintPlugin = require('typescript-eslint').plugin;
 
 module.exports = [
   {

package-lock.json

@@ -122,7 +122,6 @@
         "@angular/language-service": "22.1.2",
         "@angular/localize": "22.1.2",
         "@angular/pwa": "22.1.4",
-        "@eslint/eslintrc": "3.3.1",
         "@eslint/js": "9.35.0",
         "@nestjs/schematics": "11.1.0",
         "@nestjs/testing": "11.2.3",
@@ -177,6 +176,7 @@
         "ts-node": "10.9.2",
         "tslib": "2.8.1",
         "typescript": "6.0.3",
+        "typescript-eslint": "8.67.0",
         "webpack-cli": "7.1.0"
       },
       "engines": {
@@ -34933,6 +34933,30 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.67.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.67.0.tgz",
+      "integrity": "sha512-S2udFs8tCKEKffuJ4TB1idGUZiXdCPGi3IPBGWXarbLQ5UPXORV8QEVzJ4gCRduURMb5EkpNCdjbk0eDIuI8Yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.67.0",
+        "@typescript-eslint/parser": "8.67.0",
+        "@typescript-eslint/typescript-estree": "8.67.0",
+        "@typescript-eslint/utils": "8.67.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
     "node_modules/uglify-js": {
       "version": "3.19.3",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",

package.json

@@ -166,7 +166,6 @@
     "@angular/language-service": "22.1.2",
     "@angular/localize": "22.1.2",
     "@angular/pwa": "22.1.4",
-    "@eslint/eslintrc": "3.3.1",
     "@eslint/js": "9.35.0",
     "@nestjs/schematics": "11.1.0",
     "@nestjs/testing": "11.2.3",
@@ -221,6 +220,7 @@
     "ts-node": "10.9.2",
     "tslib": "2.8.1",
     "typescript": "6.0.3",
+    "typescript-eslint": "8.67.0",
     "webpack-cli": "7.1.0"
   },
   "engines": {