ComeOnOliver/skillshub

Codierungspraktiken

Code-Organisation

• Einzelverantwortung: Jede Quelldatei sollte einen klaren, fokussierten Geltungsbereich/Zweck haben
• Große Dateien aufteilen: Teile Dateien auf, wenn sie groß werden oder zu viele Belange behandeln
• Typentrennung: Trenne Typen und Schnittstellen immer in types.ts oder types/*.ts
• Konstantenextraktion: Verschiebe Konstanten in eine dedizierte constants.ts-Datei

Laufzeitumgebung

• Isomorphen Code bevorzugen: Schreibe laufzeitagnostischen Code, der wann immer möglich in Node, Browser und Workern funktioniert
• Klare Laufzeitindikatoren: Wenn Code umgebungsspezifisch ist, füge oben in der Datei einen Kommentar hinzu:

// @env node
// @env browser

TypeScript

• Explizite Rückgabetypen: Deklariere Rückgabetypen explizit, wenn möglich
• Komplexe Inline-Typen vermeiden: Extrahiere komplexe Typen in dedizierte type- oder interface-Deklarationen

Kommentare

• Unnötige Kommentare vermeiden: Code sollte selbsterklärend sein
• „Warum“ erklären, nicht „wie“: Kommentare sollten die Begründung oder Absicht beschreiben, nicht was der Code tut

Tests (Vitest)

• Testdateien: foo.ts → foo.test.ts (gleiches Verzeichnis)
• Verwende describe/it-API (nicht test)
• Verwende toMatchSnapshot für komplexe Ausgaben
• Verwende toMatchFileSnapshot mit explizitem Pfad für sprachspezifische Snapshots

---

Werkzeugauswahl

@antfu/ni Befehle

Befehl	Beschreibung
ni	Abhängigkeiten installieren
ni <pkg> / ni -D <pkg>	Abhängigkeit / Entwicklungsabhängigkeit hinzufügen
nr <script>	Skript ausführen
nu	Abhängigkeiten aktualisieren
nun <pkg>	Abhängigkeit deinstallieren
nci	Saubere Installation (pnpm i --frozen-lockfile)
nlx <pkg>	Paket ausführen (npx)

TypeScript Konfiguration

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

ESLint Einrichtung

// eslint.config.mjs
import antfu from '@antfu/eslint-config'

export default antfu()

Wenn du Aufgaben erledigst, führe pnpm run lint --fix aus, um den Code zu formatieren und den Codierungsstil zu korrigieren.

Detaillierte Konfigurationsoptionen: antfu-eslint-config

Git Hooks

{
  "simple-git-hooks": {
    "pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && npx lint-staged"
  },
  "lint-staged": { "*": "eslint --fix" },
  "scripts": {
    "prepare": "npx simple-git-hooks"
  }
}

pnpm Kataloge

Verwende benannte Kataloge in pnpm-workspace.yaml für die Versionsverwaltung:

Katalog	Zweck
prod	Produktionsabhängigkeiten
inlined	Im Bundler eingebundene Abhängigkeiten
dev	Entwicklerwerkzeuge (Linter, Bundler, Tests)
frontend	Frontend-Bibliotheken

Vermeide den Standardkatalog. Die Katalognamen können je nach Projektanforderungen angepasst werden.

---

Referenzen

Thema	Beschreibung	Referenz
ESLint Konfiguration	Framework-Unterstützung, Formatierer, Regelüberschreibungen, VS Code-Einstellungen	antfu-eslint-config
Projekteinrichtung	.gitignore, GitHub Actions, VS Code-Erweiterungen	setting-up
App-Entwicklung	Vue/Nuxt/UnoCSS-Konventionen und -Muster	app-development
Bibliotheksentwicklung	tsdown-Bundling, reine ESM-Veröffentlichung	library-development
Monorepo	pnpm-Workspaces, zentralisierter Alias, Turborepo	monorepo