Move to typescript-eslint

.eslintrc.json

@@ -0,0 +1,93 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/ng-cli-compat",
+        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/component-class-suffix": "off",
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "cre",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-class-suffix": "off",
+        "@angular-eslint/directive-selector": [
+          "off",
+          {
+            "type": "attribute",
+            "prefix": "cre",
+            "style": "camelCase"
+          }
+        ],
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/member-delimiter-style": [
+          "off",
+          {
+            "multiline": {
+              "delimiter": "none",
+              "requireLast": true
+            },
+            "singleline": {
+              "delimiter": "semi",
+              "requireLast": false
+            }
+          }
+        ],
+        "@typescript-eslint/semi": [
+          "off",
+          "never"
+        ],
+        "arrow-parens": [
+          "off",
+          "always"
+        ],
+        "eqeqeq": [
+          "off",
+          "always"
+        ],
+        "import/order": "off",
+        "max-len": [
+          "off",
+          {
+            "code": 140
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

angular.json

@@ -26,7 +26,11 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              { "glob":  "mdi.svg", "input":  "./node_modules/@mdi/angular-material", "output": "./assets"}
+              {
+                "glob": "mdi.svg",
+                "input": "./node_modules/@mdi/angular-material",
+                "output": "./assets"
+              }
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
@@ -100,15 +104,11 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
+            "lintFilePatterns": [
-              "tsconfig.app.json",
+              "src/**/*.ts",
-              "tsconfig.spec.json",
+              "src/**/*.html"
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
             ]
           }
         },
@@ -127,5 +127,8 @@
       }
     }
   },
-  "defaultProject": "color-recipes-explorer-frontend"
+  "defaultProject": "color-recipes-explorer-frontend",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
 }

package.json

@@ -33,13 +33,23 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.1102.9",
+    "@angular-eslint/builder": "4.3.0",
+    "@angular-eslint/eslint-plugin": "4.3.0",
+    "@angular-eslint/eslint-plugin-template": "4.3.0",
+    "@angular-eslint/schematics": "4.3.0",
+    "@angular-eslint/template-parser": "4.3.0",
     "@angular/cli": "^11.2.11",
     "@angular/compiler-cli": "~11.2.10",
     "@angular/language-service": "~11.2.10",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
-    "codelyzer": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "4.16.1",
+    "@typescript-eslint/parser": "4.16.1",
+    "eslint": "^7.6.0",
+    "eslint-plugin-import": "latest",
+    "eslint-plugin-jsdoc": "latest",
+    "eslint-plugin-prefer-arrow": "latest",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.2",
@@ -49,7 +59,6 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
     "typescript": "~4.0.7"
   }
 }

src/app/modules/configuration/config-editor.html

@@ -11,23 +11,23 @@
   <div class="d-flex flex-column" style="gap: 1.5rem">
     <cre-config-section *ngIf="!emergencyMode" label="Apparence">
       <cre-config-list>
-        <cre-image-config
+<!--        <cre-image-config-->
-          label="Logo"
+<!--          label="Logo"-->
-          tooltip="Affiché dans la bannière de l'application web. Il peut être nécessaire de forcer le
+<!--          tooltip="Affiché dans la bannière de l'application web. Il peut être nécessaire de forcer le-->
-                rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches
+<!--                rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches-->
-                'Ctrl+F5')."
+<!--                'Ctrl+F5')."-->
-          [configControl]="getConfigControl(keys.INSTANCE_LOGO_PATH)" previewWidth="170px"
+<!--          [configControl]="getConfigControl(keys.INSTANCE_LOGO_PATH)" previewWidth="170px"-->
-          (invalidFormat)="invalidFormatConfirmBox.show()">
+<!--          (invalidFormat)="invalidFormatConfirmBox.show()">-->
-        </cre-image-config>
+<!--        </cre-image-config>-->
 
