npx create-react-app myweb fonctionne toujours, mais il ne génère plus de projet React + TypeScript fonctionnel — voir ce problème. Next.js et Gatsby sont souvent excessifs pour une SPA simple, et Vite a son propre problème de mémoire connu, rarement gênant en pratique. Vite reste le meilleur choix par défaut pour une SPA React + TypeScript — voici la configuration.

Étape 1 : Initialiser le projet

npm create vite@latest

Utilisez cette commande si vous souhaitez initialiser le projet dans le répertoire actuel : npm create vite@latest .

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

SWC est 20 fois plus rapide que Babel sur un seul thread et 70 fois plus rapide sur quatre cœurs. D'après son site web

Étape 2 : Configurer Prettier et ESLint

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

Ajoutez vite.config.ts à la section ignores dans eslint.config.js :

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

Importez eslint-plugin-prettier dans eslint.config.js, puis ajoutez-le à la liste des plugins d'ESLint.

import eslintPluginPrettier from 'eslint-plugin-prettier'

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

Configurez maintenant la règle pour Prettier en ajoutant ce qui suit à la liste des règles dans eslint.config.js :

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

Ajoutez .prettierrc avec le contenu suivant :

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

Étape 3 : Configurer Visual Studio Code

Installez les extensions suivantes :

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

Ajoutez ce qui suit à settings.json :

"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"
}

Étape 4 : Étapes optionnelles

Mappez @/* vers src/* afin de pouvoir utiliser import '@/shared/Header' au lieu de import '../../shared/Header', en ajoutant compilerOptions dans tsconfig.json :

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

Nous devons aussi informer Vite de ce mappage, en ajoutant alias dans vite.config.js :

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')
    }
  }
})

Ajoutez des scripts utilitaires pour CI/CD en incluant ce qui suit dans le champ scripts de package.json :

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

Étape 5 : Ajouter Tailwind CSS

Suivez simplement ce guide officiel : https://tailwindcss.com/docs/guides/vite

C'est tout — pour démarrer le développement : npm run dev