feat(tooling): add lint-staged with Prettier + ESLint on pre-commit

- Install prettier, lint-staged, eslint-config-prettier
- Configure lint-staged in package.json: Prettier write on staged files, ESLint check on .ts/.html
- Add eslint-config-prettier to .eslintrc.json extends to disable formatting rules that conflict with Prettier
- Configure no-unused-vars to allow _ prefix (intentional destructuring pattern)
- Replace manual prettier/git update-index lines in pre-commit hook with npx lint-staged
- Fix pre-existing ESLint errors: remove unused imports in herowars-guildraid, fix useless escapes in middleware.ts, fix eslint-disable comment in utilityTypes.ts

.eslintrc.json

@@ -1,19 +1,21 @@
 {
     "root": true,
-    "ignorePatterns": [
+    "ignorePatterns": ["projects/**/*"],
-        "projects/**/*"
+    "overrides": [
-    ],
+        {
-    "overrides": [{
+            "files": ["*.ts"],
-            "files": [
-                "*.ts"
-            ],
             "extends": [
                 "eslint:recommended",
                 "plugin:@typescript-eslint/recommended",
                 "plugin:@angular-eslint/recommended",
-                "plugin:@angular-eslint/template/process-inline-templates"
+                "plugin:@angular-eslint/template/process-inline-templates",
+                "prettier"
             ],
             "rules": {
+                "@typescript-eslint/no-unused-vars": [
+                    "error",
+                    { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+                ],
                 "@angular-eslint/directive-selector": [
                     "error",
                     {
@@ -33,13 +35,8 @@
             }
         },
         {
-            "files": [
+            "files": ["*.html"],
-                "*.html"
+            "extends": ["plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"],
-            ],
-            "extends": [
-                "plugin:@angular-eslint/template/recommended",
-                "plugin:@angular-eslint/template/accessibility"
-            ],
             "rules": {}
         }
     ]

.husky/pre-commit

@@ -1,3 +1,2 @@
 npm test -- --watch=false
-#prettier $(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g') --write --ignore-unknown
+npx lint-staged
-#git update-index --again

package-lock.json

@@ -43,12 +43,15 @@
                 "@typescript-eslint/eslint-plugin": "7.2.0",
                 "@typescript-eslint/parser": "7.2.0",
                 "eslint": "^8.57.0",
+                "eslint-config-prettier": "^10.1.8",
                 "jasmine-core": "~5.1.0",
                 "karma": "~6.4.0",
                 "karma-chrome-launcher": "~3.2.0",
                 "karma-coverage": "~2.2.0",
                 "karma-jasmine": "~5.1.0",
                 "karma-jasmine-html-reporter": "~2.1.0",
+                "lint-staged": "^16.4.0",
+                "prettier": "^3.8.3",
                 "typescript": "~5.5.4"
             },
             "engines": {
@@ -7736,6 +7739,21 @@
                 "url": "https://opencollective.com/eslint"
             }
         },
+        "node_modules/eslint-config-prettier": {
+            "version": "10.1.8",
+            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+            "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+            "dev": true,
+            "bin": {
+                "eslint-config-prettier": "bin/cli.js"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint-config-prettier"
+            },
+            "peerDependencies": {
+                "eslint": ">=7.0.0"
+            }
+        },
         "node_modules/eslint-scope": {
             "version": "8.4.0",
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
@@ -9945,6 +9963,192 @@
             "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
             "dev": true
         },
+        "node_modules/lint-staged": {
+            "version": "16.4.0",
+            "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.4.0.tgz",
+            "integrity": "sha512-lBWt8hujh/Cjysw5GYVmZpFHXDCgZzhrOm8vbcUdobADZNOK/bRshr2kM3DfgrrtR1DQhfupW9gnIXOfiFi+bw==",
+            "dev": true,
+            "dependencies": {
+                "commander": "^14.0.3",
+                "listr2": "^9.0.5",
+                "picomatch": "^4.0.3",
+                "string-argv": "^0.3.2",
+                "tinyexec": "^1.0.4",
+                "yaml": "^2.8.2"
+            },
+            "bin": {
+                "lint-staged": "bin/lint-staged.js"
+            },
+            "engines": {
+                "node": ">=20.17"
+            },
+            "funding": {
+                "url": "https://opencollective.com/lint-staged"
+            }
+        },
+        "node_modules/lint-staged/node_modules/ansi-regex": {
+            "version": "6.2.2",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+            "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+            "dev": true,
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+            }
+        },
+        "node_modules/lint-staged/node_modules/ansi-styles": {
+            "version": "6.2.3",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+            "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+            "dev": true,
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/lint-staged/node_modules/cli-truncate": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.2.0.tgz",
+            "integrity": "sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==",
+            "dev": true,
+            "dependencies": {
+                "slice-ansi": "^8.0.0",
+                "string-width": "^8.2.0"
+            },
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/lint-staged/node_modules/cli-truncate/node_modules/string-width": {
+            "version": "8.2.0",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.0.tgz",
+            "integrity": "sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==",
+            "dev": true,
+            "dependencies": {
+                "get-east-asian-width": "^1.5.0",
+                "strip-ansi": "^7.1.2"
+            },
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/lint-staged/node_modules/commander": {
+            "version": "14.0.3",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
+            "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==",
+            "dev": true,
+            "engines": {
+                "node": ">=20"
+            }
+        },
+        "node_modules/lint-staged/node_modules/eventemitter3": {
+            "version": "5.0.4",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+            "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+            "dev": true
+        },
+        "node_modules/lint-staged/node_modules/is-fullwidth-code-point": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+            "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
+            "dev": true,
+            "dependencies": {
+                "get-east-asian-width": "^1.3.1"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/lint-staged/node_modules/listr2": {
+            "version": "9.0.5",
+            "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
+            "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
+            "dev": true,
+            "dependencies": {
+                "cli-truncate": "^5.0.0",
+                "colorette": "^2.0.20",
+                "eventemitter3": "^5.0.1",
+                "log-update": "^6.1.0",
+                "rfdc": "^1.4.1",
+                "wrap-ansi": "^9.0.0"
+            },
+            "engines": {
+                "node": ">=20.0.0"
+            }
+        },
+        "node_modules/lint-staged/node_modules/picomatch": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+            "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+            "dev": true,
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/lint-staged/node_modules/slice-ansi": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-8.0.0.tgz",
+            "integrity": "sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==",
+            "dev": true,
+            "dependencies": {
+                "ansi-styles": "^6.2.3",
+                "is-fullwidth-code-point": "^5.1.0"
+            },
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+            }
+        },
+        "node_modules/lint-staged/node_modules/strip-ansi": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+            "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+            "dev": true,
+            "dependencies": {
+                "ansi-regex": "^6.2.2"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+            }
+        },
+        "node_modules/lint-staged/node_modules/wrap-ansi": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+            "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+            "dev": true,
+            "dependencies": {
+                "ansi-styles": "^6.2.1",
+                "string-width": "^7.0.0",
+                "strip-ansi": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+            }
+        },
         "node_modules/listr2": {
             "version": "8.2.4",
             "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.2.4.tgz",
@@ -11940,6 +12144,21 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/prettier": {
+            "version": "3.8.3",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz",
+            "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
+            "dev": true,
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
         "node_modules/proc-log": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.2.0.tgz",
@@ -13210,6 +13429,15 @@
                 "safe-buffer": "~5.2.0"
             }
         },