-        <cre-image-config
+<!--        <cre-image-config-->
-          label="Icône"
+<!--          label="Icône"-->
-          tooltip="Affiché dans l'onglet de la page dans le navigateur. Il peut être nécessaire de forcer le
+<!--          tooltip="Affiché dans l'onglet de la page dans le navigateur. Il peut être nécessaire de forcer le-->
-                  rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches
+<!--                  rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches-->
-                  'Ctrl+F5')."
+<!--                  'Ctrl+F5')."-->
-          [configControl]="getConfigControl(keys.INSTANCE_ICON_PATH)" previewWidth="32px"
+<!--          [configControl]="getConfigControl(keys.INSTANCE_ICON_PATH)" previewWidth="32px"-->
-          (invalidFormat)="invalidFormatConfirmBox.show()">
+<!--          (invalidFormat)="invalidFormatConfirmBox.show()">-->
-        </cre-image-config>
+<!--        </cre-image-config>-->
       </cre-config-list>
     </cre-config-section>
 

src/app/modules/configuration/config.ts

@@ -65,10 +65,6 @@ abstract class _CreConfigBase extends SubscribingComponent {
     super(errorService, activatedRoute, router)
   }
 
-  ngOnInit() {
-    super.ngOnInit()
-  }
-
   get config(): Config {
     return this.configControl.config
   }

src/app/modules/shared/service/alert.service.ts

@@ -38,7 +38,7 @@ export class AlertService {
  * An alert handler component is a component that will show the alerts pushed by the alert system to the user.
  */
 @Directive()
-// tslint:disable-next-line:directive-class-suffix
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
 export abstract class AlertHandlerComponent implements OnDestroy {
   protected static readonly DEFAULT_ALERT_BUFFER_SIZE = 3
   protected static readonly DEFAULT_ALERT_DURATION = 5

tslint.json

@@ -1,153 +0,0 @@
-{
-  "extends": "tslint:recommended",
-  "rules": {
-    "align": {
-      "options": [
-        "parameters",
-        "statements"
-      ]
-    },
-    "array-type": false,
-    "arrow-parens": false,
-    "arrow-return-shorthand": true,
-    "deprecation": {
-      "severity": "warning"
-    },
-    "component-class-suffix": true,
-    "contextual-lifecycle": true,
-    "curly": true,
-    "directive-class-suffix": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      "cre",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "cre",
-      "kebab-case"
-    ],
-    "eofline": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-spacing": true,
-    "indent": {
-      "options": [
-        "spaces"
-      ]
-    },
-    "interface-name": false,
-    "max-classes-per-file": false,
-    "max-line-length": [
-      false,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-consecutive-blank-lines": false,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-empty": false,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
-    "no-switch-case-fall-through": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "object-literal-sort-keys": false,
-    "ordered-imports": false,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "trailing-comma": false,
-    "no-conflicting-lifecycle": true,
-    "no-host-metadata-property": true,
-    "no-input-rename": true,
-    "no-inputs-metadata-property": true,
-    "no-output-native": true,
-    "no-output-on-prefix": true,
-    "no-output-rename": true,
-    "no-outputs-metadata-property": true,
-    "space-before-function-paren": {
-      "options": {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "constructor": "never",
-        "method": "never",
-        "named": "never"
-      }
-    },
-    "template-banana-in-box": true,
-    "template-no-negated-async": true,
-    "use-lifecycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "typedef-whitespace": {
-      "options": [
-        {
-          "call-signature": "nospace",
-          "index-signature": "nospace",
-          "parameter": "nospace",
-          "property-declaration": "nospace",
-          "variable-declaration": "nospace"
-        },
-        {
-          "call-signature": "onespace",
-          "index-signature": "onespace",
-          "parameter": "onespace",
-          "property-declaration": "onespace",
-          "variable-declaration": "onespace"
-        }
-      ]
-    },
-    "semicolon": [false, "never"],
-    "triple-equals": false,
-    "variable-name": {
-      "options": [
-        "ban-keywords",
-        "check-format",
-        "allow-pascal-case"
-      ]
-    },
-    "whitespace": {
-      "options": [
-        "check-branch",
-        "check-decl",
-        "check-operator",
-        "check-separator",
-        "check-type",
-        "check-typecast"
-      ]
-    },
-    "ban-types": false
-  },
-  "rulesDirectory": [
-    "codelyzer"
-  ]
-}