chore: add ESLint with angular-eslint and enable it in CI

.gitattributes

@@ -8,6 +8,7 @@
 *.html          text eol=lf
 *.scss          text eol=lf
 *.ts            text eol=lf
+*.mjs           text eol=lf
 
 *.ico           binary
 

.github/actions/ci/action.yml

@@ -21,11 +21,10 @@ runs:
           shell: bash
           run: pnpm format-check
 
-        #       TODO: Add ESLint
-        #        - name: Run ESLint
-        #          shell: bash
-        #          run: pnpm lint-ts
-        #
+        - name: Run ESLint
+          shell: bash
+          run: pnpm lint-ts
+
         #        TODO: Add Stylelint
         #        - name: Run Stylelint
         #          shell: bash

.lintstagedrc.json

@@ -1,4 +1,5 @@
 {
     "*.md": "markdownlint-cli2 --fix",
-    "*.{yml,yaml,json,html,scss,ts}": "prettier -w"
+    "*.{yml,yaml,json,html,scss}": "prettier -w",
+    "*.{mjs,ts}": ["prettier -w", "eslint --fix"]
 }

.prettierignore

@@ -8,6 +8,7 @@
 !*.html
 !*.scss
 !*.ts
+!*.mjs
 
 node_modules/
 .husky/_/

.vscode/extensions.json

@@ -2,6 +2,7 @@
     "recommendations": [
         "angular.ng-template",
         "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
         "editorconfig.editorconfig",
         "davidanson.vscode-markdownlint",
         "vitest.explorer",

.vscode/tasks.json

@@ -54,6 +54,13 @@
             "detail": "prettier -l .",
             "problemMatcher": []
         },
