Einrichten von Prettier für unser Projekt

Ziel

In dieser Übung werden wir mit Hilfe von Prettier unsere Frontend Anwendung die Möglichkeit geben den Source Code automatisch zu formatieren und somit einen standardisierten Code Style einzuführen.

Hierzu werden wir folgende Schritte unternehmen:

• Projekt um die notwendigen Fremdkomponenten erweitern
• Konfiguration für Prettier erzeugen
• Das Projekt formatieren damit unserer Projekt dem neuen Code Style folgt

Einführung von Prettier

Wir werden in der Übung auf Prettier setzen.

Prettier ist ein Tool das automatisiert den Source Code formatiert und so für konistenten Code Style sorgt. Prettier selbst bezeichnet sich als “An opinionated code formatter” was bereits implizieren das die Konfigrationsoptionen überschaubar sind. Dies kann in diesem Fall als Vorteil gewertet werden da dadurch häufig potenzielle Style Diskussionen vermieden oder zumindest reduziert werden können.

Tip

Nimm dir 5 - 10 Minuten Zeit um dich kurz über “Code Style” und über Prettier zu informieren.

Nachdem du nun einen Überblick über Code Style und Prettier hast setzen wir in der Übung fort.

Installation Prettier und ESLint-Plugins

Zu Beginn starten wir wieder indem wir einen neuen Branch anlegen und unsere IDE starten.

In der IDE angekommen öffnen wir die Konsole und fügen das unten angeführte Kommando ein.

Installation von Prettier und notwendiger ESLint-Plugins

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Dies installiert Prettier und ein Plugin um Prettier mit ESLint zu integrieren. Zusätzlich wird für die Integration auch noch eine Abhängigkeit installiert die dafür zuständig ist das die gleiche Konfiguration verwendet werden kann.

Konfiguration von Prettier

Nachdem wir Prettier samt Plugins fehlerfrei installieren konnten geht es nun darum die notwendigen Konfigurationen für Prettier zu erstellen.

Zu Beginn erstellen wir nun eine Datei names “.prettierrc” in der Wurzel unseres Repos.

In dieser Datei konfigurieren wir nun unsere Basiseinstellungen.

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "all"
}

Zusätzlich legen wir auch eine Datei names “.prettierignore” ebenfalls in der Wurzel des Repos an.

# Ignore artifacts
dist

# Ignore node_modules
node_modules

# Ignore Shadcn/ui components
src/components/ui

Diese Datei sorgt dafür das weder der Output unseres Builds welcher in “dist” abgelegt noch die Abhängigkeiten die wir mittels NPM installieren und im Ordner “node_modules” abgelegt werden von Prettier verändert werden.

Zusätzlich ignorieren wir auch alle Dateien im Verzeichnis “src/components/ui” da diese die Shadcn/ui Komponenten enthalten.

Im nächsten Schritt stellen wir die Verbindung zwischen ESLint und Prettier her. Hierzu nehmen wir die unten angeführte Änderung in der Datei “eslint.config.js” vor.

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'
import prettier from 'eslint-plugin-prettier'
import prettierConfig from 'eslint-config-prettier'

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

Nachdem wir uns die Prettier selbst und die Anbindung von Prettier in ESLint konfiguriert haben fehlt nur noch ein NPM-Script für den Prettier-Aufruf.

Hierzu navigieren wir erneut in die Datei “package.json” und erweitern diese um ein neues Script.

package.json

    "lint": "eslint ."
    "lint": "eslint .",
    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,md}\""
  },

Nun müssen wir nur noch unser neues Script ausführen. Dieses können wir mittels

Aufruf unseres Prettier Format Scripts

npm run format

erledigen.

Wir sehen das das Script nun unsere Dateien neu formatiert. Auch im Output informiert und Prettier welche Dateien angepasst werden müssen.

Ausgabe von "npm run format"

$ npm run format

> hb-kanban-frontend@0.0.0 format
> prettier --write "src/**/*.{ts,tsx,js,jsx,css,md}"

