🔧 Add ESLint rules

.eslintrc.json

@@ -16,7 +16,7 @@
         "createDefaultProgram": true
       },
       "extends": [
-        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/all",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
@@ -36,6 +36,7 @@
             "style": "kebab-case"
           }
         ]
+        // Custom rules
       }
     },
     {
@@ -43,9 +44,12 @@
         "*.html"
       ],
       "extends": [
-        "plugin:@angular-eslint/template/recommended"
+        "plugin:@angular-eslint/template/all"
       ],
-      "rules": {}
+      "rules": {
+        // Custom rules
+        "@angular-eslint/template/i18n": "off"
+      }
     }
   ]
 }

.vscode/settings.json

@@ -1,12 +1,27 @@
 {
   "editor.codeActionsOnSave": {
     "source.fixAll": true,
+    "source.fixAll.eslint": true,
     "source.organizeImports": true
   },
   "editor.formatOnSave": true,
   "editor.rulers": [
     140
   ],
+  "eslint.options": {
+    "extensions": [
+      ".ts",
+      ".html"
+    ]
+  },
+  "eslint.packageManager": "yarn",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "html"
+  ],
   "files.associations": {
     ".ipfs-npmrc": "json"
   },

src/app/app.component.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ThemeService } from './services/theme.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   constructor(

src/app/app.module.ts

@@ -15,14 +15,12 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    CommonModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
     AppRoutingModule,
-
-    // Material
+    BrowserAnimationsModule,
+    BrowserModule,
+    CommonModule,
     FlexLayoutModule,
+    HttpClientModule,
     MatButtonModule,
     MatIconModule,
     MatToolbarModule,

src/app/pages/pages.component.ts

@@ -1,5 +1,5 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, EventEmitter, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { Subscription } from 'rxjs';
@@ -13,7 +13,8 @@ import { ThemeService } from '../services/theme.service';
 @Component({
   selector: 'app-pages',
   templateUrl: './pages.component.html',
-  styleUrls: ['./pages.component.scss']
+  styleUrls: ['./pages.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PagesComponent implements OnInit, OnDestroy {
 

src/polyfills.ts

@@ -45,7 +45,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js';  // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 
 /***************************************************************************************************

src/styles.scss

@@ -1,5 +1,5 @@
 // Custom Theming for Angular Material
-@use '@angular/material' as mat;
+@use '@angular/material'as mat;
 // For more information: https://material.angular.io/guide/theming
 // Plus imports for other components in your app.
 

src/styles/ipfs-palettes.scss

@@ -1,4 +1,4 @@
-@use '@angular/material' as mat;
+@use '@angular/material'as mat;
 @import 'ipfs-colours.scss';
 
 $ipfs-primary: mat.define-palette($ipfs-colour-navy, 'default', 'lighter', 'darker');

src/styles/ipfs-themes.scss

@@ -1,4 +1,4 @@
-@use '@angular/material' as mat;
+@use '@angular/material'as mat;
 @import 'ipfs-palettes.scss';
 
 $ipfs-light-theme: mat.define-light-theme($ipfs-primary, $ipfs-accent, $ipfs-warn);

src/test.ts

@@ -1,11 +1,11 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
+import 'zone.js/testing';
 
 declare const require: any;
 
@@ -13,7 +13,7 @@ declare const require: any;
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(), {
-    teardown: { destroyAfterEach: false }
+  teardown: { destroyAfterEach: false }
 }
 );
 // Then we find all the tests.

tsconfig.json

@@ -6,8 +6,22 @@
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "useUnknownInCatchVariables": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,