Cách Prettier và ESLint giúp bạn "chia tay" lỗi code vặt

Bạn đã bao giờ rơi vào cảnh code xong nhìn lại thấy đống lộn xộn, chỗ thì dùng nháy đơn, chỗ thì nháy kép, thụt ra thụt vào không đều, hay tệ hơn là thiếu một dấu phẩy mà ngồi mò cả tiếng chưa ra? Đừng lo, bạn không cô đơn đâu. Đó là nỗi đau chung của anh em mình khi mới tập tành code. Nhưng tin vui là chúng ta hoàn toàn có thể "thuê" những trợ lý ảo cực xịn như Prettier và ESLint để dọn dẹp đống hỗn độn đó một cách tự động.

Việc sử dụng Prettier và ESLint không chỉ giúp code của bạn trông chuyên nghiệp hơn mà còn giúp quy trình làm việc (workflow) trở nên mượt mà, tránh được những cuộc tranh cãi vô bổ với đồng đội về việc nên đặt dấu ngoặc ở đâu. Hãy cùng DIA DEMY khám phá xem bộ đôi này thần thánh đến mức nào nhé!

Prettier - "Chuyên gia trang điểm" cho những dòng code của bạn

Hãy tưởng tượng Prettier giống như một chiếc bàn là, giúp mọi dòng code của bạn phẳng phiu và ngăn nắp ngay lập tức. Nhiệm vụ duy nhất của nó là định dạng (formatting). Nó sẽ tự động thêm dấu chấm phẩy, căn chỉnh lề, và ép mọi thứ vào một khuôn mẫu nhất quán mà bạn đã thiết lập trước đó.

• Tự động hoàn toàn: Bạn chỉ cần nhấn Ctrl + S (Save), và bùm, code tự nhảy về đúng vị trí.
• Nhất quán: Dù dự án có 10 người làm, code nhìn vẫn như do một người viết ra.
• Dễ đọc: Code sạch sẽ giúp bạn và đồng đội hiểu logic nhanh hơn, không bị rối mắt bởi những lỗi trình bày vặt vãnh.

Khi code của bạn đã đẹp rồi, bước tiếp theo là đảm bảo nó chạy đúng và không có lỗi tiềm ẩn. Đây là lúc vị giám khảo khó tính xuất hiện.

ESLint - "Vị giám khảo" bắt lỗi logic ngay khi bạn vừa gõ

Khác với Prettier chỉ lo chuyện "đẹp hay xấu", ESLint tập trung vào việc kiểm tra chất lượng code (linting). Nó sẽ soi từng dòng code của bạn để tìm ra những lỗi logic, những biến khai báo mà không dùng, hay những cách viết có thể gây bug nghiêm trọng sau này.

ESLint giống như một người thầy ngồi bên cạnh, khẽ gõ tay bạn mỗi khi bạn định làm gì đó dại dột. Ví dụ, nếu bạn quên khai báo biến hoặc dùng một hàm không tồn tại, ESLint sẽ gạch chân đỏ lòm để cảnh báo ngay lập tức.

// ESLint sẽ mắng bạn ngay nếu viết thế này
const user = "Demy";
console.log(users); // Lỗi: 'users' is not defined

Việc tuân thủ các quy tắc của ESLint giúp bạn hình thành tư duy viết JavaScript hiện đại, sạch sẽ và ít lỗi hơn hẳn so với việc cứ gõ đại theo bản năng.

Combo "song sát" giúp bạn nhàn tênh khi làm dự án

Tại sao phải chọn một trong hai khi bạn có thể dùng cả hai? Khi kết hợp Prettier và ESLint, bạn có một hệ thống bảo vệ hai lớp: một bên lo diện mạo, một bên lo nội dung. Đây chính là tiêu chuẩn vàng trong các dự án chuyên nghiệp hiện nay.

Để bắt đầu, bạn chỉ cần tạo các file cấu hình như .prettierrc và .eslintrc.json trong thư mục gốc của dự án. Một mẹo nhỏ là hãy cài đặt thêm plugin eslint-config-prettier để hai công cụ này không "đá" nhau khi làm việc cùng một chỗ.

Liệu bạn đã bao giờ thử cấu hình bộ đôi này cho dự án cá nhân của mình chưa? Hay bạn vẫn đang miệt mài nhấn phím Space để căn lề thủ công mỗi ngày?