feat: update eslint to v9

Author: nzbin

.eslintrc.json

@@ -33,11 +33,26 @@
               "zone.js/testing"
             ]
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/code-editor/**/*.ts",
+              "projects/code-editor/**/*.html"
+            ],
+            "eslintConfig": "projects/code-editor/eslint.config.js"
+          }
         }
       }
     },
     "dev-app": {
       "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "root": "projects/dev-app",
       "sourceRoot": "projects/dev-app/src",
       "prefix": "app",
@@ -125,9 +140,10 @@
           "builder": "@angular-eslint/builder:lint",
           "options": {
             "lintFilePatterns": [
-              "projects/dev-app/src/**/*.ts",
-              "projects/dev-app/src/**/*.html"
-            ]
+              "projects/dev-app/**/*.ts",
+              "projects/dev-app/**/*.html"
+            ],
+            "eslintConfig": "projects/dev-app/eslint.config.js"
           }
         },
         "deploy": {
@@ -140,12 +156,6 @@
       }
     }
   },
-  "schematics": {
-    "@schematics/angular:component": {
-      "style": "scss",
-      "skipTests": true
-    }
-  },
   "cli": {
     "analytics": false
   }

angular.json

@@ -0,0 +1,45 @@
+// @ts-check
+const eslint = require('@eslint/js');
+const tseslint = require('typescript-eslint');
+const angular = require('angular-eslint');
+
+module.exports = tseslint.config(
+  {
+    files: ['**/*.ts'],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      'max-len': [
+        'warn',
+        {
+          code: 100,
+          ignoreComments: true,
+          ignoreStrings: true,
+          ignoreTemplateLiterals: true,
+        },
+      ],
+      'object-shorthand': ['warn', 'always', { avoidQuotes: true }],
+      'quote-props': ['warn', 'consistent-as-needed'],
+      'quotes': ['warn', 'single', { allowTemplateLiterals: true }],
+      'semi': ['warn', 'always'],
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-inferrable-types': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@angular-eslint/no-empty-lifecycle-method': 'off',
+      '@angular-eslint/no-output-native': 'off',
+    },
+  },
+  {
+    files: ['**/*.html'],
+    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
+    rules: {
+      '@angular-eslint/template/prefer-self-closing-tags': 'warn',
+    },
+  }
+);

eslint.config.js

@@ -11,8 +11,7 @@
     "build": "ng build dev-app --base-href=/code-editor/",
     "watch": "ng build dev-app --watch --configuration development",
     "test": "ng test dev-app",
-    "lint": "npm run lint:ts && npm run lint:scss",
-    "lint:ts": "eslint \"**/*.ts\" --fix",
+    "lint": "ng lint --fix && npm run lint:scss",
     "lint:scss": "stylelint \"**/*.scss\" --fix",
     "build:lib": "ng build code-editor",
     "postbuild:lib": "cp README.md dist/code-editor",
@@ -46,22 +45,16 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.2.8",
-    "@angular-eslint/builder": "^18.3.1",
-    "@angular-eslint/eslint-plugin": "^18.3.1",
-    "@angular-eslint/eslint-plugin-template": "^18.3.1",
-    "@angular-eslint/schematics": "^18.3.1",
-    "@angular-eslint/template-parser": "^18.3.1",
     "@angular/cli": "^18.2.8",
     "@angular/compiler-cli": "^18.2.8",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.0",
     "@types/jasmine": "~5.1.0",
     "@types/lodash-es": "^4.17.10",
     "@types/node": "^20.12.0",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
     "angular-cli-ghpages": "^2.0.0",
-    "eslint": "^8.57.0",
+    "angular-eslint": "^18.3.1",
+    "eslint": "^9.12.0",
     "husky": "^8.0.3",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
@@ -75,6 +68,7 @@
     "stylelint": "^16.5.0",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-config-standard": "^36.0.0",
-    "typescript": "~5.4.5"
+    "typescript": "~5.4.5",
+    "typescript-eslint": "^8.8.1"
   }
 }

package.json

@@ -0,0 +1,34 @@
+// @ts-check
+const tseslint = require('typescript-eslint');
+const rootConfig = require('../../eslint.config.js');
+
+module.exports = tseslint.config(
+  ...rootConfig,
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: '',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: '',
+          style: 'kebab-case',
+        },
+      ],
+      '@angular-eslint/directive-class-suffix': 'off',
+      '@angular-eslint/component-class-suffix': 'off',
+    },
+  },
+  {
+    files: ['**/*.html'],
+    rules: {},
+  }
+);

projects/code-editor/eslint.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+const tseslint = require("typescript-eslint");
+const rootConfig = require("../../eslint.config.js");
+
+module.exports = tseslint.config(
+  ...rootConfig,
+  {
+    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: {},
+  }
+);