Migrate from TSLint to ESLint (#1250)

TSLint is now deprecated in favour of ESLint. We should keep our 
dependencies up-to-date.

Let's migrate to ESLint to ensure that our linter is up-to-date.
---------

Co-authored-by: Misra Aditya <e1096355@u.nus.edu>
Co-authored-by: Wong Chee Hong <c.h.wong2606@gmail.com>

.eslintrc.json

@@ -0,0 +1,90 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "parser": "@typescript-eslint/parser",
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json", "e2e/tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "extends": ["plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "app",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ],
+        // "arrow-body-style": ["error", "as-needed", { "requireReturnForObjectLiteral": true }],
+        "@typescript-eslint/prefer-function-type": "error",
+        "@typescript-eslint/naming-convention": ["error", { "selector": "class", "format": ["PascalCase"] }],
+        "spaced-comment": ["error", "always", { "exceptions": ["*"] }],
+        "curly": ["error", "all"],
+        "eol-last": ["error", "always"],
+        "guard-for-in": "error",
+        "no-restricted-imports": ["error", "rxjs/Rx"],
+        "indent": "off",
+        "no-labels": ["error", { "allowLoop": true, "allowSwitch": true }],
+        "max-len": ["error", { "code": 140 }],
+        "@typescript-eslint/explicit-member-accessibility": "off",
+        "@typescript-eslint/member-ordering": [
+          "error",
+          {
+            "default": ["static-field", "instance-field", "static-method", "instance-method"]
+          }
+        ],
+        "no-caller": "error",
+        "no-bitwise": "error",
+        "no-console": ["error", { "allow": ["warn", "error", "log"] }],
+        "no-new-wrappers": "error",
+        "no-debugger": "error",
+        "no-empty": "off",
+        "@typescript-eslint/no-empty-interface": "error",
+        "no-eval": "error",
+        "@typescript-eslint/no-inferrable-types": ["error", { "ignoreParameters": true }],
+        "@typescript-eslint/no-misused-new": "error",
+        "@typescript-eslint/no-non-null-assertion": "error",
+        "@typescript-eslint/no-throw-literal": "error",
+        "no-fallthrough": "error",
+        "no-trailing-spaces": "error",
+        "no-undef-init": "error",
+        "no-var": "error",
+        "sort-keys": "off",
+        "brace-style": "error",
+        "radix": "error",
+        "semi": "error",
+        "eqeqeq": ["error", "always", { "null": "ignore" }],
+        "@angular-eslint/no-empty-lifecycle-method": "off",
+        "@typescript-eslint/type-annotation-spacing": "error",
+        "@typescript-eslint/unified-signatures": "error",
+        "@angular-eslint/directive-class-suffix": "error",
+        "@angular-eslint/component-class-suffix": "error",
+        "@angular-eslint/use-pipe-transform-interface": "error",
+        "@angular-eslint/no-output-rename": "error",
+        "@angular-eslint/no-input-rename": "error",
+        "@angular-eslint/no-host-metadata-property": "error",
+        "@angular-eslint/no-outputs-metadata-property": "error",
+        "@angular-eslint/no-inputs-metadata-property": "error",
+        "@angular-eslint/no-output-on-prefix": "error"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {
+        "@angular-eslint/template/eqeqeq": "off"
+      }
+    }
+  ]
+}

angular.json

@@ -142,10 +142,9 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
@@ -160,5 +159,8 @@
     "@schematics/angular:directive": {
       "prefix": "app"
     }
+  },
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
   }
 }

package.json

@@ -40,6 +40,7 @@
     "@angular/platform-browser": "^12.2.17",
     "@angular/platform-browser-dynamic": "^12.2.17",
     "@angular/router": "^12.2.17",
+    "@apollo/client": "3.3.0",
     "@github/markdown-toolbar-element": "^2.1.1",
     "@octokit/rest": "^16.37.0",
     "ajv": "^6.11.0",
@@ -55,11 +56,15 @@
     "rxjs": "6.6.7",
     "tslib": "^2.0.0",
     "uuid": "7.0.3",
-    "zone.js": "~0.11.4",
-    "@apollo/client": "3.3.0"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~12.2.18",
+    "@angular-eslint/builder": "12.7.0",
+    "@angular-eslint/eslint-plugin": "12.7.0",
+    "@angular-eslint/eslint-plugin-template": "12.7.0",
+    "@angular-eslint/schematics": "12.7.0",
+    "@angular-eslint/template-parser": "12.7.0",
     "@angular/cli": "^12.2.18",
     "@angular/compiler-cli": "^12.2.17",
     "@angular/language-service": "^12.2.17",
@@ -75,8 +80,10 @@
     "@types/jasmine": "^3.8.2",
     "@types/jasminewd2": "2.0.8",
     "@types/node": "^15.6.1",
