fix: setup prettier

Author: scttcper

.codecov.yml

@@ -1,5 +1,5 @@
 coverage:
-  range: "50..100"
+  range: '50..100'
   status:
     project: no
     patch: no

.eslintrc.json

@@ -1,18 +1,11 @@
 {
   "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
+  "ignorePatterns": ["projects/**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "parserOptions": {
-        "project": [
-          "tsconfig.json",
-          "e2e/tsconfig.json"
-        ],
+        "project": ["tsconfig.json", "e2e/tsconfig.json"],
         "createDefaultProgram": true
       },
       "extends": [
@@ -26,12 +19,8 @@
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
       "rules": {}
     }
   ]

.github/workflows/ci.yml

@@ -10,10 +10,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: 'npm'
       - run: npm ci
       - name: lint
@@ -36,10 +36,10 @@ jobs:
       pull-requests: write # to be able to comment on released pull requests
       id-token: write # to enable use of OIDC for npm provenance
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: 'npm'
       - run: npm ci
       - run: npm run build

.prettierrc

@@ -4,5 +4,6 @@
   "trailingComma": "all",
   "bracketSpacing": true,
   "printWidth": 100,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "tabWidth": 2
 }

angular.json

@@ -24,9 +24,7 @@
               "base": "dist"
             },
             "index": "src/index.html",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               {
@@ -35,9 +33,7 @@
               },
               "src/assets"
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": [],
             "extractLicenses": false,
             "sourceMap": true,
@@ -104,19 +100,14 @@
               },
               "src/assets"
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }

package-lock.json

@@ -13,8 +13,9 @@
     "test": "ng test --watch=false --code-coverage",
     "test:watch": "ng test",
     "test:ci": "ng test --watch=false --code-coverage --no-progress --browsers=ChromeHeadlessCustom",
-    "lint": "ng lint",
-    "lint:fix": "ng lint --fix"
+    "lint": "ng lint && prettier --check .",
+    "lint:fix": "ng lint --fix && prettier --write .",
+    "format": "prettier --write ."
   },
   "private": true,
   "dependencies": {
@@ -57,6 +58,7 @@
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
     "ng-packagr": "19.1.2",
+    "prettier": "3.2.5",
     "puppeteer": "20.2.0",
     "rxjs": "7.8.1",
     "tslib": "2.8.1",

package.json

@@ -1,33 +1,26 @@
-<div class="home" style="height: 580px; width: 100%;">
+<div class="home" style="height: 580px; width: 100%">
   <div class="cover" [style.background-color]="primaryColor"></div>
 </div>
 <div class="container">
   <div class="row">
     <div class="col-md-6 text-center text-md-left">
       <div class="title">Angular Color</div>
       <div class="description">
-        Port of <a href="https://github.com/casesandberg/react-color">react-color</a> by casesandberg
+        Port of <a href="https://github.com/casesandberg/react-color">react-color</a> by
+        casesandberg
       </div>
       <div class="description">
-        A Collection of Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter, Material Design &amp; more
+        A Collection of Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter, Material
+        Design &amp; more
       </div>
       <div class="mt-4">
-        <gh-button
-          [count]="true"
-          user="scttcper"
-          repo="ngx-color"
-          >
-        </gh-button>
+        <gh-button [count]="true" user="scttcper" repo="ngx-color"> </gh-button>
       </div>
     </div>
     <div class="col-md-6">
       <div class="d-flex justify-content-center justify-content-md-end mt-5">
         <div style="padding-top: 20px; display: block">
-          <color-chrome
-            [color]="state"
-            (onChangeComplete)="changeComplete($event)"
-          >
-          </color-chrome>
+          <color-chrome [color]="state" (onChangeComplete)="changeComplete($event)"> </color-chrome>
           <div class="text-center label">Chrome</div>
         </div>
       </div>
@@ -36,9 +29,8 @@
   <div class="row">
     <div class="col-md-4 mt-3">
       <div class="d-flex justify-content-center justify-content-md-start">
-        <div style="width: 220px; display: inline-block;">
-          <color-sketch [color]="state" (onChangeComplete)="changeComplete($event)">
-          </color-sketch>
+        <div style="width: 220px; display: inline-block">
+          <color-sketch [color]="state" (onChangeComplete)="changeComplete($event)"> </color-sketch>
           <div class="text-center label">Sketch</div>
         </div>
       </div>
@@ -132,7 +124,7 @@
   <div class="row">
     <div class="col-12 col-md-7 mb-3">
       <div class="d-flex justify-content-center justify-content-md-start">
-        <div style="width: 410px;display: inline-block">
+        <div style="width: 410px; display: inline-block">
           <color-slider
             [color]="state"
             (onChangeComplete)="changeComplete($event)"
@@ -170,7 +162,7 @@
     </div>
     <div class="col-md-5 d-md-inline d-none">
       <div class="d-flex justify-content-center justify-content-md-start">
-        <div style="width: 320px;display: inline-block">
+        <div style="width: 320px; display: inline-block">
           <color-swatches
             [color]="state"
             (onChangeComplete)="changeComplete($event)"
@@ -181,10 +173,10 @@
       </div>
     </div>
   </div>
-<div class="row">
+  <div class="row">
     <div class="col-12 col-md-7 mb-3">
       <div class="d-flex justify-content-center justify-content-md-start">
-        <div style="width: 320px;display: inline-block">
+        <div style="width: 320px; display: inline-block">
           <color-shade-picker
             [color]="state"
             (onChangeComplete)="changeComplete($event)"
@@ -193,7 +185,8 @@
           <div class="pt-3 text-center label">Shade Slider</div>
         </div>
       </div>
+    </div>
   </div>
-</div>
 
-<app-footer></app-footer>
+  <app-footer></app-footer>
+</div>

src/app/app.component.html

@@ -3,18 +3,18 @@ import { Component } from '@angular/core';
 import { ColorEvent } from 'ngx-color';
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css'],
-    standalone: false
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  standalone: false,
 })
 export class AppComponent {
   title = 'app';
   primaryColor = '#194D33';
   state = {
     h: 150,
-    s: 0.50,
-    l: 0.20,
+    s: 0.5,
+    l: 0.2,
     a: 1,
   };
 

src/app/app.component.ts

@@ -1,20 +1,18 @@
 import { Component, VERSION } from '@angular/core';
 
 @Component({
-    selector: 'app-footer',
-    template: `
+  selector: 'app-footer',
+  template: `
     <footer class="footer mb-4 mt-5">
       Angular {{ version }}
       <br />
       Released under the
-      <a href="https://github.com/typectrl/ngx-codemirror/blob/master/LICENSE"
-        >MIT</a
-      >
+      <a href="https://github.com/typectrl/ngx-codemirror/blob/master/LICENSE">MIT</a>
       license
     </footer>
   `,
-    styles: [
-        `
+  styles: [
+    `
       .footer {
         line-height: 2;
         text-align: center;
@@ -23,8 +21,8 @@ import { Component, VERSION } from '@angular/core';
         font-family: var(--font-family-monospace);
       }
     `,
-    ],
-    standalone: false
+  ],
+  standalone: false,
 })
 export class FooterComponent {
   version = VERSION.full;