Prettier: Công Cụ Định Dạng Code Hoàn Hảo Cho Dự Án Của Bạn

Dec 16, 2024

Viết code đẹp, dễ đọc không chỉ giúp bạn làm việc hiệu quả hơn mà còn tạo điều kiện thuận lợi khi làm việc nhóm. Tuy nhiên, việc định dạng code thủ công đôi khi có thể gây mất thời gian và không đồng nhất. Prettier – một công cụ định dạng code tự động – chính là giải pháp hoàn hảo cho vấn đề này.

Trong bài viết này, chúng ta sẽ tìm hiểu Prettier là gì, vì sao nên sử dụng nó, và cách cài đặt cũng như sử dụng Prettier để định dạng code trong dự án.

1. Prettier là gì?

Prettier là một trình định dạng mã nguồn (code formatter) hỗ trợ nhiều ngôn ngữ lập trình như JavaScript, TypeScript, CSS, HTML, JSON, YAML, Markdown, và hơn thế nữa.
Prettier đảm bảo mã nguồn của bạn tuân theo một chuẩn định dạng thống nhất, bất kể ai là người viết mã.

Tính năng nổi bật của Prettier

Định dạng tự động: Prettier tự động sửa lỗi định dạng như thụt lề sai, dấu phẩy thừa, hoặc khoảng cách không đồng đều.
Hỗ trợ nhiều ngôn ngữ: Từ front-end (HTML, CSS, JavaScript) đến back-end (GraphQL, Markdown).
Tích hợp dễ dàng: Có thể sử dụng với các IDE phổ biến như VS Code, WebStorm hoặc thông qua CLI.
Tuân thủ quy chuẩn: Prettier áp dụng các quy chuẩn định dạng phổ biến, giúp code sạch hơn và dễ đọc hơn.

2. Tại sao nên sử dụng Prettier?

Lợi ích của việc sử dụng Prettier:

Tiết kiệm thời gian: Không cần mất thời gian sửa lỗi định dạng code thủ công.
Đồng bộ quy chuẩn: Toàn bộ team cùng tuân theo một chuẩn định dạng duy nhất.
Tránh tranh luận về style code: Với Prettier, mọi quy chuẩn đều được tự động hóa, giúp bạn tập trung vào logic code thay vì tranh cãi về cách thụt lề hay dùng dấu phẩy.
Tích hợp dễ dàng: Prettier có thể chạy tự động mỗi khi bạn lưu file hoặc commit code.

3. Cách cài đặt và sử dụng Prettier

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

Cài đặt Prettier trong dự án

Mở terminal và chạy lệnh:

npm install --save-dev prettier

Cài đặt Prettier global

Nếu muốn dùng Prettier ngoài phạm vi dự án, bạn có thể cài đặt toàn cầu:

npm install --global prettier

Bước 2: Tạo file cấu hình Prettier

Prettier sử dụng một file cấu hình để xác định các quy tắc định dạng. File này có thể là:

.prettierrc (JSON hoặc YAML)
prettier.config.js

Ví dụ về file .prettierrc:

Giải thích một số tùy chọn phổ biến:

printWidth: Số ký tự tối đa trên một dòng (mặc định là 80).
tabWidth: Số khoảng cách cho mỗi tab (mặc định là 2).
useTabs: Sử dụng tab (true) hay khoảng trắng (false).
semi: Thêm dấu chấm phẩy (true) hay không (false).
singleQuote: Sử dụng dấu nháy đơn thay vì nháy kép.
trailingComma: Thêm dấu phẩy cuối cùng trong các phần tử array/object (tùy chọn: "none", "es5", "all").

Bước 3: Định dạng code bằng Prettier

Chạy Prettier qua CLI

Bạn có thể định dạng toàn bộ file bằng cách chạy:

npx prettier --write .

Lệnh trên sẽ định dạng tất cả các file trong dự án.

Sử dụng Prettier trong IDE

Với VS Code:
1. Cài extension “Prettier – Code formatter”.
2. Vào File > Preferences > Settings, tìm “Editor: Default Formatter” và chọn “Prettier”.
3. Bật tính năng định dạng khi lưu bằng cách bật tùy chọn Editor: Format On Save.
Với WebStorm:
Prettier đã được tích hợp sẵn. Bạn chỉ cần vào Preferences > Languages & Frameworks > Prettier, chọn đường dẫn đến Prettier và bật tính năng On Save.

4. Tích hợp Prettier với Git Hook

Để đảm bảo code được định dạng trước khi commit, bạn có thể dùng husky và lint-staged.

Cài đặt các công cụ:

npm install --save-dev husky lint-staged

Thêm cấu hình vào file package.json:

5. Một số lưu ý khi sử dụng Prettier

Prettier không phải công cụ lint (kiểm tra lỗi). Hãy sử dụng kết hợp với ESLint để kiểm soát cả lỗi cú pháp và định dạng.
Prettier tập trung vào việc định dạng code, do đó không có tùy chọn quá phức tạp hoặc chi tiết như ESLint.

6. Lời kết

Với Prettier, bạn có thể yên tâm rằng code của mình luôn được định dạng đẹp và chuẩn. Việc cài đặt và sử dụng Prettier không chỉ giúp bạn tiết kiệm thời gian mà còn tăng cường hiệu quả làm việc nhóm, đảm bảo sản phẩm cuối cùng đạt chất lượng cao nhất.

Hãy thử ngay Prettier trong dự án của bạn và cảm nhận sự khác biệt! 😊

You need to login in order to like this post: click here