🚀 Xây dựng Base Project với React 19, Tailwind v4, ShadCN và Vite - Phần 2: Setup Prettier, ESLint & Import Sorted

0 0 0

Người đăng: Lê Anh Ngọc

Theo Viblo Asia

Có ai từng sửa code của người khác mà không dám bật auto format chưa?!

Mình từng gặp case này: Codebase không có Prettier, ESLint từ đầu, mỗi người một format. Lúc vào fix bug hay làm tiếp, chỉ cần bấm save một phát là VSCode auto format cả file 😱. (khiến ae chỉ dám gõ chay, hoặc format 1 đoạn đã select)

Thế là git diff toàn thấy tên mình, trong khi thực tế chỉ sửa vài dòng. Sau này cần trace lỗi, team nhìn git blame toàn tên mình, trong khi bug có từ đời nào rồi (trace history thì vẫn ra thôi kk)

💡 Giải pháp: Nếu có một codebase rõ ràng, format convention ngay từ đầu, thì ai sửa cũng không sợ, code luôn sạch đẹp, dễ maintain!


Hôm nay chúng ta sẽ làm gì?

✅ Giải thích về Prettier, ESLint, Import Sorted

✅ Cài đặt và cấu hình chúng trong project

✅ Tự động format & lint code ngay trong VSCode

🔥 Làm xong phần này, codebase sẽ gọn gàng hơn, không còn chuyện "mỗi người một format" nữa!


Prettier là gì?

Prettier là một trình format code tự động theo quy tắc nhất định.

Không bắt lỗi code như ESLint, mà chỉ giúp định dạng code theo một chuẩn nhất định.

Lợi ích: Tự động format code khi save (tùy vào cài đặt của VSCode), giúp team theo 1 coding style.

ESLint là gì?

ESLint là một công cụ phân tích giúp phát hiện lỗi code sớm.

Khác với Prettier, ESLint bắt lỗi logic, lỗi cú pháp, best practices và có thể tuỳ chỉnh rule theo từng dự án.

Lợi ích: Phát hiện lỗi tiềm ẩn ngay trong editor (ví dụ: quên khai báo biến, lỗi React hooks...) Cho phép tuỳ chỉnh rule theo dự án.


Bây giờ, chúng ta sẽ setup từng công cụ!

Bước 1: Cài đặt Prettier

Cài đặt Prettier: 1.png

Tạo file .prettierrc để cấu hình Prettier. Đồng thời, cài đặt thêm prettier-plugin-tailwindcss để đảm bảo CSS của Tailwind cũng được format đúng chuẩn.

npm install -D prettier-plugin-tailwindcss

Thêm plugin vào file cấu hình .prettierrc.json: 2.png

Thêm file .prettierignore để bỏ qua các file không cần format: image.png

Test thử bằng lệnh:

npx prettier --write .

3.png 🔥 Tất cả code sẽ được format theo chuẩn ngay lập tức!


Bước 2: Cấu hình ESLint (dùng sẵn của Vite)

Với Vite + React 19 + TypeScript, ESLint đã được setup sẵn, chỉ cần chỉnh sửa nhẹ!

Nhưng mà... thật sự mà nói, ESLint đôi khi cũng khá "toxic", check quá gắt. Có lần ngồi fix bug, cuối cùng lại mất cả buổi để sửa mấy cái warning về type.

Vì thế, mình thường tắt cái check any đi cho đỡ đau đầu (chỉ dùng any khi thực sự cần thiết nha 😆).

Mở file .eslintrc.cjs (nếu chưa có, tạo mới) và chỉnh sửa như sau: 4.png Test thử bằng lệnh:

npx eslint "src/**/*.{js,ts,jsx,tsx}"

5.png

🔥 ESLint sẽ quét toàn bộ project, báo lỗi và đề xuất cách fix!


Bước 3: Cài đặt Import Sorted

