Update eslint rules #10134

It's been a while since we updated our rules. This time we opt in into all rules and explicitly disable the ones that don't fit our code. This way we will automatically receive new rules in the future, and we can decide whether we accept or reject them, instead of needing to re-check which one is new at every update.
Ecodev · Feb 29, 2024 · 387b27b · 387b27b
1 parent 475cf19
commit 387b27b
Show file tree

Hide file tree

Showing 143 changed files with 811 additions and 707 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -4,16 +4,37 @@
         {
             "files": ["*.ts"],
             "parserOptions": {
-                "project": ["tsconfig.json"],
+                "project": true,
                 "createDefaultProgram": true
             },
             "extends": [
                 "eslint:recommended",
-                "plugin:@typescript-eslint/recommended",
-                "plugin:@angular-eslint/recommended",
+                "plugin:@typescript-eslint/strict-type-checked",
+                "plugin:@typescript-eslint/stylistic-type-checked",
+                "plugin:@angular-eslint/all",
                 "plugin:@angular-eslint/template/process-inline-templates"
             ],
             "rules": {
+                "@angular-eslint/component-max-inline-declarations": "off", // We use that mostly for testing, so it's fine
+                "@angular-eslint/no-forward-ref": "off", // We sometimes need it
+                "@angular-eslint/prefer-on-push-component-change-detection": "off",
+                "@angular-eslint/use-component-selector": "off", // Some components are not template-able and thus do not need selector
+                "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+                "@typescript-eslint/explicit-member-accessibility": "error",
+                "@typescript-eslint/no-confusing-void-expression": "off", // Don't create unncessary closure and we prefer code tersity anyway
+                "@typescript-eslint/no-dynamic-delete": "off",
+                "@typescript-eslint/no-explicit-any": "off",
+                "@typescript-eslint/no-extraneous-class": "off", // We have component without any logic in TS
+                "@typescript-eslint/no-floating-promises": "off",
+                "@typescript-eslint/no-non-null-assertion": "off",
+                "@typescript-eslint/no-unnecessary-condition": "off", // This is very unfortunate, but there are too many dangerous false-positive, see https://github.com/typescript-eslint/typescript-eslint/issues/1798
+                "@typescript-eslint/no-unsafe-argument": "off",
+                "@typescript-eslint/no-unsafe-assignment": "off",
+                "@typescript-eslint/no-unsafe-call": "off",
+                "@typescript-eslint/no-unsafe-member-access": "off",
+                "@typescript-eslint/no-unsafe-return": "off",
+                "@typescript-eslint/prefer-nullish-coalescing": "off", // Usually a good idea, but sometimes dangerous false-positive
+                "@typescript-eslint/unbound-method": "off",
                 "@angular-eslint/directive-selector": [
                     "error",
                     {
@@ -30,23 +51,28 @@
                         "style": "kebab-case"
                     }
                 ],
-                "@typescript-eslint/ban-types": "error",
                 "@typescript-eslint/explicit-function-return-type": [
                     "error",
                     {
                         "allowExpressions": true
                     }
                 ],
-                "@typescript-eslint/explicit-member-accessibility": "error",
                 "@typescript-eslint/explicit-module-boundary-types": [
                     "error",
                     {
                         "allowArgumentsExplicitlyTypedAsAny": true
                     }
                 ],
-                "@typescript-eslint/prefer-for-of": "error",
-                "@typescript-eslint/no-non-null-assertion": "off",
-                "@typescript-eslint/no-explicit-any": "off",
+                "@typescript-eslint/no-misused-promises": [
+                    "error",
+                    {
+                        "checksVoidReturn": {
+                            // We want to use promise in Rxjs subscribes without caring about the promise result
+                            "arguments": false,
+                            "properties": false
+                        }
+                    }
+                ],
                 "no-restricted-globals": [
                     "error",
                     "atob",
@@ -61,14 +87,32 @@
                     "navigator",
                     "sessionStorage",
                     "window"
-                ],
-                "prefer-const": ["error"]
+                ]
             }
         },
         {
             "files": ["*.html"],
-            "extends": ["plugin:@angular-eslint/template/recommended"],
-            "rules": {}
+            "extends": ["plugin:@angular-eslint/template/all"],
+            "rules": {
+                "@angular-eslint/template/alt-text": "off", // We don't care as much as we should about a11y
+                "@angular-eslint/template/attributes-order": "off", // TODO: We want to enable this, but autofix mess up our code, and it's too much manual changes
+                "@angular-eslint/template/button-has-type": "off",
+                "@angular-eslint/template/click-events-have-key-events": "off", // We don't care as much as we should about a11y
+                "@angular-eslint/template/i18n": "off",
+                "@angular-eslint/template/interactive-supports-focus": "off", // We don't care as much as we should about a11y
+                "@angular-eslint/template/label-has-associated-control": "off", // We don't care as much as we should about a11y
+                "@angular-eslint/template/no-any": "off", // Unfortunately, some libs force us to use this
+                "@angular-eslint/template/no-autofocus": "off",
+                "@angular-eslint/template/no-call-expression": "off",
+                "@angular-eslint/template/no-inline-styles": "off", // We sometimes use short inlie styles
+                "@angular-eslint/template/prefer-ngsrc": "off", // TODO: experiment with ngsrc and see if we need to use it or not
+                "@angular-eslint/template/eqeqeq": [
+                    "error",
+                    {
+                        "allowNullOrUndefined": true
+                    }
+                ]
+            }
         }
     ]
 }
