execute prettier to fix format

.github/workflows/eslint-ci.yml

@@ -3,7 +3,7 @@ name: ESLint Workflow
 on:
   workflow_call:
 env:
-      NODE_VERSION: 18.x
+  NODE_VERSION: 18.x
 jobs:
   # Make sure eslint passes
   eslint:

.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: Generate Angular release
 on:
   push:
     tags:
-      - "[0-9]+.[0-9]+.[0-9]+*" 
+      - "[0-9]+.[0-9]+.[0-9]+*"
 env:
   NODE_VERSION: 18.x
 jobs:
@@ -41,10 +41,10 @@ jobs:
           draft: false
           prerelease: false
       - name: Upload Release Asset
-        id: upload-release-asset 
+        id: upload-release-asset
         uses: actions/upload-release-asset@v1
         env:
-            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           upload_url: ${{ steps.create_release.outputs.upload_url }}
           asset_path: ./dist.zip

README.md

@@ -9,6 +9,7 @@ Para ello, se ha modificado el archivo **app/app.module.ts** para comentar los a
 // import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 // import { InMemoryDataService } from './in-memory-data.service';
 ```
+
 Y el que se referencia en el apartado imports:
 
 ```

angular.json

@@ -97,11 +97,9 @@
         }
       }
     }
-  },  
+  },
   "cli": {
     "analytics": "b96e80d7-7b19-422f-979c-bd9a82360fb4",
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
 }

karma.conf.js

@@ -3,14 +3,14 @@
 
 module.exports = function (config) {
   config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    basePath: "",
+    frameworks: ["jasmine", "@angular-devkit/build-angular"],
     plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage"),
+      require("@angular-devkit/build-angular/plugins/karma"),
     ],
     client: {
       jasmine: {
@@ -19,26 +19,23 @@ module.exports = function (config) {
         // for example, you can disable the random execution with `random: false`
         // or set a specific seed with `seed: 4321`
       },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
+      suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/angular-tour-of-heroes'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
+      dir: require("path").join(__dirname, "./coverage/angular-tour-of-heroes"),
+      subdir: ".",
+      reporters: [{ type: "html" }, { type: "text-summary" }],
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ["progress", "kjhtml"],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ["Chrome"],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };

package.json

@@ -7,7 +7,8 @@
     "build": "export NODE_OPTIONS=--openssl-legacy-provider && ng build",
     "watch": "export NODE_OPTIONS=--openssl-legacy-provider && ng build --watch --configuration development",
     "test": "export NODE_OPTIONS=--openssl-legacy-provider && ng test",
-    "prettier-check": "prettier --check \"./**/*.{md,jsx,json,html,css,js,yml,ts,tsx}\""
+    "prettier-check": "prettier --check \"./**/*.{md,jsx,json,html,css,js,yml,ts,tsx}\"",
+    "prettier-format": "prettier --write \"./**/*.{md,jsx,json,html,css,js,yml,ts,tsx}\""
   },
   "private": true,
   "dependencies": {
@@ -20,6 +21,7 @@
     "@angular/platform-browser-dynamic": "^14.3.0",
     "@angular/router": "^14.3.0",
     "angular-in-memory-web-api": "^0.11.0",
+    "prettier": "^3.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.4.1",
     "zone.js": "^0.11.8"
@@ -39,4 +41,4 @@
     "prettier-check": "^2.0.0",
     "typescript": "~4.6.4"
   }
-}
+}

src/app/app-routing.module.ts