Việc giữ thứ tự import nhất quán cũng quan trọng không kém, vì nếu mỗi người một kiểu import, thì log git history sẽ lẫn lộn, khó trace lại ai sửa cái gì.

Dùng plugin @trivago/prettier-plugin-sort-imports để tự động sắp xếp import theo một thứ tự cố định mỗi khi format code!

Cài đặt plugin:

npm install -D @trivago/prettier-plugin-sort-imports

Cập nhật file .prettierrc để tích hợp sorting import vào Prettier:

7.png Cách hoạt động của config này:

  • Các thư viện core react sẽ lên trên cùng.
  • Thư viện bên thứ ba (THIRD_PARTY_MODULES) đứng ngay sau.
  • Các file trong @/type, @/constant..., @/views nhóm tiếp theo.
  • Các import từ ./ (local files) để xuống cuối cùng.

À quên bạn có thể thêm dòng này vào package.json để chạy Prettier nhanh chóng:

6.png Thử chạy bằng lệnh:

npm run format

🔥 Tất cả import trong code sẽ tự động sắp xếp gọn gàng!


1 tip để bạn có thể format code dễ hơn thay vì Shift + Alt + Fđể format code giống mình thì mở VSCode, vào Settings (Ctrl + ,) → Tìm Format on Save → Bật lên.

Kết luận

Vậy là bạn đã hoàn thành Phần 2 của series:

✅ Cài đặt Prettier để format code tự động

✅ Cấu hình ESLint

✅ Tích hợp Import Sorted để sắp xếp import chuẩn chỉnh

👉 Ở Phần 3, chúng ta sẽ setup theme color, typography... để thống nhất UI/UX trong dự án!

Anh em thấy bộ config này thế nào? Có mẹo nào giúp codebase sạch hơn? Cùng chia sẻ nhé!

Link github: https://github.com/ngocla99/project-starter/tree/main/reactjs-19

Linkedin: https://www.linkedin.com/in/ngocla99/

Bình luận

Bài viết tương tự

- vừa được xem lúc

Hãy sử dụng ESLint cho dự án của bạn!

. Bài viết gốc: https://manhhomienbienthuy.bitbucket.io/2018/May/20/we-should-use-eslint-in-project.html (đã xin phép tác giả ).

0 0 78

- vừa được xem lúc

Là lập trình viên, bạn đã từng nghe nói đến .editorconfig?

Hôm kia tình cờ lân la lên thư viện PaperCSS trên GitHub, mình phát hiện ra project của họ có sử dụng file .editorconfig. Tò mò vì chả biết đó là gì, mình bắt đầu tìm hiểu thử và thực sự bất ngờ về công dụng của nó. Và tìm hiểu .

0 0 42

- vừa được xem lúc

Cấu hình eslint airbnb, prettier cho dự next.js sử dụng typescript

Chào mọi, mình đã quay lại đây. Hôm nay mình sẽ đem đến một chủ đề linter cụ thể cấu hình eslint cho dự án next.

0 0 196

- vừa được xem lúc

Nâng cao chất lượng code và hiệu quả làm việc nhóm với Husky, Lint-Staged, CommitLint

Chào mừng các bạn đã quay trở lại với blog của mình, lại là mình đây (dù chả ai biết mình là ai ). Hôm nay không Docker cũng chẳng VueJS , mà chúng ta sẽ cùng nhau tìm hiểu cách cải thiện chất lượng c

0 0 114

- vừa được xem lúc

Tận dụng tối đa 100% sức mạnh của ESLint (phần 1)

Nếu bạn là một JavaScript developer chân chính, một trong những điều quan trọng bạn cần biết là sử dụng Linter, cụ thể là ESLint. Nhưng sử dụng thế nào cho hợp lý, cho đúng cách, phát huy đúng tác dụn

0 0 86

- vừa được xem lúc

Tại sao phải sử dụng ESlint?

1. Lint là gì. 2. ESlint là gì.

0 0 114