use prettier as default formatter

.eslintrc

@@ -16,6 +16,7 @@
     "import/no-duplicates": "error",
     "import/newline-after-import": "warn"
   },
+  "ignorePatterns": ["*.html", "*.spec.ts"],
   "overrides": [
     {
       "files": ["**/*.ts"],
@@ -27,9 +28,7 @@
       ],
       "rules": {
         "@typescript-eslint/no-inferrable-types": "off",
-        "simple-import-sort/imports": [
-          "warn"
-        ]
+        "simple-import-sort/imports": ["warn"]
       }
     },
     {

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
-    "cSpell.words": [
-        "opensheetmusicdisplay",
-        "osmd"
-    ]
+  "cSpell.words": [
+    "opensheetmusicdisplay",
+    "osmd"
+  ],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
 }

CHANGELOG.md

@@ -6,7 +6,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
-
 ## [0.1.0] - 2023-03-29
 
 ### Added

angular.json

@@ -13,17 +13,13 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "allowedCommonJsDependencies": [
-              "automation-events",
-              "events",
-              "webmidi"
-            ],
+            "allowedCommonJsDependencies": ["automation-events", "events", "webmidi"],
             "outputPath": "www",
             "baseHref": "/",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
+            "tsConfig": "tsconfig.json",
             "optimization": false,
             "assets": [
               {
@@ -127,10 +123,7 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         },
         "e2e": {
@@ -176,9 +169,7 @@
     }
   },
   "cli": {
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ],
+    "schematicCollections": ["@angular-eslint/schematics"],
     "analytics": false
   },
   "schematics": {
@@ -189,4 +180,4 @@
       "styleext": "scss"
     }
   }
-}
+}

flake.nix

@@ -7,6 +7,7 @@
     inputs.utils.lib.eachDefaultSystem (system:
       let pkgs = inputs.nixpkgs.legacyPackages.${system}; in
       {
+        # formatter = pkgs.nodejs.pkgs.prettier; # TODO: write inplace
         packages.default = with pkgs; let
           package = (with builtins; fromJSON (readFile ./package.json));
         in

karma.conf.js

@@ -10,22 +10,22 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, '../coverage'),
       reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      fixWebpackSourcePaths: true,
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: false,
   });
 };

ngsw-config.json

@@ -6,23 +6,15 @@
       "name": "app",
       "installMode": "prefetch",
       "resources": {
-        "files": [
-          "/index.html",
-          "/manifest.webmanifest",
-          "/*.css",
-          "/*.js"
-        ]
+        "files": ["/index.html", "/manifest.webmanifest", "/*.css", "/*.js"]
       }
     },
     {
       "name": "assets",
       "installMode": "lazy",
       "updateMode": "prefetch",
       "resources": {
-        "files": [
-          "/assets/**",
-          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
-        ]
+        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
       }
     }
   ]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "midi.academy",
   "description": "Interactive MIDI learning",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "author": "",
   "homepage": "https://midi.academy",
   "scripts": {
@@ -72,5 +72,19 @@
     "protractor": "~7.0.0",
     "ts-node": "~10.9.1",
     "typescript": "~4.7.4"
-  }
-}
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 120
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead",
+    "not IE 9-11"
+  ]
+}

src/app/app-routing.module.ts

@@ -13,4 +13,4 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
   exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.component.spec.ts

@@ -15,9 +15,7 @@ describe('AppComponent', () => {
     TestBed.configureTestingModule({
       declarations: [AppComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      providers: [
-        { provide: Platform, useValue: platformSpy },
-      ],
+      providers: [{ provide: Platform, useValue: platformSpy }],
     }).compileComponents();
   }));
 

src/app/app.component.ts

@@ -8,11 +8,7 @@ import { Platform } from '@ionic/angular';
   styleUrls: [],
 })
 export class AppComponent implements OnInit {
-  constructor(
-    private metaTagService: Meta,
-    private platform: Platform,
-  ) {
-  }
+  constructor(private metaTagService: Meta, private platform: Platform) {}
 
   ngOnInit(): void {
     this.metaTagService.addTags([

src/app/app.module.ts

@@ -16,7 +16,7 @@ import { FormsModule } from '@angular/forms';
 import { PianoKeyboardComponent } from './keyboard/keyboard.component';
 
 @NgModule({
-  declarations: [AppComponent,HomePageComponent,PianoKeyboardComponent],
+  declarations: [AppComponent, HomePageComponent, PianoKeyboardComponent],
   imports: [
     BrowserModule,
     CommonModule,
@@ -37,7 +37,7 @@ import { PianoKeyboardComponent } from './keyboard/keyboard.component';
   providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
   bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
 
 // required for AOT compilation
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {