npx create-react-app myweb funktioniert zwar noch, erstellt aber kein funktionsfähiges React + TypeScript-Projekt mehr — siehe dieses Issue. Next.js und Gatsby sind für eine einfache SPA oft überdimensioniert, und Vite hat ein bekanntes Speicherproblem, das in der Praxis jedoch selten relevant ist. Vite bleibt die beste Standardwahl für eine React + TypeScript SPA — hier ist die Einrichtung.

Schritt 1: Projekt initialisieren

npm create vite@latest

Verwenden Sie diesen Befehl, wenn Sie das Projekt im aktuellen Verzeichnis initialisieren möchten: npm create vite@latest .

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

SWC ist 20x schneller als Babel auf einem einzelnen Thread und 70x schneller auf vier Kernen. Von der Website

Schritt 2: Prettier und ESLint einrichten

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

Fügen Sie vite.config.ts zur Ignorieren-Liste in eslint.config.js hinzu:

export default tseslint.config(
  { ignores: ['dist', 'vite.config.ts'] },
  {
...

Importieren Sie eslint-plugin-prettier in eslint.config.js und fügen Sie es dann zur Plugins-Liste von ESLint hinzu.

import eslintPluginPrettier from 'eslint-plugin-prettier'

export default tseslint.config(
  ...
  plugins: {
    'react-hooks': reactHooks,
    'react-refresh': reactRefresh,
    'prettier': eslintPluginPrettier,
  },
  ...

Richten Sie nun die Regel für Prettier ein, indem Sie Folgendes zur Regeln-Liste in eslint.config.js hinzufügen:

'prettier/prettier': [
  'warn',
  {
    arrowParens: 'always',
    semi: false,
    trailingComma: 'none',
    tabWidth: 2,
    endOfLine: 'auto',
    useTabs: false,
    singleQuote: true,
    printWidth: 120,
    jsxSingleQuote: true
  }
]

Fügen Sie .prettierrc mit folgendem Inhalt hinzu:

{
  "arrowParens": "always",
  "semi": false,
  "trailingComma": "none",
  "tabWidth": 2,
  "endOfLine": "auto",
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true
}

Schritt 3: Visual Studio Code konfigurieren

Installieren Sie folgende Erweiterungen:

• Prettier - Code formatter
• Eslint
• Jest
• ES7+ React/Redux/React-Native snippets

Fügen Sie Folgendes zu settings.json hinzu:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
},
"[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
    "*.css": "tailwindcss"
}

Schritt 4: Optionale Schritte

@/* auf src/* mappen, sodass Sie import '@/shared/Header' statt import '../../shared/Header' verwenden können — fügen Sie compilerOptions in tsconfig.json hinzu:

{
  "files": [],
  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Vite muss ebenfalls über diese Zuordnung informiert werden — fügen Sie alias in vite.config.js hinzu:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

Fügen Sie Utility-Skripte für CI/CD hinzu, indem Sie dies im scripts-Bereich von package.json einfügen:

"scripts": {
  ...
  "lint:fix": "eslint . --fix",
  "prettier": "prettier --check \"src/**/(*.tsx|*.ts|*.css|*.scss)\"",
  "prettier:fix": "prettier --write \"src/**/(*.tsx|*.ts|*.css|*.scss)\""
}

Schritt 5: Tailwind CSS hinzufügen

Folgen Sie einfach dieser Anleitung: https://tailwindcss.com/docs/guides/vite

Das war's — zum Starten der Entwicklung: npm run dev