add prettier and lint and formart code

.claude/skills/ion-branch-cherry-pick/SKILL.md

@@ -10,11 +10,11 @@ This skill guides the process of propagating commits from `main` (Angular v21) t
 
 ## Branch Overview
 
-| Branch | Angular | Signals | `@if`/`@for` | Standalone | Tests |
-|---|---|---|---|---|---|
-| `main` | v21 | `input()` / `output()` | Yes | Default (no flag needed) | TestBed + `setInput()` |
-| `support/v19` | v19 | `input()` / `output()` | Yes | `standalone: true` required | TestBed + `setInput()` |
-| `support/v8` | v8 | `@Input()` / `@Output()` | `*ngIf` / `*ngFor` | NgModule-based | Angular Testing Library |
+| Branch        | Angular | Signals                  | `@if`/`@for`       | Standalone                  | Tests                   |
+| ------------- | ------- | ------------------------ | ------------------ | --------------------------- | ----------------------- |
+| `main`        | v21     | `input()` / `output()`   | Yes                | Default (no flag needed)    | TestBed + `setInput()`  |
+| `support/v19` | v19     | `input()` / `output()`   | Yes                | `standalone: true` required | TestBed + `setInput()`  |
+| `support/v8`  | v8      | `@Input()` / `@Output()` | `*ngIf` / `*ngFor` | NgModule-based              | Angular Testing Library |
 
 ## Step 1 — Identify what to cherry-pick
 
@@ -62,6 +62,7 @@ git cherry-pick --abort
 v19 supports signals and native control flow, but requires `standalone: true` explicitly.
 
 **Component metadata:**
+
 ```typescript
 // main (v21) — standalone is the default
 @Component({ selector: 'ion-foo', imports: [...], ... })
@@ -128,22 +129,19 @@ export class IonFooComponent implements OnInit, OnChanges { ... }
 
 #### TypeScript: Lifecycle hooks
 
-| v21 pattern | v8 equivalent |
-|---|---|
-| `effect(() => { ... })` | `ngOnChanges(changes: SimpleChanges)` or `ngOnInit()` |
-| `inject(Service)` | Constructor injection: `constructor(private svc: Service)` |
-| `host: { '[attr]': 'val()' }` | `@HostBinding('attr') get val() { ... }` |
+| v21 pattern                   | v8 equivalent                                              |
+| ----------------------------- | ---------------------------------------------------------- |
+| `effect(() => { ... })`       | `ngOnChanges(changes: SimpleChanges)` or `ngOnInit()`      |
+| `inject(Service)`             | Constructor injection: `constructor(private svc: Service)` |
+| `host: { '[attr]': 'val()' }` | `@HostBinding('attr') get val() { ... }`                   |
 
 #### Template: Control flow
 
 ```html
 <!-- v21 -->
-@if (loading()) { <span class="spinner"></span> }
-@for (item of items(); track item.id) { <li>{{ item.name }}</li> }
-@switch (type()) {
-  @case ('primary') { <span class="primary"></span> }
-  @default { <span></span> }
-}
+@if (loading()) { <span class="spinner"></span> } @for (item of items(); track item.id) {
+<li>{{ item.name }}</li>
+} @switch (type()) { @case ('primary') { <span class="primary"></span> } @default { <span></span> } }
 
 <!-- v8 -->
 <span *ngIf="loading" class="spinner"></span>
@@ -158,14 +156,10 @@ export class IonFooComponent implements OnInit, OnChanges { ... }
 
 ```html
 <!-- v21 — signals are called as functions -->
-<button [class]="'ion-btn-' + type()" [disabled]="disabled()">
-  {{ label() }}
-</button>
+<button [class]="'ion-btn-' + type()" [disabled]="disabled()">{{ label() }}</button>
 
 <!-- v8 — properties accessed directly -->
-<button [class]="'ion-btn-' + type" [disabled]="disabled">
-  {{ label }}
-</button>
+<button [class]="'ion-btn-' + type" [disabled]="disabled">{{ label }}</button>
 ```
 
 #### Tests

angular.json

@@ -28,10 +28,7 @@
           "builder": "@angular/build:karma",
           "options": {
             "tsConfig": "projects/ion/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
+            "polyfills": ["zone.js", "zone.js/testing"]
           }
         },
         "storybook": {
@@ -40,12 +37,7 @@
             "configDir": "projects/ion/.storybook",
             "browserTarget": "ion:build",
             "compodoc": true,
-            "compodocArgs": [
-              "-e",
-              "json",
-              "-d",
-              "projects/ion"
-            ],
+            "compodocArgs": ["-e", "json", "-d", "projects/ion"],
             "port": 6006
           }
         },
@@ -55,14 +47,18 @@
             "configDir": "projects/ion/.storybook",
             "browserTarget": "ion:build",
             "compodoc": true,
-            "compodocArgs": [
-              "-e",
-              "json",
-              "-d",
-              "projects/ion"
-            ],
+            "compodocArgs": ["-e", "json", "-d", "projects/ion"],
             "outputDir": "dist/storybook/ion"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ion/**/*.ts",
+              "projects/ion/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -83,9 +79,7 @@
             "outputPath": "dist/ion-test-app",
             "index": "projects/ion-test-app/src/index.html",
             "browser": "projects/ion-test-app/src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "projects/ion-test-app/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -94,9 +88,7 @@
                 "input": "projects/ion-test-app/public"
               }
             ],
-            "styles": [
-              "projects/ion-test-app/src/styles.scss"
-            ],
+            "styles": ["projects/ion-test-app/src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -141,10 +133,7 @@
         "test": {
           "builder": "@angular/build:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "projects/ion-test-app/tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -153,11 +142,18 @@
                 "input": "projects/ion-test-app/public"
               }
             ],
-            "styles": [
-              "projects/ion-test-app/src/styles.scss"
-            ],
+            "styles": ["projects/ion-test-app/src/styles.scss"],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ion-test-app/**/*.ts",
+              "projects/ion-test-app/**/*.html"
+            ]
+          }
         }
       }
     }
@@ -191,4 +187,4 @@
       "typeSeparator": "."
     }
   }
-}
+}

eslint.config.js

@@ -0,0 +1,36 @@
+// @ts-check
+const tseslint = require('typescript-eslint');
+const eslint = require('@eslint/js');
+const angular = require('angular-eslint');
+const eslintConfigPrettier = require('eslint-config-prettier');
+
+module.exports = tseslint.config(
+  {
+    files: ['**/*.ts'],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...angular.configs.tsRecommended,
+      eslintConfigPrettier,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        { type: 'attribute', prefix: ['ion', 'app'], style: 'camelCase' },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        { type: 'element', prefix: ['ion', 'app'], style: 'kebab-case' },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  },
+);