Type check

.github/actions/setup-ci/action.yml

@@ -5,7 +5,7 @@ inputs:
   node-version:
     description: Node.js version to install.
     required: false
-    default: '22'
+    default: '22.x'
 
 runs:
   using: composite

.github/workflows/lint-and-typecheck.yml

@@ -0,0 +1,29 @@
+name: Lint & Type Check
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup CI
+        uses: ./.github/actions/setup-ci
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Run ESLint
+        run: npm run lint
+
+      - name: Run TypeScript type check
+        run: npm run type-check

.husky/pre-commit

@@ -0,0 +1 @@
+npm run lint-staged

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "*.ts": ["eslint --fix", "prettier --write"]
+}

.prettierrc

@@ -1,11 +1,20 @@
 {
   "printWidth": 100,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
   "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
   "overrides": [
     {
       "files": "*.html",
       "options": {
-        "parser": "angular"
+        "parser": "angular",
+        "printWidth": 100
       }
     }
   ]

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "cli": {
     "packageManager": "npm",
-    "schematicCollections": ["angular-eslint"]
+    "schematicCollections": ["@angular-eslint/schematics"]
   },
   "newProjectRoot": "projects",
   "projects": {

eslint.config.js

@@ -1,19 +1,34 @@
-// @ts-check
-const eslint = require('@eslint/js');
-const { defineConfig } = require('eslint/config');
-const tseslint = require('typescript-eslint');
-const angular = require('angular-eslint');
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import angularEslintPlugin from '@angular-eslint/eslint-plugin';
+import angularEslintTemplatePlugin from '@angular-eslint/eslint-plugin-template';
+import angularEslintTemplateParser from '@angular-eslint/template-parser';
 
-module.exports = defineConfig([
+export default [
+  {
+    ignores: ['node_modules', 'dist', 'coverage', '.angular', 'storybook-static'],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended.map((config) => ({
+    ...config,
+    files: ['**/*.ts'],
+  })),
+  ...tseslint.configs.stylistic.map((config) => ({
+    ...config,
+    files: ['**/*.ts'],
+  })),
   {
     files: ['**/*.ts'],
-    extends: [
-      eslint.configs.recommended,
-      tseslint.configs.recommended,
-      tseslint.configs.stylistic,
-      angular.configs.tsRecommended,
-    ],
-    processor: angular.processInlineTemplates,
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        projectService: true,
+      },
+    },
+    plugins: {
+      '@angular-eslint': angularEslintPlugin,
+      '@typescript-eslint': tseslint.plugin,
+    },
     rules: {
       '@angular-eslint/directive-selector': [
         'error',
@@ -33,9 +48,45 @@ module.exports = defineConfig([
       ],
     },
   },
+  {
+    files: ['**/*.spec.ts'],
+    languageOptions: {
+      globals: {
+        describe: 'readonly',
+        it: 'readonly',
+        beforeEach: 'readonly',
+        expect: 'readonly',
+      },
+    },
+  },
   {
     files: ['**/*.html'],
-    extends: [angular.configs.templateRecommended, angular.configs.templateAccessibility],
-    rules: {},
+    languageOptions: {
+      parser: angularEslintTemplateParser,
+    },
+    plugins: {
+      '@angular-eslint/template': angularEslintTemplatePlugin,
+    },
+    rules: {
+      // recommended
+      '@angular-eslint/template/banana-in-box': 'error',
+      '@angular-eslint/template/eqeqeq': 'error',
+      '@angular-eslint/template/no-negated-async': 'error',
+      '@angular-eslint/template/prefer-control-flow': 'error',
+      // accessibility
+      '@angular-eslint/template/alt-text': 'error',
+      '@angular-eslint/template/click-events-have-key-events': 'error',
+      '@angular-eslint/template/elements-content': 'error',
+      '@angular-eslint/template/interactive-supports-focus': 'error',
+      '@angular-eslint/template/label-has-associated-control': 'error',
+      '@angular-eslint/template/mouse-events-have-key-events': 'error',
+      '@angular-eslint/template/no-autofocus': 'error',
+      '@angular-eslint/template/no-distracting-elements': 'error',
+      '@angular-eslint/template/role-has-required-aria': 'error',
+      '@angular-eslint/template/table-scope': 'error',
+      '@angular-eslint/template/valid-aria': 'error',
+      // extra
+      '@angular-eslint/template/use-track-by-function': 'warn',
+    },
   },
-]);
+];