npx create-react-app myweb vẫn chạy được nhưng không còn tạo ra dự án React + TypeScript hoạt động — xem vấn đề này. Next.js và Gatsby thường là thừa thãi đối với một SPA đơn giản, còn Vite có vấn đề bộ nhớ đã biết nhưng hiếm khi ảnh hưởng trong thực tế. Vite vẫn là lựa chọn mặc định tốt nhất cho SPA React + TypeScript — đây là hướng dẫn thiết lập chi tiết.

Bước 1: Khởi tạo dự án

npm create vite@latest

Dùng lệnh này nếu bạn muốn khởi tạo dự án tại thư mục hiện tại: npm create vite@latest .

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

SWC nhanh gấp 20 lần Babel trên một luồng đơn và nhanh gấp 70 lần trên bốn lõi. Theo trang chủ

Bước 2: Cài đặt Prettier và ESLint

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

Thêm vite.config.ts vào phần ignores trong eslint.config.js:

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

Import eslint-plugin-prettier vào eslint.config.js, sau đó thêm nó vào danh sách plugins của ESLint.

import eslintPluginPrettier from 'eslint-plugin-prettier'

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

Tiếp theo, cấu hình rule cho Prettier bằng cách thêm vào danh sách rules trong eslint.config.js:

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

Tạo file .prettierrc với nội dung sau:

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

Bước 3: Cấu hình Visual Studio Code

Cài đặt các extension sau:

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

Thêm các cấu hình sau vào 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"
}

Bước 4: Các bước tùy chọn

Ánh xạ @/* tới src/* để bạn có thể dùng import '@/shared/Header' thay vì import '../../shared/Header', bằng cách thêm compilerOptions trong tsconfig.json:

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

Chúng ta cũng cần cấu hình alias cho Vite, bằng cách thêm alias trong 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')
    }
  }
})

Thêm các script tiện ích cho CI/CD bằng cách bổ sung vào phần scripts trong package.json:

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

Bước 5: Thêm Tailwind CSS

Chỉ cần làm theo hướng dẫn chính thức này: https://tailwindcss.com/docs/guides/vite

Vậy là xong — để khởi động development server: npm run dev