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 fileindex.htmlvà 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 formattereslint-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!
Vite
React
ESlint
Prettier
Typescript
