Update Eslint to v9 w/flat config & fix linting errors #724

.knip.json

@@ -14,11 +14,13 @@
     "src/settings.example.js"
   ],
   "ignoreDependencies": [
+    "@angular-eslint/eslint-plugin",
+    "@angular-eslint/eslint-plugin-template",
     "@angular-eslint/schematics",
     "@angular-eslint/template-parser",
     "@angular/language-service",
-    "@typescript-eslint/parser",
     "bootstrap",
+    "@eslint/eslintrc",
     "html-validate",
     "jasmine-core",
     "karma-brief-reporter",

eslint.config.mjs

@@ -0,0 +1,181 @@
+// @ts-check
+import eslint from "@eslint/js";
+import angular from "angular-eslint";
+import eslintConfigPrettier from "eslint-config-prettier";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["coverage/", "dist/"] },
+  {
+    // Everything in this config object targets our TypeScript files (Components, Directives, Pipes etc)
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      {
+        languageOptions: {
+          parserOptions: {
+            projectService: true,
+            tsconfigRootDir: import.meta.dirname,
+          },
+        },
+      },
+      // ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+      eslintConfigPrettier,
+    ],
+    // Set the custom processor which will allow us to have our inline Component templates extracted
+    // and treated as if they are HTML files (and therefore have the .html config below applied to them)
+    processor: angular.processInlineTemplates,
+    // Override specific rules for TypeScript files (these will take priority over the extended configs above)
+    rules: {
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          prefix: "bkd",
+          style: "kebab-case",
+          type: "element",
+        },
+      ],
+
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "bkd",
+          style: "camelCase",
+        },
+      ],
+
+      "no-restricted-globals": [
+        "error",
+        {
+          name: "fdescribe",
+          message: "Do not commit 'fdescribe'. Use 'describe' instead.",
+        },
+      ],
+
+      "no-restricted-imports": [
+        "error",
+        {
+          patterns: [
+            {
+              group: ["fp-ts/lib/*"],
+              message: "Please use 'fp-ts/es6' instead.",
+            },
+          ],
+
+          paths: [
+            {
+              name: "@ng-bootstrap/ng-bootstrap",
+              importNames: ["NgbModal"],
+              message: "Please use 'BkdModalService' instead.",
+            },
+          ],
+        },
+      ],
+
+      "@typescript-eslint/no-deprecated": "warn",
+
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "_.*",
+        },
+      ],
+
+      // Ignore some strict rules introduced by typescript-eslint since the
+      // would be a lot of work to fix
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/unbound-method": "off",
+      "@typescript-eslint/restrict-template-expressions": "off",
+      "@typescript-eslint/no-unsafe-enum-comparison": "off",
+    },
+  },
+  {
+    // Everything in this config object targets our HTML files (external templates,
+    // and inline templates as long as we have the `processor` set on our TypeScript config above)
+    files: ["**/*.html"],
+    extends: [
+      // Apply the recommended Angular template rules
+      ...angular.configs.templateRecommended,
+      // Apply the Angular template rules which focus on accessibility of our apps
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  },
+);
+
+// export default [{
+//     ignores: ["projects/**/*"],
+// }, ...compat.extends(
+//     "eslint:recommended",
+//     "plugin:@typescript-eslint/recommended",
+//     "plugin:@angular-eslint/recommended",
+//     "plugin:@angular-eslint/template/process-inline-templates",
+//     "prettier",
+// ).map(config => ({
+//     ...config,
+//     files: ["**/*.ts"],
+// })), {
+//     files: ["**/*.ts"],
+//     plugins: {},
+
+//     languageOptions: {
+//         ecmaVersion: 5,
+//         sourceType: "script",
+
+//         parserOptions: {
+//             project: ["tsconfig.json"],
+//             createDefaultProgram: true,
+//         },
+//     },
+
+//     rules: {
+//         "@angular-eslint/component-selector": ["error", {
+//             prefix: "bkd",
+//             style: "kebab-case",
+//             type: "element",
+//         }],
+
+//         "@angular-eslint/directive-selector": ["error", {
+//             type: "attribute",
+//             prefix: "bkd",
+//             style: "camelCase",
+//         }],
+
+//         "no-restricted-globals": ["error", {
+//             name: "fdescribe",
+//             message: "Do not commit 'fdescribe'. Use 'describe' instead.",
+//         }],
+
+//         "no-restricted-imports": ["error", {
+//             patterns: [{
+//                 group: ["fp-ts/lib/*"],
+//                 message: "Please use 'fp-ts/es6' instead.",
+//             }],
+
+//             paths: [{
+//                 name: "@ng-bootstrap/ng-bootstrap",
+//                 importNames: ["NgbModal"],
+//                 message: "Please use 'BkdModalService' instead.",
+//             }],
+//         }],
+
+//         "@typescript-eslint/no-deprecated": "warn",
+
+//         "@typescript-eslint/no-unused-vars": ["error", {
+//             argsIgnorePattern: "_.*",
+//         }],
+//     },
+// }, ...compat.extends("plugin:@angular-eslint/template/recommended", "prettier").map(config => ({
+//     ...config,
+//     files: ["**/*.html"],
+// })), {
+//     files: ["**/*.html"],
+//     rules: {},
+// }];