34299da時点でのdiff

angular.json

@@ -20,9 +20,7 @@
             "outputPath": "dist/angular-ngrx-eslint-template",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -31,9 +29,7 @@
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": ["src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -78,10 +74,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -90,9 +83,7 @@
                 "input": "public"
               }
             ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         }

eslint.config.mjs

@@ -1,170 +1,165 @@
 import eslint from '@eslint/js';
 import tsEslint from 'typescript-eslint';
 import angular from 'angular-eslint';
-import gitignore from 'eslint-config-flat-gitignore'
+import gitignore from 'eslint-config-flat-gitignore';
 import ngrx from '@ngrx/eslint-plugin/v9/index.js';
-import stylisticJs from '@stylistic/eslint-plugin-js'
-import eslintConfigPrettier from "eslint-config-prettier";
+import stylisticJs from '@stylistic/eslint-plugin-js';
+import eslintConfigPrettier from 'eslint-config-prettier';
 
 export default tsEslint.config(
   gitignore(),
   eslintConfigPrettier,
   // eslint typescript-eslint recommended config
   {
-    files           : [ '**/*.ts' ],
-    languageOptions : {
-      parser        : tsEslint.parser,
-      parserOptions : {
-        project: './tsconfig.json',
+    files: ['**/*.ts'],
+    languageOptions: {
+      parser: tsEslint.parser,
+      parserOptions: {
+        project: './tsconfig.json'
       }
     },
     extends: [
       eslint.configs.recommended,
       ...tsEslint.configs.strict,
-      ...tsEslint.configs.stylistic,
-    ],
+      ...tsEslint.configs.stylistic
+    ]
   },
 
   // eslint stylistic
   {
-    files:['**/*.ts'],
+    files: ['**/*.ts'],
     plugins: {
-      '@stylistic/js': stylisticJs,
+      '@stylistic/js': stylisticJs
     },
     rules: {
-      '@stylistic/js/array-bracket-spacing' : [ "error", "always" ],
-      '@stylistic/js/arrow-spacing'         : 'error',
-      '@stylistic/js/block-spacing'         : 'error',
-      '@stylistic/js/array-bracket-newline' : [ "error", "consistent" ],
-      '@stylistic/js/brace-style'           : [
-        "error",
-        "1tbs",
+      '@stylistic/js/array-bracket-spacing': ['error', 'always'],
+      '@stylistic/js/arrow-spacing': 'error',
+      '@stylistic/js/block-spacing': 'error',
+      '@stylistic/js/array-bracket-newline': ['error', 'consistent'],
+      '@stylistic/js/brace-style': [
+        'error',
+        '1tbs',
         {
-          "allowSingleLine": true
+          allowSingleLine: true
         }
       ],
-      '@stylistic/js/comma-style'  : [ "error", "last" ],
-      '@stylistic/js/dot-location' : [ "error", "object" ],
-      "indent"                     : [ "error", 2 ],
-      "@stylistic/js/key-spacing"  : [ "error", {
-        "multiLine": {
-          "beforeColon" : false,
-          "afterColon"  : true
-
-        },
-        "align": {
-          "beforeColon" : true,
-          "afterColon"  : true,
-          "on"          : "colon"
+      '@stylistic/js/comma-style': ['error', 'last'],
+      '@stylistic/js/dot-location': ['error', 'object'],
+      indent: ['error', 2],
+      '@stylistic/js/key-spacing': [
+        'error',
+        {
+          multiLine: {
+            beforeColon: false,
+            afterColon: true
+          },
+          align: {
+            beforeColon: true,
+            afterColon: true,
+            on: 'colon'
+          }
         }
-      } ],
-      "@stylistic/js/max-len"           : [ "error", { "code": 80 } ],
-      "@stylistic/js/multiline-ternary" : [ "error", "always" ],
+      ],
+      '@stylistic/js/max-len': ['error', { code: 80 }],
+      '@stylistic/js/multiline-ternary': ['error', 'always']
     }
   },
 
   // eslint config
   {
-    files : [ "**/*.ts" ],
-    rules : {
-      quotes             : [ "error", "single" ],
-      'quote-props'      : [ 'error', 'consistent-as-needed', { 'keywords': true } ],
-      'object-shorthand' : [ 'error', 'always', { 'avoidQuotes': true } ],
+    files: ['**/*.ts'],
+    rules: {
+      quotes: ['error', 'single'],
+      'quote-props': ['error', 'consistent-as-needed', { keywords: true }],
+      'object-shorthand': ['error', 'always', { avoidQuotes: true }]
     }
   },
 
   // typescript-eslint config
   {
-    files : [ "**/*.ts" ],
-    rules : {
-      '@typescript-eslint/explicit-function-return-type' : 'error',
-      "@typescript-eslint/prefer-for-of"                 : "error",
-      "@typescript-eslint/consistent-type-definitions"   : [
-        "error",
-        "type"
-      ],
-      "@typescript-eslint/naming-convention": [
-        "error",
+    files: ['**/*.ts'],
+    rules: {
+      '@typescript-eslint/explicit-function-return-type': 'error',
+      '@typescript-eslint/prefer-for-of': 'error',
+      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+      '@typescript-eslint/naming-convention': [
+        'error',
         {
-          selector : [ "parameter" ],
-          format   : [ "camelCase" ]
+          selector: ['parameter'],
+          format: ['camelCase']
         },
         {
-          selector : [ "interface" ],
-          format   : [ "PascalCase" ],
-          prefix   : [ "I" ],
+          selector: ['interface'],
+          format: ['PascalCase'],
+          prefix: ['I']
         }
       ]
     }
   },
 
   // api file config
   {
-    files : [ "**/*.api.ts " ],
-    rules : {
-      "@typescript-eslint/naming-convention": [
-        "error",
+    files: ['**/*.api.ts '],
+    rules: {
+      '@typescript-eslint/naming-convention': [
+        'error',
         {
-          selector : [ "class" ],
-          format   : [ "PascalCase" ],
-          suffix   : [ "API" ],
+          selector: ['class'],
+          format: ['PascalCase'],
+          suffix: ['API']
         },
         {
-          selector : [ "classMethod" ],
-          format   : [ "camelCase" ],
+          selector: ['classMethod'],
+          format: ['camelCase']
         }
       ]
     }
   },
 
   // service file config
   {
-    files : [ "**/*.service.ts " ],
-    rules : {
-      "@typescript-eslint/naming-convention": [
-        "error",
+    files: ['**/*.service.ts '],
+    rules: {
+      '@typescript-eslint/naming-convention': [
+        'error',
         {
-          selector : [ "class" ],
-          format   : [ "PascalCase" ],
-          suffix   : [ "SERVICE" ],
+          selector: ['class'],
+          format: ['PascalCase'],
+          suffix: ['SERVICE']
         },
         {
-          selector : "classMethod",
-          format   : [ "camelCase" ],
+          selector: 'classMethod',
+          format: ['camelCase']
         }
       ]
     }
   },
 
   // angular ts config
   {
-    files   : [ '**/*.ts' ],
-    extends : [
-      ...angular.configs.tsRecommended,
-    ],
-    processor : angular.processInlineTemplates,
-    rules     : {
-      '@angular-eslint/no-input-rename': 'off',
-    },
+    files: ['**/*.ts'],
+    extends: [...angular.configs.tsRecommended],
+    processor: angular.processInlineTemplates,
+    rules: {
+      '@angular-eslint/no-input-rename': 'off'
+    }
   },
 
   // angular html config
   {
-    files   : [ '**/*.html' ],
-    extends : [
+    files: ['**/*.html'],
+    extends: [
       ...angular.configs.templateRecommended,
-      ...angular.configs.templateAccessibility,
+      ...angular.configs.templateAccessibility
     ],
     rules: {
-      '@angular-eslint/template/no-negated-async': 'off',
-    },
+      '@angular-eslint/template/no-negated-async': 'off'
+    }
   },
 
   // ngrx config
   {
-    files   : [ "**/*.ts" ],
-    extends : [
-      ...ngrx.configs.all,
-    ]
+    files: ['**/*.ts'],
+    extends: [...ngrx.configs.all]
   }
-)
+);

src/app/app.component.html

@@ -36,9 +36,18 @@
 
     --pill-accent: var(--bright-blue);
 
-    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
+    font-family:
+      'Inter',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Helvetica,
+      Arial,
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol';
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -51,9 +60,18 @@
     line-height: 100%;
     letter-spacing: -0.125rem;
     margin: 0;
-    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
+    font-family:
+      'Inter Tight',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Helvetica,
+      Arial,
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol';
   }
 
   p {
@@ -231,19 +249,26 @@ <h1>Hello, {{ title }}</h1>
     <div class="divider" role="separator" aria-label="Divider"></div>
     <div class="right-side">
       <div class="pill-group">
-        @for (item of [
-          { title: 'Explore the Docs', link: 'https://angular.dev' },
-          { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
-          { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
-          { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
-          { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
-        ]; track item.title) {
-          <a
-            class="pill"
-            [href]="item.link"
-            target="_blank"
-            rel="noopener"
-          >
+        @for (
+          item of [
+            { title: 'Explore the Docs', link: 'https://angular.dev' },
+            {
+              title: 'Learn with Tutorials',
+              link: 'https://angular.dev/tutorials'
+            },
+            { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
+            {
+              title: 'Angular Language Service',
+              link: 'https://angular.dev/tools/language-service'
+            },
+            {
+              title: 'Angular DevTools',
+              link: 'https://angular.dev/tools/devtools'
+            }
+          ];
+          track item.title
+        ) {
+          <a class="pill" [href]="item.link" target="_blank" rel="noopener">
             <span>{{ item.title }}</span>
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -332,5 +357,4 @@ <h1>Hello, {{ title }}</h1>
 <!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 
-
 <router-outlet />