Einrichten von Linting für unser Projekt

Ziel

In dieser Übung werden wir unsere Frontend Anwendung so erweitern das eine Linting-Lösung bereitsteht.

Hierzu sind die nachfolgenden Schritte notwendig:

• Projekt um die notwendigen Fremdkomponenten erweitern
• Konfiguration für ESLint erzeugen
• Das Projekt von Fehlern und Warnings befreien

Implementierung von ESLint

Um ESLint in unserem Projekt als Linting-Tool nutzen zu können müssen wir ein paar Anpassungen in unserem Projekt vornehmen.

Zum Start legen wir wieder wie gewohnt einen neuen Branch an und starten mit diesem unsere IDE.

Installation von ESLint

Dort angekommen Installieren wir als erstes die notwendigen Komponenten mittels NPM. Hierzu öffnen wir die Konsole und fügen den folgenden Kommandozeilenaufruf hinzu.

Installation der notwendigen Komponenten

npm install --save-dev @eslint/js eslint eslint-plugin-react-hooks eslint-plugin-react-refresh typescript-eslint

Sobald dies ohne Fehler durchgeführt wurde stehen die neuen Komponenten zur weiteren Nutzung bereit.

Linting-Script in NPM

Wie bereits in den letzten Übungen kennengelernt gibt es in NPM die Konvention das sogenannte NPM-Scripts für häufig verwendete Befehl erstellt werden sollten.

Wir erweitern deshalb die Datei “package.json” wie unten angeführt.

Add this to package.json

package.json

 "preview": "vite preview"
 "preview": "vite preview",
 "lint": "eslint ."
},

Nun testen wir unser neues Script indem wir es über die Kommandozeile aufrufen.

Aufruf unseres Scripts names "lint"

npm run lint

ESLint wird korrekt aufgerufen, liefert uns aber den nachfolgenden Fehler.

Ausgabe des Aufrufs

> hb-kanban-frontend@0.0.0 lint
> eslint .


Oops! Something went wrong! :(

ESLint: 9.27.0

ESLint couldn't find an eslint.config.(js|mjs|cjs) file.

From ESLint v9.0.0, the default configuration file is now eslint.config.js.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:

https://eslint.org/docs/latest/use/configure/migration-guide

If you still have problems after following the migration guide, please stop by
https://eslint.org/chat/help to chat with the team.

Konfiguration für ESLint erstellen

Die Fehlermeldung zeigt deutlich was aktuell noch fehlt damit ESLint seine Aufgabe erfüllen kann. ESLint benötigt eine Konfigurationsdatei die “eslint.config.(js|mjs|cjs)” heißt und im Root-Verzeichnisses des Projektes abgelegt ist.

Für die Konfiguration der Regeln ist die nachfolgende Datei zuständig

eslint.config.js

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
)

Anschließend führen wir nochmals den Befehl “npm run lint” aus.

Da wir nun die notwendige Konfigurationdatei angelegt haben läuft ESLint nun durch und analysiert den aktuellen Status des Projekts.

In der Befehlsausgabe können wir nun sehen welche Stellen aktuell die von uns festgelegten Regeln nicht erfüllt.

 npm run lint

> hb-kanban-frontend@0.0.0 lint
> eslint .


C:\Users\Stefan\source\hb-kanban-frontend-starter\src\components\KanbanBoard.tsx
   22:19  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  126:21  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

C:\Users\Stefan\source\hb-kanban-frontend-starter\src\components\KanbanItem.tsx
  138:21  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

C:\Users\Stefan\source\hb-kanban-frontend-starter\src\components\ui\badge.tsx
  46:17  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components

C:\Users\Stefan\source\hb-kanban-frontend-starter\src\components\ui\button.tsx
  59:18  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components

✖ 5 problems (3 errors, 2 warnings)

Im Projekt wurden insgesamt 5 Probleme, davon 3 Fehler und 2 Warnings festgestellt.

Caution

Diese Anzahl kann aufgrund der selbstständig durchgeführten Veränderungen in der letzten Einheit bei euch anders sein.

Korrektur der von ESLint gefundenen Stellen

Wenn wir uns einmal die Probleme die ESLint zurückliefert im Detail ansehen sehen wir das die 3 Fehler allesamt die gleiche Meldung sind. Gleiches gilt für die beiden Warnings.

Auffallend ist bei den Warnings zusätzlich noch das beide Warnings in Dateien im Verzeichnis “src/components/ui” auftreten. Die Komponenten in diesem Verzeichnis wurden nicht von uns erstellt sondern sind Komponenten der Komponentenbibliothek shadcn/ui.

