feat: fix linting and add strict mode

Author: ju4n97

.eslintignore

@@ -1 +1,5 @@
 node_modules/*
+package.json
+package-lock.json
+yarn.lock
+dist

.eslintrc

@@ -17,14 +17,13 @@
         "createDefaultProgram": true
       },
       "extends": [
-        "plugin:@angular-eslint/recommended"
+        "plugin:@angular-eslint/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier/@typescript-eslint",
+        "plugin:prettier/recommended",
+        "prettier/@typescript-eslint"
       ],
       "rules": {
-
-        /**
-         * Any TypeScript source code (NOT TEMPLATE) related rules you wish to use/reconfigure over and above the
-         * recommended set provided by the @angular-eslint project would go here.
-         */
          "@angular-eslint/component-class-suffix": [
           "error",
           {
@@ -42,7 +41,9 @@
           "error",
           { "type": "element", "prefix": "app", "style": "kebab-case" }
         ],
-        "@angular-eslint/no-empty-lifecycle-method": "off"
+        "@angular-eslint/no-empty-lifecycle-method": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-unused-vars": "off"
       }
     },
     {

.prettierrc

@@ -1,4 +1,9 @@
 {
+  "semi": true,
+  "trailingComma": "all",
   "singleQuote": true,
-  "printWidth": 80
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "auto"
 }

.vscode/settings.json

@@ -1,14 +1,35 @@
 {
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": false,
+    "source.fixAll": true,
+  },
+  "css.validate": false,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "html"
+  ],
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.codeActionsOnSave": {
-        "source.fixAll": true,
-        "source.organizeImports": true
+      "source.fixAll.eslint": true
     },
-    "css.validate": false,
-    "eslint.validate": [
-      "javascript",
-      "javascriptreact",
-      "typescript",
-      "typescriptreact",
-      "html"
-    ],
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "editor.formatOnSave": true
+  },
+  "[json]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "editor.formatOnSave": true
+  }
 }

README.md

@@ -4,6 +4,7 @@ Angular starter for enterprise-grade front-end projects, built under a clean arc
 
 ## ⚗️ Features
 
+- Strict mode.
 - Lazy loading.
 - Smart and pure components pattern.
 - Components types (e.g. component, page).
@@ -19,7 +20,7 @@ Angular starter for enterprise-grade front-end projects, built under a clean arc
 - Scalable CSS architecture with [ITCSS](https://itcss.io/).
 - [Lighthouse](https://developers.google.com/web/tools/lighthouse) reports improved.
 - Migration from TSLint to ESLint.
-- Husky hooks
+- ESLint migration.
 
 ## 📄 Pages
 

angular.json

@@ -6,6 +6,9 @@
     "angular-boilerplate": {
       "projectType": "application",
       "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        },
         "@schematics/angular:component": {
           "style": "scss"
         }
@@ -47,21 +50,20 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                 }
               ],
               "serviceWorker": true,

package.json

@@ -2,6 +2,7 @@
   "name": "angular-boilerplate",
   "version": "0.0.0",
   "private": true,
+  "sideEffects": false,
   "scripts": {
     "ng": "ng",
     "dev": "ng serve -o",
@@ -27,6 +28,8 @@
     ]
   },
   "dependencies": {
+    "@angular-eslint/builder": "^1.1.0",
+    "@angular-eslint/template-parser": "^1.1.0",
     "@angular/animations": "~11.0.0",
     "@angular/common": "~11.0.0",
     "@angular/compiler": "~11.0.0",
@@ -44,24 +47,21 @@
   "devDependencies": {
     "@angular-builders/custom-webpack": "^11.0.0",
     "@angular-devkit/build-angular": "~0.1101.2",
-    "@angular-eslint/builder": "1.1.0",
-    "@angular-eslint/eslint-plugin": "1.1.0",
-    "@angular-eslint/eslint-plugin-template": "1.1.0",
-    "@angular-eslint/schematics": "^0.8.0-beta.7",
-    "@angular-eslint/template-parser": "1.1.0",
+    "@angular-eslint/eslint-plugin": "^1.1.0",
+    "@angular-eslint/eslint-plugin-template": "^1.1.0",
     "@angular/cli": "~11.1.2",
     "@angular/compiler-cli": "~11.0.0",
     "@angular/localize": "^11.0.0",
     "@fullhuman/postcss-purgecss": "^3.1.3",
     "@types/jasmine": "~3.6.3",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^14.14.22",
-    "@typescript-eslint/eslint-plugin": "4.14.2",
-    "@typescript-eslint/parser": "4.14.2",
+    "@typescript-eslint/eslint-plugin": "^4.14.2",
     "autoprefixer": "^10.2.4",
     "eslint": "^7.19.0",
-    "eslint-plugin-jsdoc": "31.6.0",
-    "eslint-plugin-prefer-arrow": "1.2.3",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-angular": "^4.0.1",
+    "eslint-plugin-prettier": "^3.3.1",
     "husky": "^4.3.8",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~6.0.0",
@@ -76,6 +76,8 @@
     "postcss-import": "^12.0.1",
     "postcss-loader": "^4.2.0",
     "postcss-scss": "^3.0.4",
+    "prettier": "^2.2.1",
+    "prettier-eslint": "^12.0.0",
     "protractor": "~7.0.0",
     "ts-node": "~9.1.1",
     "typescript": "~4.0.5",

src/app/+auth/pages/forgot-password-email-sent/forgot-password-email-sent.page.spec.ts

@@ -6,12 +6,13 @@ describe('ForgotPasswordEmailSentPage', () => {
   let component: ForgotPasswordEmailSentPage;
   let fixture: ComponentFixture<ForgotPasswordEmailSentPage>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ForgotPasswordEmailSentPage ]
-    })
-    .compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ForgotPasswordEmailSentPage],
+      }).compileComponents();
+    }),
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ForgotPasswordEmailSentPage);