diff --git a/e2e/src/app.spec.ts b/e2e/src/app.spec.ts
@@ -5,7 +5,7 @@ import {AppPage} from './app.po';
 test.describe('Demo', () => {
     let app: AppPage;
 
-    test.beforeEach(async ({page}) => {
+    test.beforeEach(({page}) => {
         app = new AppPage(page);
     });
 
@@ -38,7 +38,7 @@ test.describe('Demo', () => {
 
         // Search something else, and expect to read the searched value when bluring the field
         await page.fill(inputSelector, 'any search 3');
-        await (await page.locator(inputSelector)).blur();
+        await page.locator(inputSelector).blur();
         expect(await page.inputValue(inputSelector)).toEqual('name-16');
 
         // Unselect model by entering empty field with ENTER key

diff --git a/projects/natural-editor/.eslintrc.json b/projects/natural-editor/.eslintrc.json
@@ -20,6 +20,57 @@
                     }
                 ]
             }
+        },
+        {
+            "files": ["*.html"],
+            "rules": {
+                "@angular-eslint/template/i18n": [
+                    "error",
+                    {
+                        "checkId": false,
+                        "ignoreAttributes": [
+                            "autocomplete",
+                            "charset",
+                            "class",
+                            "color",
+                            "colspan",
+                            "dir",
+                            "fill",
+                            "for",
+                            "formArrayName",
+                            "formControlName",
+                            "formGroupName",
+                            "height",
+                            "href",
+                            "id",
+                            "lang",
+                            "list",
+                            "name",
+                            "ngClass",
+                            "ngProjectAs",
+                            "role",
+                            "routerLink",
+                            "routerLinkActive",
+                            "src",
+                            "stroke",
+                            "stroke-width",
+                            "style",
+                            "svgIcon",
+                            "tabindex",
+                            "target",
+                            "type",
+                            "value",
+                            "viewBox",
+                            "width",
+                            "xmlns",
+                            "align",
+                            "naturalIcon",
+                            "naturalCustomCss",
+                            "fontIcon"
+                        ]
+                    }
+                ]
+            }
         }
     ]
 }
diff --git a/projects/natural-editor/src/lib/class-dialog/class-dialog.component.ts b/projects/natural-editor/src/lib/class-dialog/class-dialog.component.ts
@@ -7,7 +7,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
-export interface ClassDialogData {
+export type ClassDialogData = {
     /**
      * CSS class names
      *
@@ -17,7 +17,7 @@ export interface ClassDialogData {
      * - `"my-class my-other-class"`
      */
     class: string;
-}
+};
 
 @Component({
     templateUrl: './class-dialog.component.html',

diff --git a/projects/natural-editor/src/lib/color-dialog/color-dialog.component.html b/projects/natural-editor/src/lib/color-dialog/color-dialog.component.html
@@ -13,7 +13,7 @@ <h2 i18n mat-dialog-title>Sélectionner une couleur</h2>
 
     <div>
         <button mat-button (click)="selectColor('')">
-            <mat-icon naturalIcon="format_color_reset"></mat-icon>
+            <mat-icon naturalIcon="format_color_reset" />
             <span i18n>Transparent</span></button
         >
     </div>

diff --git a/projects/natural-editor/src/lib/color-dialog/color-dialog.component.ts b/projects/natural-editor/src/lib/color-dialog/color-dialog.component.ts
@@ -8,7 +8,7 @@ import {NaturalIconDirective} from '@ecodev/natural';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 
-export interface ColorDialogData {
+export type ColorDialogData = {
     /**
      * Empty string means no color set at all. Anything else must be a valid CSS color in hexa format.
      *
@@ -18,7 +18,7 @@ export interface ColorDialogData {
      * - `"#ff4000"`
      */
     color: string;
-}
+};
 
 @Component({
     templateUrl: './color-dialog.component.html',

diff --git a/projects/natural-editor/src/lib/custom-css/custom-css.directive.spec.ts b/projects/natural-editor/src/lib/custom-css/custom-css.directive.spec.ts
@@ -31,7 +31,7 @@ describe('NaturalLinkableTabDirective', () => {
         document = TestBed.inject(DOCUMENT);
     });
 
-    it('should inject CSS and remove it', async () => {
+    it('should inject CSS and remove it', () => {
         fixture.detectChanges();
 
         const expected1 = `[data-natural-id=n1] p {background: pink;}`;