🚀 React + TypeScript + Vite Projekt-Setup

1. Projekt initialisieren

Zuerst erstellen wir das Grundgerüst mit Vite und TypeScript.

👉 Wichtig: Stelle sicher, dass du dich bereits in dem Ordner befindest, in dem das Projekt angelegt werden soll. Idealerweise ist das Git-Repository zu diesem Zeitpunkt bereits initialisiert (git init).

npm create vite@latest . -- --template react-ts

---

2. Git-Konfiguration

Erstelle eine .gitignore Datei im Root-Verzeichnis, um unnötige Dateien aus dem Repository fernzuhalten:

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
pnpm-debug.log*
lerna-debug.log*

# Dependencies & Build
node_modules
dist
dist-ssr
*.local

# Editor & System
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.env
test-results

---

3. Linting & Code Style (ESLint & Prettier)

ESLint Erweiterungen installieren

Für saubere Import-Reihenfolge und TypeScript-Support:

npm install --save-dev eslint-plugin-import eslint-import-resolver-typescript

ESLint Konfiguration (eslint.config.js)

Diese Konfiguration sorgt für strukturierte Imports (React → externe Libs → interne Module → Assets/CSS):

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 importPlugin from "eslint-plugin-import"
import { defineConfig, globalIgnores } from "eslint/config"

export default defineConfig([
	globalIgnores(["dist"]),
	{
		files: ["**/*.{ts,tsx}"],
		plugins: {
			import: importPlugin,
		},
		extends: [
			js.configs.recommended,
			...tseslint.configs.recommended,
			reactHooks.configs.flat.recommended,
			reactRefresh.configs.vite,
		],
		languageOptions: {
			ecmaVersion: 2020,
			globals: globals.browser,
		},
		settings: {
			"import/resolver": {
				typescript: true,
				node: {
					extensions: [".js", ".jsx", ".ts", ".tsx"],
				},
			},
		},
		rules: {
			"import/order": [
				"error",
				{
					groups: [
						"builtin",
						"external",
						"object",
						"internal",
						"parent",
						"sibling",
						"index",
						"type",
					],
					pathGroups: [
						{
							pattern: "react",
							group: "external",
							position: "before",
						},
						{
							pattern: "react/**",
							group: "external",
							position: "before",
						},
						{
							pattern: "**/*.{css,scss}",
							group: "object",
							position: "before",
						},
						{
							pattern: "**/*.{png,jpg,jpeg,svg,webp,gif,ico}",
							group: "object",
							position: "after",
						},
					],
					pathGroupsExcludedImportTypes: ["react"],
					"newlines-between": "always",
					alphabetize: {
						order: "asc",
						caseInsensitive: true,
					},
				},
			],
		},
	},
])

---

Prettier Setup

Installation:

npm install --save-dev --save-exact prettier

.prettierrc.json:

{
	"semi": false,
	"trailingComma": "es5",
	"printWidth": 80,
	"tabWidth": 4,
	"useTabs": true,
	"arrowParens": "always",
	"endOfLine": "lf"
}

---

4. Testing mit Playwright

Installation:

npm install --save-dev @playwright/test

Playwright Konfiguration (playwright.config.ts)

import { defineConfig, devices } from "@playwright/test"

export default defineConfig({
	webServer: {
		command: "npm run dev",
		port: 5173,
		reuseExistingServer: !process.env.CI,
	},
	projects: [
		{
			name: "Mobile",
			use: {
				...devices["iPhone 13"],
			},
		},
	],
})

💡 Tipp: Nutze npx playwright codegen, um Tests direkt im Browser aufzuzeichnen.

---

5. Skripte in der package.json

{
	"scripts": {
		"dev": "vite --host",
		"build": "tsc -b && vite build",
		"preview": "vite preview",
		"lint": "eslint .",
		"lint:fix": "eslint . --fix",
		"prettier": "prettier --write .",
		"test:e2e": "playwright test"
	}
}

---

6. Empfohlene Bibliotheken

Library	Zweck
react-router-dom	Navigation und Routing innerhalb der App
i18next	Internationalisierung (Mehrsprachigkeit)
vite-plugin-svgr	SVGs direkt als React-Komponenten importieren

---