+    "@typescript-eslint/eslint-plugin": "4.28.2",
+    "@typescript-eslint/parser": "4.28.2",
     "angular-cli-ghpages": "^1.0.0-rc.2",
-    "codelyzer": "^6.0.2",
+    "eslint": "^7.26.0",
     "husky": "^4.2.5",
     "jasmine": "^3.9.0",
     "jasmine-core": "~3.8.0",
@@ -92,7 +99,6 @@
     "pretty-quick": "^3.1.1",
     "scuri": "^0.9.4",
     "ts-node": "^10.9.2",
-    "tslint": "~6.1.0",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "4.3.5"
   }

src/app/core/models/generators/github-issue.generator.ts

@@ -2,21 +2,22 @@ import { GithubIssue } from '../github/github-issue.model';
 
 export default function generateGithubIssuesArray(numberOfElements: number = 1): Array<GithubIssue> {
   const created_and_updated_date: string = getRandomDate().toISOString();
-  return new Array<GithubIssue>(10).map((value: GithubIssue, index: number, array: GithubIssue[]) => {
-    return new GithubIssue({
-      id: index,
-      number: Math.random(),
-      assignees: undefined,
-      body: `Automatically Generated Issue No id: ${index}.`,
-      created_at: created_and_updated_date,
-      labels: undefined,
-      title: `Autogen Issue ${index}`,
-      updated_at: created_and_updated_date,
-      url: '',
-      user: undefined,
-      comments: undefined
-    });
-  });
+  return new Array<GithubIssue>(10).map(
+    (value: GithubIssue, index: number, array: GithubIssue[]) =>
+      new GithubIssue({
+        id: index,
+        number: Math.random(),
+        assignees: undefined,
+        body: `Automatically Generated Issue No id: ${index}.`,
+        created_at: created_and_updated_date,
+        labels: undefined,
+        title: `Autogen Issue ${index}`,
+        updated_at: created_and_updated_date,
+        url: '',
+        user: undefined,
+        comments: undefined
+      })
+  );
 }
 
 /**

src/app/core/models/github/github-graphql.issue.ts

@@ -20,10 +20,12 @@ export class GithubGraphqlIssue extends GithubIssue {
       },
       assignees: flattenEdges(issue.assignees.edges),
       labels: flattenEdges(issue.labels.edges),
-      comments: flattenEdges(issue.comments.edges, (node) => ({
-        ...node,
-        id: node.databaseId
-      }))
+      comments: flattenEdges(issue.comments.edges, (node) => {
+        return {
+          ...node,
+          id: node.databaseId
+        };
+      })
     });
   }
 }

src/app/core/models/github/github-issue.model.ts

@@ -58,9 +58,7 @@ export class GithubIssue {
       } else {
         const order = GithubLabel.LABEL_ORDER[name];
         return labels
-          .reduce((result, currLabel) => {
-            return order[currLabel.getValue()] > order[result.getValue()] ? currLabel : result;
-          })
+          .reduce((result, currLabel) => (order[currLabel.getValue()] > order[result.getValue()] ? currLabel : result))
           .getValue();
       }
     }

src/app/core/models/templates/tester-response-template.model.ts

@@ -66,6 +66,7 @@ interface TesterResponseParseResult {
 }
 
 const GITHUB_UI_EDIT_WARNING =
+  // eslint-disable-next-line max-len
   '[IMPORTANT!: Please do not edit or reply to this comment using the GitHub UI. You can respond to it using CATcher during the next phase of the PE]';
 const TESTER_RESPONSES_HEADER = '# Items for the Tester to Verify';
 const DISAGREE_CHECKBOX_DESCRIPTION = 'I disagree';

src/app/core/services/auth.service.ts

@@ -152,6 +152,7 @@ export class AuthService {
     this.generateStateString();
     this.redirectToOAuthPage(
       encodeURI(
+        // eslint-disable-next-line max-len
         `${AppConfig.githubUrl}/login/oauth/authorize?client_id=${AppConfig.clientId}&scope=${githubRepoPermission},read:user&state=${this.state}`
       )
     );

src/app/core/services/data.service.ts

@@ -50,9 +50,7 @@ export class DataService {
    */
   getDataFile(): Observable<{}> {
     return this.githubService.fetchDataFile().pipe(
-      map((allCsvDataWrapper: {}) => {
-        return this.constructData(allCsvDataWrapper);
-      }),
+      map((allCsvDataWrapper: {}) => this.constructData(allCsvDataWrapper)),
       map((jsonData: TabulatedUserData) => {
         this.dataFile = <DataFile>{
           teamStructure: this.extractTeamStructure(jsonData)