build: switch to eslint (angular#957)

Switches the repo to use eslint instead of the deprecated tslint. Also adjusts the default config to match our previous setup.
jljohnson001 · Apr 20, 2021 · cf6574d · cf6574d
1 parent bdd888a
commit cf6574d
Show file tree

Hide file tree

Showing 13 changed files with 1,026 additions and 346 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,107 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "*.d.ts"
+  ],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "plugins": ["ban"],
+      "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": "off",
+        "@angular-eslint/directive-class-suffix": "off",
+        "@angular-eslint/directive-selector": "off",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/member-delimiter-style": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/no-inferrable-types": "off",
+        "@typescript-eslint/member-ordering": "off",
+        "@typescript-eslint/no-unused-vars": "error",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/quotes": [
+          "error",
+          "single",
+          {
+            "avoidEscape": true,
+            "allowTemplateLiterals": true
+          }
+        ],
+        "@typescript-eslint/semi": [
+          "error"
+        ],
+        "arrow-parens": [
+          "off",
+          "always"
+        ],
+        "brace-style": [
+          "error",
+          "1tbs"
+        ],
+        "import/order": "off",
+        "linebreak-style": [
+          "error",
+          "unix"
+        ],
+        "max-len": [
+          "error",
+          {
+            "code": 100
+          }
+        ],
+        "ban/ban": [
+          "error",
+          {"name": "fit"},
+          {"name": "fdescribe"},
+          {"name": "xit"},
+          {"name": "xdescribe"},
+          {"name": ["Object", "assign"], "message": "Use the spread operator instead."}
+        ],
+        "no-duplicate-imports": "error",
+        "no-redeclare": "error",
+        "object-shorthand": "off",
+        "no-underscore-dangle": "off",
+        "prefer-arrow/prefer-arrow-functions": "off",
+        "jsdoc/newline-after-description": "off",
+        "quote-props": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {
+        "@angular-eslint/template/accessibility-alt-text": "error",
+        "@angular-eslint/template/accessibility-elements-content": "error",
+        "@angular-eslint/template/accessibility-label-for": "error",
+        "@angular-eslint/template/accessibility-table-scope": "error",
+        "@angular-eslint/template/accessibility-valid-aria": "error",
+        "@angular-eslint/template/click-events-have-key-events": "error",
+        "@angular-eslint/template/mouse-events-have-key-events": "error",
+        "@angular-eslint/template/no-autofocus": "error",
+        "@angular-eslint/template/no-distracting-elements": "error",
+        "@angular-eslint/template/no-positive-tabindex": "error"
+      }
+    }
+  ]
+}
diff --git a/angular.json b/angular.json
@@ -71,7 +71,11 @@
               }
             ],
             "stylePreprocessorOptions": {
-              "includePaths": ["node_modules", "src", "src/styles"]
+              "includePaths": [
+                "node_modules",
+                "src",
+                "src/styles"
+              ]
             },
             "scripts": []
           },
@@ -155,7 +159,11 @@
               }
             ],
             "stylePreprocessorOptions": {
-              "includePaths": ["node_modules", "src", "src/styles"]
+              "includePaths": [
+                "node_modules",
+                "src",
+                "src/styles"
+              ]
             },
             "assets": [
               {
@@ -172,15 +180,11 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
             ]
           }
         },
@@ -292,15 +296,11 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "scenes/tsconfig.app.json",
-              "scenes/tsconfig.spec.json",
-              "scenes/e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "lintFilePatterns": [
+              "scenes/**/*.ts",
+              "scenes/**/*.html"
             ]
           }
         },
@@ -320,6 +320,7 @@
     }
   },
   "cli": {
-    "analytics": "cf155f04-1636-4df9-9ce2-870ba25ad38d"
+    "analytics": "cf155f04-1636-4df9-9ce2-870ba25ad38d",
+    "defaultCollection": "@angular-eslint/schematics"
   }
 }
diff --git a/package.json b/package.json
@@ -59,14 +59,25 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^12.0.0-next.9",
+    "@angular-eslint/builder": "4.0.0",
+    "@angular-eslint/eslint-plugin": "4.0.0",
+    "@angular-eslint/eslint-plugin-template": "4.0.0",
+    "@angular-eslint/schematics": "4.0.0",
+    "@angular-eslint/template-parser": "4.0.0",
     "@angular/cli": "^12.0.0-next.9",
     "@angular/compiler-cli": "^12.0.0-next.9",
     "@angular/localize": "^12.0.0-next.9",
     "@types/imagemin": "^7.0.0",
     "@types/jasmine": "^3.6.6",
     "@types/node": "^14.14.22",
     "@types/shelljs": "~0.8.8",
-    "codelyzer": "^6.0.1",
+    "@typescript-eslint/eslint-plugin": "4.16.1",
+    "@typescript-eslint/parser": "4.16.1",
+    "eslint": "^7.6.0",
+    "eslint-plugin-ban": "^1.5.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsdoc": "^32.3.0",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
     "firebase-tools": "^9.9.0",
     "imagemin": "^7.0.1",
     "imagemin-pngquant": "^9.0.2",