Da es sich hierbei also um Fremdkomponenten handelt werden wir diese aus unserem Linting-Prozess ausnehmen. Hierzu ergänzen wir diese Ausnahme in der Datei “eslint.config.js”.

eslint.config.js

export default tseslint.config(
  { ignores: ['dist', 'src/components/ui'] },
  {

Note

In statischer Codeanalyse Dateien oder gesamte Pfade auszunehmen sollte wohl überlegt sein da dies zu “blinden Flecken” führen kann.

In diesem Fall macht es jedoch Sinn da wir die Fremdkomponenten bei uns nicht anpassen werden. Somit können wir zumindest verhindern durch die zusätzlichen (jetzt unterdrückten) Warnings und Fehlermeldungen das wir zukünftig nicht einfach die Fehler die das Linting-Tool ausgibt ignorieren.

Wenn wir nun erneut den Lint-Vorgang ausführen so erhalten wir in der Meldung nur noch die 3 Fehler.

 npm run lint

> hb-kanban-frontend@0.0.0 lint


C:\Users\Stefan\source\hb-kanban-frontend-starter\src\components\KanbanBoard.tsx
   22:19  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  126:21  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

C:\Users\Stefan\source\hb-kanban-frontend-starter\src\components\KanbanItem.tsx
  138:21  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

✖ 3 problems (3 errors, 0 warnings)

Korrektur der von ESLint angezeigten Fehler

Diese beheben wir nun indem wir den Source Code entsprechend anpassen. Hierzu navigieren wir zuerst zur Datei “KanbanItem.tsx” im Verzeichnis “src/components”.

In dieser Datei scrollen wir nun zu der Zeile die uns ESLint in der CLI-Ausgabe angegeben hat. Anschließend korrigieren wir wie unten angeführt den Fehler in der Datei.

KanbanItem.tsx

    onSave(); // Notify parent component to refresh/close form

} catch (error: any) {
} catch (error: unknown) {
    console.error('Error saving item:', error);
    toast.error(`Failed to save item: ${error.message}`);
    toast.error(`Failed to save item: ${(error as Error).message}`);
}

Das gleiche Wiederholen wir für die anderen beiden Fehler in der Datei “KanbanBoard.tsx” im Verzeichnis “src/components”.

Sobald wir dies erledigt haben starten wir erneut den Lint-Vorgang.

npm run lint

> hb-kanban-frontend@0.0.0 lint
> eslint .

Nun erhalten wir keine klare Meldung. Dies ist im Fall von ESLint so zu interpretieren das es keine Fehler und Warning gibt und somit laut ESLint alle Regeln erfüllt sind.

Aufnahme in unsere CI-Pipeline

Da wir nun funktionierendes Linting für unser Projekt haben und auch alle Fehler und Warning beseitigt haben können wir nun unsere CI-Pipeline um einen Job erweitern.

Wir erweitern nun unsere GitHub Actions Konfigurationsdatei names “ci.yml”.

ci.yml

name: build-and-archive-kanban-frontend-app
on: [push]
jobs:
    build:
        runs-on: "ubuntu-latest"
        steps:
          - name: Checkout repository
            uses: "actions/checkout@v4"
          - name: Setup Node-Environment
            uses: "actions/setup-node@v4"
            with:
              node-version: '22'
          - name: Build optimized web application
            run: |
              npm ci
              npm run build
          - name: Archive production artifacts
            uses: actions/upload-artifact@v4
            with:
              name: dist
              path: dist
    lint:
        runs-on: "ubuntu-latest"
        steps:
          - name: Checkout repository
            uses: "actions/checkout@v4"
          - name: Setup Node-Environment
            uses: "actions/setup-node@v4"
            with:
              node-version: '22'
          - name: Lint code
            run: |
              npm ci
              npm run lint

Änderungen übernehmen

Abschließend erstellen wir einen Commit mit allen Änderungen, pushen diese und stoppen unseren GitHub Codespace.

Wir sollten nun die laufenden Actions sehen. Nachdem diese erfolgreich durchgelaufen sind können wir den Pull-Request mergen.

Zusammenfassung

In diesem Lab wurden die nachfolgenden Themen erklärt:

• Installation und Konfiguration von ESLint
• Behebung von Fehlern und Warnings die ESLint ausgibt
• Erweiterung der CI-Pipeline um das neue Linting