+        "node_modules/string-argv": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+            "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+            "dev": true,
+            "engines": {
+                "node": ">=0.6.19"
+            }
+        },
         "node_modules/string-width": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
@@ -13514,6 +13742,15 @@
             "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
             "dev": true
         },
+        "node_modules/tinyexec": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.1.tgz",
+            "integrity": "sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg==",
+            "dev": true,
+            "engines": {
+                "node": ">=18"
+            }
+        },
         "node_modules/tinyglobby": {
             "version": "0.2.15",
             "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -14911,6 +15148,21 @@
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
             "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
         },
+        "node_modules/yaml": {
+            "version": "2.8.3",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
+            "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
+            "dev": true,
+            "bin": {
+                "yaml": "bin.mjs"
+            },
+            "engines": {
+                "node": ">= 14.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/eemeli"
+            }
+        },
         "node_modules/yargs": {
             "version": "17.7.2",
             "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",

package.json

@@ -56,12 +56,26 @@
         "@typescript-eslint/eslint-plugin": "7.2.0",
         "@typescript-eslint/parser": "7.2.0",
         "eslint": "^8.57.0",
+        "eslint-config-prettier": "^10.1.8",
         "jasmine-core": "~5.1.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
+        "lint-staged": "^16.4.0",
+        "prettier": "^3.8.3",
         "typescript": "~5.5.4"
+    },
+    "lint-staged": {
+        "*.{ts,html,scss,json,md}": [
+            "prettier --write"
+        ],
+        "*.ts": [
+            "eslint --max-warnings=0"
+        ],
+        "*.html": [
+            "eslint --max-warnings=0"
+        ]
     }
 }

src/app/components/herowars-guildraid/herowars-guildraid.component.ts

@@ -14,9 +14,7 @@ import { MatStepperIntl, MatStepperModule } from '@angular/material/stepper';
 
 import { ListErrorsComponent } from '@components/shared';
 import { Errors } from '@models';