@@ -4,16 +4,15 @@ import { HeroesComponent } from './heroes/heroes.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 
-
 const routes: Routes = [
   { path: 'heroes', component: HeroesComponent },
   { path: 'dashboard', component: DashboardComponent },
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
-  { path: 'detail/:id', component: HeroDetailComponent }
+  { path: 'detail/:id', component: HeroDetailComponent },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.component.css

@@ -1,24 +1,24 @@
 /* AppComponent's private CSS styles */
 
 h1 {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 nav a {
-    padding: 1rem;
-    text-decoration: none;
-    margin-top: 10px;
-    display: inline-block;
-    background-color: #e8e8e8;
-    color: #3d3d3d;
-    border-radius: 4px;
+  padding: 1rem;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #e8e8e8;
+  color: #3d3d3d;
+  border-radius: 4px;
 }
 
 nav a:hover {
-    color: white;
-    background-color: #42545C;
+  color: white;
+  background-color: #42545c;
 }
 
 nav a.active {
-    background-color: black;
-}
+  background-color: black;
+}

src/app/app.component.html

@@ -1,7 +1,7 @@
-<h1>{{title}}</h1>
+<h1>{{ title }}</h1>
 <nav>
-    <a routerLink="/dashboard">Dashboard</a>
-    <a routerLink="/heroes">Heroes</a>
+  <a routerLink="/dashboard">Dashboard</a>
+  <a routerLink="/heroes">Heroes</a>
 </nav>
 <router-outlet></router-outlet>
-<app-messages></app-messages>
+<app-messages></app-messages>

src/app/app.component.spec.ts

@@ -4,9 +4,7 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
+      declarations: [AppComponent],
     }).compileComponents();
   });
 
@@ -26,6 +24,8 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('angular-tour-of-heroes app is running!');
+    expect(compiled.querySelector('.content span')?.textContent).toContain(
+      'angular-tour-of-heroes app is running!',
+    );
   });
 });

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'Tour of Heroes';

src/app/app.module.ts

@@ -25,7 +25,7 @@ import { HeroSearchComponent } from './hero-search/hero-search.component';
     HeroDetailComponent,
     MessagesComponent,
     DashboardComponent,
-    HeroSearchComponent
+    HeroSearchComponent,
   ],
   imports: [
     BrowserModule,
@@ -35,6 +35,6 @@ import { HeroSearchComponent } from './hero-search/hero-search.component';
     // HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { dataEncapsulation: false })
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/dashboard/dashboard.component.css

@@ -1,48 +1,48 @@
 /* DashboardComponent's private CSS styles */
 
 h2 {
-    text-align: center;
+  text-align: center;
 }
 
 .heroes-menu {
-    padding: 0;
-    margin: auto;
-    max-width: 1000px;
-    /* flexbox */
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    align-content: flex-start;
-    align-items: flex-start;
+  padding: 0;
+  margin: auto;
+  max-width: 1000px;
+  /* flexbox */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-content: flex-start;
+  align-items: flex-start;
 }
 
 a {
-    background-color: #3f525c;
-    border-radius: 2px;
-    padding: 1rem;
-    font-size: 1.2rem;
-    text-decoration: none;
-    display: inline-block;
-    color: #fff;
-    text-align: center;
-    width: 100%;
-    min-width: 70px;
-    margin: .5rem auto;
-    box-sizing: border-box;
-    /* flexbox */
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
+  background-color: #3f525c;
+  border-radius: 2px;
+  padding: 1rem;
+  font-size: 1.2rem;
+  text-decoration: none;
+  display: inline-block;
+  color: #fff;
+  text-align: center;
+  width: 100%;
+  min-width: 70px;
+  margin: 0.5rem auto;
+  box-sizing: border-box;
+  /* flexbox */
+  order: 0;
+  flex: 0 1 auto;
+  align-self: auto;
 }
 
 @media (min-width: 600px) {
-    a {
-        width: 18%;
-        box-sizing: content-box;
-    }
+  a {
+    width: 18%;
+    box-sizing: content-box;
+  }
 }
 
 a:hover {
-    background-color: #000;
-}
+  background-color: #000;
+}

src/app/dashboard/dashboard.component.html

@@ -1,7 +1,7 @@
 <h2>Top Heroes</h2>
 <div class="heroes-menu">
-    <a *ngFor="let hero of heroes" routerLink="/detail/{{hero.id}}">
-        {{hero.name}}
-    </a>
+  <a *ngFor="let hero of heroes" routerLink="/detail/{{ hero.id }}">
+    {{ hero.name }}
+  </a>
 </div>
-<app-hero-search></app-hero-search>
+<app-hero-search></app-hero-search>

src/app/dashboard/dashboard.component.spec.ts

@@ -8,9 +8,8 @@ describe('DashboardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DashboardComponent ]
-    })
-    .compileComponents();
+      declarations: [DashboardComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {