diff --git a/angular.json b/angular.json index 25e584d..054cca4 100644 --- a/angular.json +++ b/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": [] } } diff --git a/eslint.config.mjs b/eslint.config.mjs index 4126ca1..b65aed8 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -1,98 +1,97 @@ 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'] } ] } @@ -100,18 +99,18 @@ export default tsEslint.config( // 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'] } ] } @@ -119,18 +118,18 @@ export default tsEslint.config( // 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'] } ] } @@ -138,33 +137,29 @@ export default tsEslint.config( // 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] } -) +); diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..cc3a21b 100644 --- a/src/app/app.component.html +++ b/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 /> diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 0b5774b..3d6ceb3 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -4,7 +4,7 @@ import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AppComponent], + imports: [ AppComponent ] }).compileComponents(); }); @@ -14,7 +14,7 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have the 'angular-ngrx-eslint-template' title`, () => { + it('should have the \'angular-ngrx-eslint-template\' title', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app.title).toEqual('angular-ngrx-eslint-template'); @@ -24,6 +24,8 @@ describe('AppComponent', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-ngrx-eslint-template'); + expect(compiled.querySelector('h1')?.textContent).toContain( + 'Hello, angular-ngrx-eslint-template' + ); }); }); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2a3b3e6..c580491 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,11 +2,11 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @Component({ - selector: 'app-root', - standalone: true, - imports: [RouterOutlet], - templateUrl: './app.component.html', - styleUrl: './app.component.scss' + selector : 'app-root', + standalone : true, + imports : [ RouterOutlet ], + templateUrl : './app.component.html', + styleUrl : './app.component.scss' }) export class AppComponent { title = 'angular-ngrx-eslint-template'; diff --git a/src/app/app.config.ts b/src/app/app.config.ts index a1e7d6f..aa340b1 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -4,5 +4,8 @@ import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] + providers: [ + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes) + ] }; diff --git a/src/index.html b/src/index.html index 57bcd7d..ff2a3bd 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,13 @@ <!doctype html> <html lang="en"> -<head> - <meta charset="utf-8"> - <title>AngularNgrxEslintTemplate</title> - <base href="/"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="icon" type="image/x-icon" href="favicon.ico"> -</head> -<body> - <app-root></app-root> -</body> + <head> + <meta charset="utf-8" /> + <title>AngularNgrxEslintTemplate</title> + <base href="/" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="icon" type="image/x-icon" href="favicon.ico" /> + </head> + <body> + <app-root></app-root> + </body> </html> diff --git a/src/main.ts b/src/main.ts index 35b00f3..7180ec1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,5 +2,4 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; -bootstrapApplication(AppComponent, appConfig) - .catch((err) => console.error(err)); +bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err)); diff --git a/tsconfig.app.json b/tsconfig.app.json index 3775b37..8886e90 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -6,10 +6,6 @@ "outDir": "./out-tsc/app", "types": [] }, - "files": [ - "src/main.ts" - ], - "include": [ - "src/**/*.d.ts" - ] + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"] } diff --git a/tsconfig.json b/tsconfig.json index a9ae8b0..87b1c0c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,10 +18,7 @@ "importHelpers": true, "target": "ES2022", "module": "ES2022", - "lib": [ - "ES2022", - "dom" - ] + "lib": ["ES2022", "dom"] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, diff --git a/tsconfig.spec.json b/tsconfig.spec.json index 5fb748d..e00e30e 100644 --- a/tsconfig.spec.json +++ b/tsconfig.spec.json @@ -4,12 +4,7 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", - "types": [ - "jasmine" - ] + "types": ["jasmine"] }, - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] + "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] }