cách dùng prettier - code formatter

3 min read 22-11-2024

Prettier là một công cụ định dạng code mạnh mẽ và phổ biến, giúp tự động hóa việc định dạng code của bạn, đảm bảo tính nhất quán và dễ đọc. Bài viết này sẽ hướng dẫn bạn cách sử dụng Prettier một cách hiệu quả, từ cài đặt đến cấu hình tùy chỉnh.

1. Tại Sao Nên Sử Dụng Prettier?

Viết code đẹp và nhất quán là điều quan trọng đối với bất kỳ dự án nào. Prettier giúp bạn giải quyết vấn đề này bằng cách tự động định dạng code của bạn theo một chuẩn nhất định. Điều này mang lại nhiều lợi ích:

Tăng tính nhất quán: Toàn bộ code trong dự án sẽ có cùng một style, dễ đọc và dễ hiểu hơn.
Tiết kiệm thời gian: Bạn không cần phải mất thời gian để tự định dạng code nữa.
Tập trung vào logic: Bạn có thể tập trung vào việc viết code logic thay vì lo lắng về việc định dạng.
Hỗ trợ nhiều ngôn ngữ: Prettier hỗ trợ rất nhiều ngôn ngữ lập trình phổ biến như JavaScript, TypeScript, HTML, CSS, JSON, ...

2. Cài Đặt Prettier

Prettier có thể được cài đặt thông qua nhiều cách khác nhau, tùy thuộc vào môi trường phát triển của bạn:

2.1. Cài đặt toàn cục (Global):

Phương pháp này cho phép bạn sử dụng Prettier trên bất kỳ dự án nào trên máy tính của bạn.

npm install -g prettier

Hoặc sử dụng Yarn:

yarn global add prettier

2.2. Cài đặt cục bộ (Local):

Đây là cách được khuyến nghị, chỉ cài đặt Prettier cho dự án hiện tại. Điều này giúp tránh xung đột giữa các phiên bản Prettier trong các dự án khác nhau.

npm install --save-dev prettier

Hoặc sử dụng Yarn:

yarn add --dev prettier

3. Sử Dụng Prettier

Sau khi cài đặt, bạn có thể sử dụng Prettier bằng nhiều cách:

3.1. Sử dụng từ dòng lệnh:

prettier --write your_file.js

Thay your_file.js bằng đường dẫn đến file code bạn muốn định dạng. Bạn có thể định dạng nhiều file cùng lúc:

prettier --write *.js

3.2. Tích hợp với trình soạn thảo code (IDE):

Hầu hết các trình soạn thảo code phổ biến như VSCode, Atom, Sublime Text đều hỗ trợ tích hợp Prettier. Bạn chỉ cần cài đặt extension tương ứng và cấu hình Prettier trong setting của trình soạn thảo. Điều này giúp định dạng code tự động mỗi khi bạn lưu file.

4. Cấu hình Prettier

Prettier cho phép bạn tùy chỉnh một số cài đặt để phù hợp với nhu cầu của bạn. Bạn có thể tạo một file .prettierrc (JSON, YAML, hoặc JavaScript) trong thư mục gốc của dự án để cấu hình. Ví dụ:

{
  "printWidth": 80, // Độ rộng tối đa của mỗi dòng
  "tabWidth": 2, // Số lượng khoảng trắng cho mỗi tab
  "singleQuote": true, // Sử dụng dấu nháy đơn thay vì dấu nháy kép
  "trailingComma": "es5", // Thêm dấu phẩy ở cuối dòng
  "semi": false, // Không sử dụng dấu chấm phẩy ở cuối câu lệnh
  "bracketSpacing": true // Thêm khoảng trắng giữa dấu ngoặc
}

5. Câu Hỏi Thường Gặp (FAQ)

Q: Làm sao để Prettier tự động định dạng code khi tôi lưu file?

A: Cài đặt extension Prettier trong trình soạn thảo của bạn và bật tính năng tự động định dạng khi lưu file.

Q: Prettier có hỗ trợ ngôn ngữ [tên ngôn ngữ] không?

A: Kiểm tra danh sách ngôn ngữ được hỗ trợ trên trang chủ của Prettier. Hầu hết các ngôn ngữ lập trình phổ biến đều được hỗ trợ.

Q: Làm thế nào để giải quyết xung đột giữa Prettier và trình định dạng khác?

A: Tắt các trình định dạng khác trong cài đặt trình soạn thảo của bạn. Chỉ sử dụng một trình định dạng để tránh xung đột.

Kết Luận

Prettier là một công cụ tuyệt vời giúp bạn viết code sạch hơn, nhất quán hơn và tiết kiệm thời gian. Hãy thử cài đặt và sử dụng Prettier trong dự án tiếp theo của bạn để trải nghiệm sự tiện lợi mà nó mang lại. Chúc bạn thành công!