Vite dạo gần đây đang là xu hướng, vì cách setup đơn giản và tốc độ thực thi nhanh hơn nhiều so với Webpack.

Table of contents

Cấu trúc thư mục ReactJs Vite

📦react-app
 ├─dist
 ├─public
 │  └─vite.svg
 ├─src
 │  ├─assets
 │  │  └─react.svg
 │  ├─App.css
 │  ├─App.tsx
 │  ├─index.css
 │  ├─main.tsx
 │  └─vite-env.d.ts
 ├─.editorconfig
 ├─.eslintignore
 ├─.eslintrc.cjs
 ├─.gitignore
 ├─.prettierignore
 ├─.prettierrc
 ├─index.html
 ├─package-lock.json
 ├─package.json
 ├─tsconfig.json
 ├─tsconfig.node.json
 └─vite.config.ts

• Thư mục dist: Thư mục chứa các file build
• Thư mục public: Chứa file index.html và các file liên quan như favicon.ico, robots.txt,…
• Thư mục src: Chứa mã nguồn chính của chúng ta
• Thư mục src/assets: Chứa media, css, fonts
• Còn lại những file config

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

Vite yêu cầu Node version 14.18+, 16+ để có thể hoạt động ổn định. Tuy nhiên một số template yêu cầu version cao hơn, vậy nên nếu nó warning thì anh em update nodejs lên version cao hơn nhé.

Có thể dùng npm hoặc yarn hoặc pnpm đều được.

// npm
npm create vite@latest


// yarn
yarn create vite


//pnpm
pnpm create vite

Sau khi chạy sẽ yêu cầu nhập tên dự án

Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
✔ Project name: … react-app

Tiếp theo là chọn Framework

✔ Select a framework: › React

Chọn template, ở đây mình chọn TypeScript + SWC, SWC sẽ thay thế Babel cho việc biên dịch code Typescript/Javascript. SWC có tốc độ nhanh hơn 20 lần khi so với Babel

✔ Select a variant: › TypeScript + SWC

Tiếp theo là thư mục vừa được Vite tạo

cd react-app

Cài đặt các package

npm i

Bước 2 - Cài các package liên quan ESLint và Prettier

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

• Đây là những thứ chúng ta cài

• prettier: code formatter chính

• eslint-config-prettier: Bộ config ESLint để vô hiệu hóa các rule của ESLint mà xung đột với Prettier.

• eslint-plugin-prettier: Dùng thêm 1 số rule Prettier cho ESLint

Bước 3 - Config ESlint để chuẩn hóa code

Mở file .eslintrc.cjs lên

Thêm đoạn giá trị này vào mảng ignorePatterns, mục đích là mình không muốn ESLint check file vite.config.ts

Mở file .eslintrc.cjs lên

Thêm đoạn giá trị này vào mảng ignorePatterns, mục đích là mình không muốn ESLint check file vite.config.ts

"vite.config.ts";

Thêm đoạn code sau vào mảng extends

"eslint-config-prettier", "prettier";

Thêm đoạn code sau vào mảng plugins

"prettier";

Thêm đoạn code sau vào object rules để thêm các rule của Prettier

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

Bước 4 - Config Prettier để format code

Tạo file .prettierrc trong thư trong thư mục root với nội dung dưới đây

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

Tiếp theo Tạo file .prettierignore ở thư mục root

Mục đích là Prettier bỏ qua các file không cần thiết

node_modules/
dist/

Bước 5 - Config editor để chuẩn hóa cấu hình editor

Tạo file .editorconfig ở thư mục root

Mục đích là cấu hình các config đồng bộ các editor với nhau nếu dự án có nhiều người tham gia.

[*]
indent_size = 2
indent_style = space

Bước 6 - Cấu hính alias cho tsconfig.json

Thêm đoạn này vào compilerOptions trong file tsconfig.json

Ý nghĩa của đoạn này là ta có thể import Home from ’@/pages/Home’ thay vì import Home from ’../../pages/Home’. Ngắn gọn và dễ nhìn hơn nhiều!

"baseUrl": ".",
"paths": {
  "@/*": ["src/*"]
}

Bước 7 - Cấu hình alias cho vite vite.config.ts

npm i @types/node -D

Cấu hình alias và enable source map ở file vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
  css: {
    devSourcemap: true,
  },
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./src"),
    },
  },
});

Bước 8 - Cập nhật script cho package.json

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