Warum Linting und Formatierung wichtig sind

Linting und Formatierung sind entscheidende Bestandteile eines sauberen und wartbaren Codes. Während Linting hilft, potenzielle Fehler im Code zu identifizieren, stellt die Formatierung sicher, dass der Code konsistent aussieht und leicht lesbar bleibt. In React/TypeScript-Projekten sind zwei der gängigsten Tools ESLint und dprint.

Die wichtigsten Tools

1. ESLint

ESLint ist ein leistungsstarkes Linting-Tool für JavaScript und TypeScript. In Kombination mit @typescript-eslint kann ESLint optimal für TypeScript angepasst werden.

2. dprint

Dprint ist ein Code-Formatter, der dafür sorgt, dass der Code einheitlich formatiert wird. Es kann in Kombination mit ESLint verwendet werden, um Stil- und Linting-Regeln durchzusetzen.

Einrichtung von ESLint und dprint in einem React/TypeScript-Projekt

1. Installation der Abhängigkeiten

Führe folgenden Befehl aus, um ESLint und die nötigen Plugins zu installieren:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks --legacy-peer-deps

Installiere dprint:

npm install --save-dev dprint

2. Konfiguration von ESLint

npx eslint --init # erstellt eine Basis-Konfiguration

2. Konfiguration von dprint

Erstelle oder passe die dprint.json an:

{
	"lineWidth": 100,
	"indentWidth": 2,
	"useTabs": true,
	"plugins": [
	  "https://plugins.dprint.dev/typescript-0.94.0.wasm",
	  "https://plugins.dprint.dev/json-0.20.0.wasm",
	  "https://plugins.dprint.dev/markdown-0.18.0.wasm"
	],
	"typescript": {
	  "semiColons": "always"
	},
	"json": {
	  "indentWidth": 2
	},
	"markdown": {
	  "lineWidth": 100
	}
  }

Danach müssen die Plugins noch aus dem Internet geladen werden

npx dprint config update

3. Automatische Code-Formatierung mit einem Pre-Commit-Hook

Ein Pre-Commit-Hook kann sicherstellen, dass der Code vor dem Commit automatisch geprüft wird. Erstelle eine Datei .git/hooks/pre-commit mit folgendem Inhalt:

#!/bin/sh
# Finde alle gestagten TypeScript- und JavaScript-Dateien
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(js|jsx|ts|tsx)$')

if [ -z "$STAGED_FILES" ]; then
  exit 0
fi

echo "Staged files:"
echo "$STAGED_FILES"

# ESLint ausführen
echo "Running ESLint..."
npx eslint $STAGED_FILES
if [ $? -ne 0 ]; then
  echo "ESLint checks failed. Commit aborted."
  exit 1
fi

# dprint ausführen
echo "Running dprint check..."
npx dprint check $STAGED_FILES
if [ $? -ne 0 ]; then
  echo "Dprint checks failed. Commit aborted."
  exit 1
fi

echo "All checks passed!"
exit 0

Mache den Hook ausführbar:

chmod +x .git/hooks/pre-commit

Durch die Integration von ESLint und dprint in deinen Entwicklungsprozess kannst du Fehler reduzieren, die Code-Qualität verbessern und eine einheitliche Codebasis sicherstellen. Gerade in TypeScript-Projekten sind diese Tools unverzichtbar, um eine stabile und wartbare Codebasis zu gewährleisten.