Add prettier and lint to pipeline and fix errors (hobbyfarm#248)

* fix(#498): ensure that tasks can be updated

* feat(): add prettier

* feat(): format files with prettier

* feat(): add prettier to pipeline

* feat(): repair lint error and add lint to pipeline

* fix(): fix easy lint errors with autofix

* fix(): fix lint errors

---------

Co-authored-by: Tanja Ulmen <tanja.ulmen@sva.de>

Author: tanemlu

.eslintrc.json

@@ -1,46 +1,34 @@
 {
   "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
+  "ignorePatterns": ["projects/**/*", "e2e/**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
+      "parser": "@typescript-eslint/parser",
       "parserOptions": {
-        "project": [
-          "tsconfig.json",
-          "e2e/tsconfig.json"
-        ],
-        "createDefaultProgram": true
+        "project": ["tsconfig.json"],
+        "sourceType": "module"
       },
+      "plugins": ["@angular-eslint", "@typescript-eslint"],
       "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-        "plugin:@angular-eslint/template/process-inline-templates"
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "prettier"
       ],
       "rules": {
         "@typescript-eslint/explicit-member-accessibility": [
           "off",
-          {
-            "accessibility": "explicit"
-          }
-        ],
-        "arrow-parens": [
-          "off",
-          "always"
+          { "accessibility": "explicit" }
         ],
+        "arrow-parens": ["off", "always"],
         "import/order": "off"
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
       "rules": {}
     }
   ]

.github/workflows/ci.yaml

@@ -4,13 +4,13 @@ name: CI
 
 on:
   push:
-    branches: [ "master" ]
+    branches: ['master']
   pull_request:
-    branches: [ "master" ]
+    branches: ['master']
   workflow_dispatch: {}
 
 concurrency:
-  group: "ci"
+  group: 'ci'
   cancel-in-progress: true
 
 env:
@@ -37,6 +37,10 @@ jobs:
           key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
       - name: Install dependencies
         run: npm install
+      - name: Prettier
+        run: npm run prettier:check
+      - name: Linting
+        run: npm run lint
       - name: Build
         run: npm run build:prod
         env:

.github/workflows/pkg.yaml

@@ -4,8 +4,8 @@ name: PKG
 
 on:
   push:
-    branches: [ "master" ]
-    tags: [ '*' ]
+    branches: ['master']
+    tags: ['*']
   workflow_dispatch: {}
 
 env:

.prettierignore

@@ -0,0 +1,2 @@
+build
+.github

.prettierrc .prettierrc.json.prettierrc renamed to .prettierrc.json

@@ -1,4 +1,6 @@
 {
+  "singleQuote": true,
+  "trailingComma": "all",
   "overrides": [
     {
       "files": "*.html",

README.md

@@ -12,22 +12,20 @@ A file placed at `/config.json` will allow for runtime configuration (e.g., cust
 
 ```json
 {
-    "title": "HobbyFarm Administration",
-    "favicon": "/assets/default/favicon.png",
-    "login": {
-        "logo": "/assets/default/rancher-labs-stacked-color.svg",
-        "background": "/assets/default/vault.jpg"
-    },
-    "logo": "/assets/default/logo.svg"
+  "title": "HobbyFarm Administration",
+  "favicon": "/assets/default/favicon.png",
+  "login": {
+    "logo": "/assets/default/rancher-labs-stacked-color.svg",
+    "background": "/assets/default/vault.jpg"
+  },
+  "logo": "/assets/default/logo.svg"
 }
 ```
 
 To customize logos, mount them into the container at `/usr/share/nginx/html/assets`, and then reference the file names in `config.json`. Alternatively, you can reference files from an object store.
 
 A file placed at `/custom.css` will allow for runtime style customization. To do so, mount a file called `custom.css` into the container at `/usr/share/nginx/html/`.
 
-
-
 ## Contributing
 
 ### Local Development

angular.json

@@ -22,9 +22,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "allowedCommonJsDependencies": [
-              "dragula"
-            ],
+            "allowedCommonJsDependencies": ["dragula"],
             "assets": [
               "src/favicon.ico",
               "src/config.json",
@@ -120,32 +118,22 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": ["src/styles.scss"],
             "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "assets": ["src/favicon.ico", "src/assets"]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
     }
   },
   "cli": {
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ],
+    "schematicCollections": ["@angular-eslint/schematics"],
     "analytics": false
   },
   "schematics": {