-import { HWGuildRaid, HWGuildRaidAttacker, HWGuildRaidAttackers, HWGuildRaidStage, HWMember } from '@models/herowars';
+import { HWGuildRaid, HWGuildRaidStage, HWMember } from '@models/herowars';
-
-import guildRaids from 'src/files-data/hw-guild-raids.json'; // page Asgard -> Guild Raid -> Log
 
 @Injectable()
 export class GuildRaidStepperIntl extends MatStepperIntl {
@@ -33,25 +31,26 @@ export class GuildRaidStepperIntl extends MatStepperIntl {
         },
     ],
     imports: [
-        DatePipe, FormsModule, ListErrorsComponent,
+        DatePipe,
-        MatButtonModule, MatCardModule, MatDividerModule, MatFormFieldModule,
+        FormsModule,
-        MatIconModule, MatInputModule, MatStepperModule
+        ListErrorsComponent,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatStepperModule,
     ],
     templateUrl: './herowars-guildraid.component.html',
     styleUrl: './herowars-guildraid.component.scss',
     animations: [
         trigger('flyInOut', [
             state('in', style({ transform: 'translateY(0)' })),
-            transition('void => *', [
+            transition('void => *', [style({ transform: 'translateY(-100%)' }), animate(200)]),
-                style({ transform: 'translateY(-100%)' }),
+            transition('* => void', [style({ transform: 'translateY(100%)' }), animate(200)]),
-                animate(200)
         ]),
-            transition('* => void', [
+    ],
-                style({ transform: 'translateY(100%)' }),
-                animate(200)
-            ])
-        ])
-    ]
 })
 export class HerowarsGuildraidComponent implements OnInit {
     public title = 'Guild Raids';
@@ -68,12 +67,10 @@ export class HerowarsGuildraidComponent implements OnInit {
     private _raidStages: HWGuildRaidStage[] = [
         { num: 1, name: 'Stage 1', maxPower: 320000, duration: 8, startTime: 0, endTime: 0 },
         { num: 2, name: 'Stage 2', maxPower: 500000, duration: 8, startTime: 0, endTime: 0 },
-        { num: 3, name: 'Stage 3', maxPower: 0, duration: 0, startTime: 0, endTime: 0 }
+        { num: 3, name: 'Stage 3', maxPower: 0, duration: 0, startTime: 0, endTime: 0 },
     ];
 
-    constructor(
+    constructor(private _titleService: Title) {}
-        private _titleService: Title
-    ) { }
 
     ngOnInit() {
         this._titleService.setTitle(this.title);
@@ -81,7 +78,7 @@ export class HerowarsGuildraidComponent implements OnInit {
             data.raids = [];
             data.raidsInfo = {
                 variationAvg: 0,
-                variationSum: 0
+                variationSum: 0,
             };
             return data;
         });
@@ -90,5 +87,4 @@ export class HerowarsGuildraidComponent implements OnInit {
     getMembers(): HWMember[] {
         return this._guildMembers;
     }
-
 }

src/middleware.ts

@@ -1,15 +1,15 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextRequest, NextResponse } from 'next/server';
-import { getSession } from "./utils/auth/session";
+import { getSession } from './utils/auth/session';
 
 export const config = {
-  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
+    matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
 };
 
 const publicRoutes = [
-  /^\/article\/[^\/]+?\/?$/, // /article/sample-slug
+    /^\/article\/[^/]+?\/?$/, // /article/sample-slug
     /^\/login\/?$/,
-  /^\/profile\/[^\/]+?\/?$/, // /profile/sample-username
+    /^\/profile\/[^/]+?\/?$/, // /profile/sample-username
-  /^\/profile\/[^\/]+?\/favorites\/?$/, // /profile/sample-username/favorites
+    /^\/profile\/[^/]+?\/favorites\/?$/, // /profile/sample-username/favorites
     /^\/register\/?$/,
     /^\/$/,
 ] as const;
@@ -25,7 +25,7 @@ const isPrivateRoutes = (pathname: string) => {
 const middleware = async (req: NextRequest) => {
     const session = await getSession();
     if (isPrivateRoutes(req.nextUrl.pathname) && session == null) {
-    return NextResponse.redirect(new URL("/login", req.nextUrl));
+        return NextResponse.redirect(new URL('/login', req.nextUrl));
     }
 
     return NextResponse.next();

src/utils/types/utilityTypes.ts

@@ -1,7 +1,8 @@
-/* eslint @typescript-eslint/no-empty-object-type: off */
+/* eslint-disable @typescript-eslint/ban-types */
 export type FilterRequired<T extends Record<PropertyKey, unknown>> = {
     [P in keyof T as {} extends Pick<T, P> ? never : P]: T[P];
 };
+/* eslint-enable @typescript-eslint/ban-types */
 
 export type OptionalUndefined<T> = Omit<
     {