src/app/+auth/pages/forgot-password-email-sent/forgot-password-email-sent.page.ts

@@ -2,13 +2,10 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   templateUrl: './forgot-password-email-sent.page.html',
-  styleUrls: ['./forgot-password-email-sent.page.scss']
+  styleUrls: ['./forgot-password-email-sent.page.scss'],
 })
 export class ForgotPasswordEmailSentPage implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }

src/app/+auth/pages/forgot-password/forgot-password.page.spec.ts

@@ -6,12 +6,13 @@ describe('ForgotPasswordPage', () => {
   let component: ForgotPasswordPage;
   let fixture: ComponentFixture<ForgotPasswordPage>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ForgotPasswordPage ]
-    })
-    .compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ForgotPasswordPage],
+      }).compileComponents();
+    }),
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ForgotPasswordPage);

src/app/+auth/pages/forgot-password/forgot-password.page.ts

@@ -2,13 +2,10 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   templateUrl: './forgot-password.page.html',
-  styleUrls: ['./forgot-password.page.scss']
+  styleUrls: ['./forgot-password.page.scss'],
 })
 export class ForgotPasswordPage implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }

src/app/+auth/pages/password-reset-failed/password-reset-failed.page.spec.ts

@@ -6,12 +6,13 @@ describe('PasswordResetFailedPage', () => {
   let component: PasswordResetFailedPage;
   let fixture: ComponentFixture<PasswordResetFailedPage>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PasswordResetFailedPage ]
-    })
-    .compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [PasswordResetFailedPage],
+      }).compileComponents();
+    }),
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(PasswordResetFailedPage);

src/app/+auth/pages/password-reset-failed/password-reset-failed.page.ts

@@ -2,13 +2,10 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   templateUrl: './password-reset-failed.page.html',
-  styleUrls: ['./password-reset-failed.page.scss']
+  styleUrls: ['./password-reset-failed.page.scss'],
 })
 export class PasswordResetFailedPage implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }

src/app/+auth/pages/password-reset-succeeded/password-reset-succeeded.page.spec.ts

@@ -6,12 +6,13 @@ describe('PasswordResetSucceededPage', () => {
   let component: PasswordResetSucceededPage;
   let fixture: ComponentFixture<PasswordResetSucceededPage>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PasswordResetSucceededPage ]
-    })
-    .compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [PasswordResetSucceededPage],
+      }).compileComponents();
+    }),
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(PasswordResetSucceededPage);

src/app/+auth/pages/password-reset/password-reset.page.spec.ts

@@ -6,12 +6,13 @@ describe('PasswordResetPage', () => {
   let component: PasswordResetPage;
   let fixture: ComponentFixture<PasswordResetPage>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PasswordResetPage ]
-    })
-    .compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [PasswordResetPage],
+      }).compileComponents();
+    }),
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(PasswordResetPage);

src/app/+auth/pages/password-reset/password-reset.page.ts

@@ -2,13 +2,10 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   templateUrl: './password-reset.page.html',
-  styleUrls: ['./password-reset.page.scss']
+  styleUrls: ['./password-reset.page.scss'],
 })
 export class PasswordResetPage implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }

src/app/+auth/pages/sign-in/sign-in.page.ts

@@ -13,7 +13,7 @@ export class SignInPage implements OnInit {
   constructor(
     private router: Router,
     private activatedRoute: ActivatedRoute,
-    private authService: AuthService
+    private authService: AuthService,
   ) {
     this.returnUrl =
       this.activatedRoute.snapshot.queryParamMap.get('returnUrl') ||
@@ -22,7 +22,7 @@ export class SignInPage implements OnInit {
 
   ngOnInit(): void {}
 
-  onClickSignIn() {
+  onClickSignIn(): void {
     this.authService.signIn();
     this.router.navigate([this.returnUrl]);
   }