Setup React App với Vite, Eslint & Prettier

Làm thế nào để setup một React Application với Vite,Typescript,Eslint và Prettier ?

Trong blog này mình sẽ hướng dẫn step-by-step để setup được một react app nhé.

À, blog này mình có tham khảo từ bài viết gốc Setup React Typescript với Vite & ESLint của anh Dư Thanh Được và thấy khá đầy đủ.

1. Cấu trúc thư mục

Đây sẽ là cấu trúc thư mục hoàn chỉnh của một React Application được setup với Vite,Typescript,Eslint và Prettier nha.

app
 ├── dist
 ├── public
 │ └── vite.svg
 ├── src
 │ ├── statics
 │ │  └── 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 sau khi build của app.
• 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 app
• Thư mục src/assets: Chứa media, css,fonts...
• Còn lại những file config mình sẽ giải thích thêm ở phía dưới.

2. Khởi tạo Vite App

Có nhiều cách để khởi tạo một Vite app, có thể bằng npm, yarn, pnpm nhé.

• Đối với npm

npm create vite@latest

• Đối với yarn

yarn create vite

• Đối với pnpm

pnpm create vite

Sẽ có một vài câu hỏi bắt buộc khi khởi tạo một Vite App

• Yêu cầu nhập tên dự án

Need to install the following packages:

  create-vite@5.4.0

Ok to proceed? (y) y

? Project name: > vite-project...

• Tiếp theo sẽ có một vài option chọn framework, chọn React nhé

- Select a framework: › - Use arrow-keys. Return to submit

> Vanilla
> Vue
> React
> Preact
> Lit
> Svelte
> Solid
> Qwik
> Others

• Tiếp theo là chọn template, 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: › - Use arrow-keys. Return to submit
> Typescript
> Typescript + SWC
> Javascript
> Javascript + SWC
> Remix

• Cuối cùng là mọi người cần cd vào app vừa được khởi tạo và install những package cần thiết

cd vite-project
npm install

3. Cài đặt các ESLint và Prettier package

Sau khi cài đặt xong Vite App thì mặc định Vite đã giúp mọi người cấu hình cơ bản cho ESLint và TypeScript rồi, nhưng để tiện hơn cho việc coding thì mọi người sẽ cài thêm 1 số package liên quan nữa.

• Đầu tiên, run câu lệnh sau

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

Đây là những thứ mọi người cần cài

• prettier: code formatter
• eslint-config-prettier: Bộ ESLint config để 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

4. Config ESlint để chuẩn hóa code

Tiếp theo, mọi người mở file .eslintrc.cjs lên

Để ESlint không check file vite.config.ts, mọi người open file .eslintrc.cjs và thêm giá trị này vào mảng ignorePatterns.

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

5. Config Prettier

Tiếp theo, mọi người cần 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
}

Mọi người nên cài Extension Prettier - Code formatter cho VS Code để nó hiểu nhé.

Để Prettier bỏ qua các file không cần thiết, mọi người tạo file .prettierignore ở thư mục root và paste đoạn code sau vào.

node_modules/
dist/

6. Config editor

Tiếp theo, mọi người cần tạo file .editorconfig ở thư mục root để 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.

Để VS Code hiểu được file này thì mọi người cài Extension là EditorConfig for VS Code nhé

[*]
indent_size = 2
indent_style = space

7. Cấu hình alias cho tsconfig.json

Việc thêm alias vào file tsconfig.json sẽ giúp VS Code hiểu mà tự động import giúp chúng ta.

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

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

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

8. Cấu hình alias cho vite vite.config.ts

Cài package @types/node để sử dụng node js trong file ts không bị lỗi

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

9. Cập nhật script

Mở file package.json lên, thêm đoạn script dưới vào

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

10. Các câu lệnh để run app

Đến đây là coi như là đã xong các bước setup.

• Chạy dự án ở môi trường dev

npm run dev

• Build app

npm run build

Ngoài ra còn có một số câu lệnh khác, như là:

• Preview kết quả build bằng câu lệnh npm run preview
• Kiểm tra dự án có bị lỗi gì liên quan ESLint không: npm run lint
• Tự động fix các lỗi liên quan ESLint (không phải cái gì cũng fix được, nhưng fix cũng nhiều): npm run lint:fix
• Kiểm tra dự án có bị lỗi gì liên quan Prettier không: npm run prettier
• Tự động fix các lỗi liên quan Prettier: npm run prettier:fix

Tổng kết

• Như vậy là đã xong các bước cơ bản để setup một React Application với Vite,Typescript,Eslint và Prettier

• Hi vọng blog này sẽ giúp mọi người một phần nào đó, se yaaa!