src/App.css 18ms (unchanged)
src/App.tsx 55ms
src/components/KanbanBoard.tsx 77ms
src/components/KanbanItem.tsx 129ms
src/components/KanbanItemCard.tsx 31ms
src/components/KanbanItemPriority.tsx 13ms
src/components/KanbanSheet.tsx 12ms
src/data/types.ts 7ms
src/index.css 42ms
src/lib/utils.ts 3ms
src/main.tsx 4ms
src/vite-env.d.ts 3ms (unchanged)

Insgesamt sehen wir das es im gesamten Projekt aufgeteilt auf 10 Dateien änderungen gegeben hat. Zwei Dateien (src/App.css und src/vite-env.d.ts) erfüllten bereits den Code Style und wurden deshalb nicht angepasst.

Danger

Wir sehen jetzt auch ein großes Problem bei der Einführung solcher Tools in Bestandsprojekte.

Selbst bei unserem sehr einfachen und kleinem Projekt ist die Liste der Änderung recht lang. Bei einem jahrelang gewachsenen großen Projekt werden die Änderung normalerweise so umfangreich sein das diese nicht so reviewed werden können das Fehler ausgeschlossen werden können.

Deshalb kann es in solchen Fällen sinnvoll zu sein andere Strategien dzurückzugreifen.

Nun versuchen wir eine Änderung rückgängig zu machen und speichern anschließend. Sobald wir nun wieder

Aufruf unseres Prettier Format Scripts

npm run format

ausführen wird der Source Code nun so angepasst das er dem konfigurierten Code Style entspricht.

Automatische Ausführung beim Speichern

Nun wäre es doch sinnvoll wenn ESLint bzw. Prettier automatisch bei Veränderungen laufen würden.

Um dies zu erreichen gibt es unterschiedliche Möglichkeiten, eine davon werden wir nun implementieren.

Hierzu erstellen wir einen Ordner names “.devcontainer” im Root des Projektes. Anschließend erstellen wir im neu erstellten Verzeichnis eine Datei mit dem Namen “devcontainer.json”.

Der Inhalt der Datei ist wie folgt:

devcontainer.json

{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:latest",
  "customizations": {
    "vscode": {
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "[css]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit"
        }
      },
      "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
    }
  },
  "postCreateCommand": "npm install"
}

Nachdem wir diese Datei angepasst haben ist es nun notwendig müssen wir den Container erneut bauen. Hierzu drücken wir die “F1”-Taste und geben den Text “Codespaces: Rebuild Container” und wählen diese Option aus.

GitHub Codespaces benötigt noch eine Bestätigung von uns. Wir wählen die Option “Rebuild”.

Danger

Die Option “Full Rebuild” löscht die Daten die noch nicht mittels eines commits festgeschrieben wurden.

Nachdem Rebuild steht unsere Umgebung wieder zur Verfügung, wir können unsere Änderungen nun testen.

Anpassung vite.config.ts

In der Datei “vite.config.ts” im Projekt gibt es nach wie vor Fehler.

Diese können wir mittels “npm run lint” anzeigen lassen.

 npm run lint

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


/workspaces/Kanban-Frontend-Starter-Test/vite.config.ts
   1:18  error  Replace `"path"` with `'path';`                                                             prettier/prettier
   2:25  error  Replace `"@tailwindcss/vite"` with `'@tailwindcss/vite';`                                   prettier/prettier
   3:36  error  Insert `;`                                                                                  prettier/prettier
   4:41  error  Insert `;`                                                                                  prettier/prettier
  11:7   error  Replace `"@":·path.resolve(__dirname,·"./src"` with `'@':·path.resolve(__dirname,·'./src'`  prettier/prettier
  14:3   error  Insert `;`                                                                                  prettier/prettier

✖ 6 problems (6 errors, 0 warnings)
  6 errors and 0 warnings potentially fixable with the `--fix` option.

Aufgrund unserer Änderungen sollte es nun genügen diese Datei im Editor zu öffnen und zu speichern. Es sollten nun alle Fehler behoben sein.

Bei erneuter Ausführung von “npm run lint” sollte es im Output mehr keine Fehler oder Warnings geben.

Ä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 Prettier im Zusammenspiel mit ESLint
• Einheitliche Formatierung des Source Codes durch Nutzung eines einheitlichen Code Styles
• Anpassung und erweitern unseres GitHub Codespaces