@@ -86,7 +97,6 @@
     "puppeteer": "~8.0.0",
     "shelljs": "^0.8.4",
     "ts-node": "^8.10.2",
-    "tslint": "^6.1.3",
     "typescript": "~4.2.3"
   }
 }
diff --git a/scenes/.eslintrc.json b/scenes/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.eslintrc.json"
+}
diff --git a/scenes/tslint.json b/scenes/tslint.json
diff --git a/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts b/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot} from '@angular/router';
+import {CanActivate, ActivatedRouteSnapshot, Router} from '@angular/router';
 import {SECTIONS} from '../../shared/documentation-items/documentation-items';
 
 /**
@@ -10,13 +10,14 @@ import {SECTIONS} from '../../shared/documentation-items/documentation-items';
 export class CanActivateComponentSidenav implements CanActivate {
   constructor(private router: Router) {}
 
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+  canActivate(route: ActivatedRouteSnapshot) {
     // Searches if the section defined in the base UrlSegment is a valid section from the
     // documentation items. If found, returns true to allow activation, otherwise blocks activation
     // and navigates to '/'.
-    const sectionFound = Object.keys(SECTIONS).find(
-      (val => val.toLowerCase() === route.url[0].path.toLowerCase()));
-    if (sectionFound) { return true; }
+    if (Object.keys(SECTIONS).some((s => s.toLowerCase() === route.url[0].path.toLowerCase()))) {
+      return true;
+    }
+
     this.router.navigateByUrl('/');
     return false;
   }

diff --git a/src/app/pages/component-viewer/component-viewer.ts b/src/app/pages/component-viewer/component-viewer.ts
@@ -54,9 +54,12 @@ export class ComponentViewer implements OnDestroy {
       if (docItemAndSection.doc !== undefined) {
         this.componentDocItem.next(docItemAndSection.doc);
         this._componentPageTitle.title = `${docItemAndSection.doc.name}`;
-        docItemAndSection.doc.examples && docItemAndSection.doc.examples.length ?
-          this.sections.add('examples') :
+
+        if (docItemAndSection.doc.examples && docItemAndSection.doc.examples.length) {
+          this.sections.add('examples');
+        } else {
           this.sections.delete('examples');
+        }
       } else {
         this.router.navigate(['/' + docItemAndSection.section]);
       }

diff --git a/src/app/pages/page-title/page-title.ts b/src/app/pages/page-title/page-title.ts
@@ -9,7 +9,9 @@ export class ComponentPageTitle {
   _title = '';
   _originalTitle = 'Angular Material UI component library';
 
-  get title(): string { return this._title; }
+  get title(): string {
+    return this._title;
+  }
 
   set title(title: string) {
     this._title = title;

diff --git a/src/app/routes.ts b/src/app/routes.ts
@@ -1,5 +1,7 @@
 import {Routes} from '@angular/router';
-import {CanActivateComponentSidenav} from './pages/component-sidenav/component-sidenav-can-load-guard';
+import {
+  CanActivateComponentSidenav
+} from './pages/component-sidenav/component-sidenav-can-load-guard';
 
 export const MATERIAL_DOCS_ROUTES: Routes = [
   {

diff --git a/src/app/shared/example-viewer/example-viewer.ts b/src/app/shared/example-viewer/example-viewer.ts
@@ -59,7 +59,9 @@ export class ExampleViewer implements OnInit {
   /** String key of the currently displayed example. */
   @HostBinding('attr.id')
   @Input()
-  get example() { return this._example; }
+  get example() {
+    return this._example;
+  }
   set example(exampleName: string | undefined) {
     if (exampleName && exampleName !== this._example && EXAMPLE_COMPONENTS[exampleName]) {
       this._example = exampleName;
@@ -120,7 +122,7 @@ export class ExampleViewer implements OnInit {
   }
 
   toggleSourceView(): void {
-    this.view === 'full' ? this.view = 'demo' : this.view = 'full';
+    this.view = this.view === 'full' ? 'demo' : 'full';
   }
 
   copySource(snippet: QueryList<CodeSnippet>, selectedIndex: number = 0) {
@@ -154,8 +156,14 @@ export class ExampleViewer implements OnInit {
       let indexB = preferredExampleFileOrder.indexOf(b);
       // Files which are not part of the preferred example file order should be
       // moved after all items with a preferred index.
-      if (indexA === -1) indexA = preferredExampleFileOrder.length;
-      if (indexB === -1) indexB = preferredExampleFileOrder.length;
+      if (indexA === -1) {
+        indexA = preferredExampleFileOrder.length;
+      }
+
+      if (indexB === -1) {
+        indexB = preferredExampleFileOrder.length;
+      }
+
       return (indexA - indexB) || 1;
     }) : [];
   }

diff --git a/src/assets/stack-blitz-tests/src/main.ts b/src/assets/stack-blitz-tests/src/main.ts
@@ -8,10 +8,9 @@ import './app/material-docs-example.spec';
 (function bootstrap() {
   if ((window as any).jasmineRef) {
     location.reload();
-
     return;
   }
 
-  window.onload!(new Event("anything"));
+  window.onload?.(new Event('anything'));
   (window as any).jasmineRef = jasmine.getEnv();
 })();