ci(lint): add linter

.github/workflows/deploy.yml

@@ -13,10 +13,48 @@ env:
 
 permissions:
   contents: read
+  pull-requests: read
+  checks: write
 
 jobs:
+  eslint:
+    name: eslint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.head_ref }}
+          fetch-depth: 0
+      - name: Lint
+        uses: Krizzu/[email protected]
+        with:
+          ghToken: ${{ secrets.GITHUB_TOKEN }}
+          eslintFiles: "./neues-projekt"
+          eslintConfig: "./neues-projekt/eslint.config.js"
+          # eslintExt: "js, ts, jsx, tsx"
+  prettier:
+    permissions:
+      contents: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          # Make sure the actual branch is checked out when running on pull requests
+          ref: ${{ github.head_ref }}
+          # This is important to fetch the changes to the previous commit
+          fetch-depth: 0
+      - name: Prettify code
+        uses: creyD/[email protected]
+        with:
+          # This part is also where you can pass other options, for example:
+          same_commit: true
+          prettier_options: --write **/*.{js,md}
+          only_changed: true # Prüft nur Dateien die geändert wurden
   test:
-    name: Test
+    name: Lint & Test
     runs-on: ubuntu-latest
     steps:
       - name: Install headless chrome
@@ -31,15 +69,26 @@ jobs:
           node-version: 22 # lts
           cache: "npm"
           cache-dependency-path: neues-projekt/package-lock.json
+      - name: Install Dependencies
+        working-directory: neues-projekt
+        run: npm ci
+      - name: Lint
+        working-directory: neues-projekt
+        run: npm run lint:ci
+      - name: Annotate Code
+        uses: DerLev/eslint-annotations@v2
+        with:
+          eslint-report: neues-projekt/eslint_report.json
+        continue-on-error: true
       - name: Test
         working-directory: neues-projekt
-        run: npm ci && npm run test:ci
+        run: npm run test:ci
 
   deploy:
     name: Deploy
     runs-on: ubuntu-latest
     environment: aws
-    needs: test
+    needs: [test, prettier]
 
     steps:
       - name: Checkout

neues-projekt/Dockerfile

@@ -17,7 +17,7 @@ COPY . .
 
 RUN npm ci && npm run test:ci && npm run build
 
-# Ab hier beginnt das Produktive Image!
+# Ab hier beginnt das produktive Image!
 FROM node:lts-slim
 
 # Das LABEL muss hier gesetzt sein!

neues-projekt/angular.json

@@ -95,11 +95,23 @@
             "scripts": [],
             "karmaConfig": "karma.conf.js"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
   "cli": {
-    "analytics": false
+    "analytics": false,
+    "schematicCollections": [
+      "angular-eslint"
+    ]
   }
 }

neues-projekt/eslint.config.js

@@ -0,0 +1,43 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);