+        {
+            "type": "npm",
+            "script": "lint-ts",
+            "label": "lint-ts",
+            "detail": "ng lint",
+            "problemMatcher": []
+        },
         {
             "type": "npm",
             "script": "lint-md",

README.md

@@ -35,7 +35,21 @@ Configure your editor to run Prettier on save, so files match this repo's `.pret
 
 - **WebStorm**: open Settings → Languages & Frameworks → JavaScript → Prettier, and check **Run on save**. WebStorm auto-detects the local `prettier` package and this repo's config.
 
-ESLint isn't configured in this repo yet, so there's nothing to wire up on that front for either editor.
+This repo also lints `.ts` and `.html` files with ESLint (`eslint.config.mjs`, via `angular-eslint`). Configure your editor to surface lint errors inline, and optionally fix them on save:
+
+- **VS Code**: install the recommended [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) (also prompted via `.vscode/extensions.json`). It picks up `eslint.config.mjs` and shows lint errors inline automatically; to also fix them on save, add to your `settings.json`:
+
+  ```json
+  {
+      "editor.codeActionsOnSave": {
+          "source.fixAll.eslint": "explicit"
+      }
+  }
+  ```
+
+- **WebStorm**: open Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint, select **Automatic ESLint configuration**, and check **Run eslint --fix on save**.
+
+Run `pnpm lint-ts` to check the whole project from the command line.
 
 ## Usage
 
@@ -46,6 +60,7 @@ pnpm test          # Run unit tests in a real Chromium browser via Vitest + Play
 pnpm test-ci       # Run tests headless, as CI does
 pnpm format        # Format all files with Prettier
 pnpm format-check  # Check formatting without writing changes
+pnpm lint-ts       # Lint TypeScript and HTML files with ESLint
 pnpm lint-md       # Lint Markdown files with markdownlint-cli2
 ```
 
@@ -58,7 +73,7 @@ The dev server serves over HTTPS using the self-signed certificate in `.ssl/` an
 - **Windows**: edit `C:\Windows\System32\drivers\etc\hosts` in a text editor running as Administrator.
 - **macOS/Linux**: append the line with elevated privileges, e.g. `echo '127.0.0.1 localhost.www.dndmapp.dev' | sudo tee -a /etc/hosts`.
 
-Husky and lint-staged run Prettier and markdownlint on staged files before each commit. GitHub Actions runs the build, tests, and formatting/linting checks on every pull request and on pushes to `main` (see `.github/workflows/`), and validates commit messages against [Conventional Commits](https://www.conventionalcommits.org/) via commitlint.
+Husky and lint-staged run Prettier, ESLint, and markdownlint on staged files before each commit. GitHub Actions runs the build, tests, and formatting/linting checks on every pull request and on pushes to `main` (see `.github/workflows/`), and validates commit messages against [Conventional Commits](https://www.conventionalcommits.org/) via commitlint.
 
 ## Contributing
 

angular.json

@@ -3,7 +3,8 @@
     "version": 1,
     "cli": {
         "analytics": false,
-        "packageManager": "pnpm"
+        "packageManager": "pnpm",
+        "schematicCollections": ["angular-eslint"]
     },
     "schematics": {
         "@schematics/angular:component": {
@@ -152,6 +153,12 @@
                             "watch": false
                         }
                     }
+                },
+                "lint": {
+                    "builder": "@angular-eslint/builder:lint",
+                    "options": {
+                        "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+                    }
                 }
             }
         }

eslint.config.mjs

@@ -0,0 +1,53 @@
+import eslint from '@eslint/js';
+import angular from 'angular-eslint';
+import prettier from 'eslint-config-prettier';
+import { defineConfig, globalIgnores } from 'eslint/config';
+import tseslint from 'typescript-eslint';
+
+export default defineConfig([
+    globalIgnores(['.angular/', 'coverage/', 'dist/', 'reports/']),
+    {
+        files: ['**/*.mjs', '**/*.ts'],
+        extends: [eslint.configs.recommended],
+        rules: {},
+    },
+    {
+        files: ['**/*.ts'],
+        extends: [
+            tseslint.configs.recommendedTypeChecked,
+            tseslint.configs.stylisticTypeChecked,
+            angular.configs.tsRecommended,
+        ],
+        processor: angular.processInlineTemplates,
+        languageOptions: {
+            parserOptions: {
+                projectService: true,
+            },
+        },
+        rules: {
+            '@typescript-eslint/no-unused-vars': 'off',
+            '@angular-eslint/directive-selector': [
+                'error',
+                {
+                    type: 'attribute',
+                    prefix: 'app',
+                    style: 'camelCase',
+                },
+            ],
+            '@angular-eslint/component-selector': [
+                'error',
+                {
+                    type: 'element',
+                    prefix: 'app',
+                    style: 'kebab-case',
+                },
+            ],
+        },
+    },
+    {
+        files: ['**/*.html'],
+        extends: [angular.configs.templateRecommended, angular.configs.templateAccessibility],
+        rules: {},
+    },
+    prettier,
+]);

package.json

@@ -10,6 +10,7 @@
     "build": "ng build",
     "test": "ng test",
     "test-ci": "ng test -c ci",
+    "lint-ts": "ng lint",
     "lint-md": "markdownlint-cli2",
     "format": "prettier -w .",
     "format-check": "prettier -l ."
@@ -38,21 +39,27 @@
     "tslib": "~2.8.1"
   },
   "devDependencies": {
+    "@angular-eslint/builder": "~22.1.0",
     "@angular/build": "~22.0.8",
     "@angular/cli": "~22.0.8",
     "@angular/compiler-cli": "~22.0.8",
     "@commitlint/cli": "~21.2.1",
     "@commitlint/config-conventional": "~21.2.0",
+    "@eslint/js": "~10.0.1",
     "@vitest/browser-playwright": "~4.1.10",
     "@vitest/coverage-v8": "~4.1.10",
     "@vitest/ui": "~4.1.10",
+    "angular-eslint": "~22.1.0",
+    "eslint": "~10.8.0",
+    "eslint-config-prettier": "~10.1.8",
     "husky": "~9.1.7",
     "lint-staged": "~17.2.0",
     "markdownlint-cli2": "~0.23.2",
     "playwright": "~1.62.0",
     "prettier": "~3.9.6",
     "prettier-plugin-organize-imports": "~4.3.0",
     "typescript": "~6.0.3",
+    "typescript-eslint": "~8.65.0",
     "vitest": "~4.1.10"
   }
 }