Cách ESLint & Prettier dọn rác code và thoát cảnh cãi vã

Bạn đã bao giờ tốn cả tiếng đồng hồ trong buổi review code chỉ để cãi nhau xem nên dùng dấu nháy đơn hay nháy kép? Hay bực mình vì đồng nghiệp thụt lề bằng 2 spaces trong khi bạn khăng khăng dùng 4 spaces?

Làm lập trình viên, ai cũng muốn viết ra những dòng code sạch đẹp. Nhưng khi dự án có nhiều người, mỗi người một "hệ tư tưởng", thì mã nguồn chẳng mấy chốc sẽ biến thành một mớ bòng bong. Đọc một file code mà chỗ thụt ra, chỗ thụt vào thực sự rất ức chế.

Để chấm dứt thảm cảnh này, bạn không cần phải ra nội quy khắt khe hay đi nhắc nhở từng người. Bạn chỉ cần cài đặt cấu hình ESLint và Prettier.

1. Prettier – "Anh lao công" định dạng code tự động

Prettier là một công cụ Code Formatter phổ biến nhất hiện nay. Nhiệm vụ duy nhất của nó là nhận code của bạn, phá vỡ cấu trúc cũ lộn xộn và in lại ra màn hình theo một chuẩn thống nhất.

Bạn cứ gõ code lộn xộn, dài loằng ngoằng thoải mái. Chỉ cần bấm tổ hợp phím Ctrl + S (hoặc Cmd + S), mọi thứ sẽ tự động vào nếp thẳng tắp. Code lập tức được căn lề, tự động xuống dòng và thêm bớt khoảng trắng chuẩn như sách giáo khoa.

2. ESLint – "Ông bảo vệ" khó tính bắt lỗi logic

Nhiều người lầm tưởng đã có Prettier thì không cần ESLint nữa. Thực ra, chúng sinh ra để bù trừ cho nhau. Nếu Prettier lo phần "nhìn" (formatting), thì ESLint lo phần "chất" (code quality).

ESLint sẽ quét qua toàn bộ file dự án của bạn và gạch chân đỏ những đoạn có "mùi" lỗi. Bạn khai báo một biến nhưng không bao giờ xài tới? Báo lỗi. Bạn gọi một hàm không tồn tại? Báo lỗi. Bạn quên xử lý logic bên trong vòng lặp? Cũng báo lỗi ngay lập tức.

Sửa lỗi ngay từ lúc gõ phím giúp bạn bắt bệnh từ trong trứng, tránh được cảnh loay hoay debug mò mẫm trên trình duyệt. Để cài đặt chuẩn, bạn có thể tham khảo trực tiếp tài liệu hướng dẫn của ESLint.

3. Cấu hình "cặp bài trùng" vào dự án

Để hai công cụ này hoạt động hòa thuận và không "đá" nhau, bạn cần một chút cấu hình. Cụ thể, bạn sẽ dùng ESLint để kiểm tra logic, và nhường toàn quyền định dạng lại cho Prettier.

Với Prettier, bạn chỉ cần tạo một file .prettierrc đơn giản ở thư mục gốc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Với đoạn cấu hình trên, toàn bộ team của bạn sẽ bị "ép" dùng dấu nháy đơn và thụt lề 2 spaces. Không ai có thể cãi lại cái máy được! Mọi tranh luận mệt mỏi về style code sẽ chấm dứt hoàn toàn từ đây.

4. Ép chuẩn trước khi đẩy code (Commit)

Có tool xịn nhưng nếu đồng nghiệp... cố tình tắt đi thì sao? Đó là lúc bạn cần đến chiêu cuối: Husky và lint-staged.

Hai công cụ này đóng vai trò như một chốt chặn bảo vệ cuối cùng. Khi ai đó gõ lệnh git commit, Husky sẽ chặn lại, bắt lint-staged tự động chạy ESLint và Prettier lên các file vừa sửa đổi. Nếu có lỗi lọt lưới, commit đó sẽ bị hủy lập tức.

Đây là một bước đệm hoàn hảo và cực kỳ an toàn. Một khi code rác đã bị chặn từ máy cá nhân, hệ thống CI/CD trên server, ví dụ như khi bạn setup luồng chạy tự động GitHub Actions, sẽ ít khi bị sập hay báo lỗi ngớ ngẩn nữa.

Tự động hóa việc format và linting code không chỉ giúp dự án trông chuyên nghiệp hơn. Quan trọng nhất, nó trả lại cho bạn và team thời gian để bàn về kiến trúc, về trải nghiệm người dùng, thay vì tốn công soi từng dấu chấm phẩy.

Nếu bạn muốn học thêm những tư duy tối ưu hiệu suất công việc như vậy, hãy tham khảo các bài viết và khóa học tại DIA DEMY (uxui.edu.vn) nhé. Bạn đã sẵn sàng để dọn sạch đống code rác trong dự án hiện tại của mình chưa? Lần tới, chúng ta sẽ bàn cách thiết lập môi trường Git hoàn chỉnh với Conventional Commits để quản lý lịch sử code xịn sò hơn!