Prettier là gì? Công cụ tự động định dạng code cho cả nhóm

Thay vì để các thành viên tranh cãi về dấu nháy đơn hay nháy kép, thụt lề 2 hay 4 khoảng trắng, Prettier tự động hóa toàn bộ quy trình này bằng cách in lại code theo chuẩn riêng.

Prettier giúp loại bỏ hoàn toàn các cuộc thảo luận vô bổ về style khi review code, tiết kiệm thời gian cho những việc quan trọng hơn.

Prettier là gì?

Prettier khác biệt với các công cụ định dạng thông thường ở triết lý "opinionated" (tính định hướng cao). Nó tự đưa ra hầu hết các quyết định về định dạng thay vì cung cấp hàng nghìn tùy chỉnh cho người dùng. Khi áp dụng Prettier, bạn đồng ý để công cụ quản lý toàn bộ style của dự án, giúp chấm dứt những cuộc chiến "formatting wars" không hồi kết trong các nhóm phát triển.

Công cụ này được James Long giới thiệu vào năm 2017 với mục tiêu cốt lõi là giải quyết sự thiếu nhất quán trong mã nguồn. Prettier hỗ trợ một danh sách ngôn ngữ rất rộng bao gồm: JavaScript, JSX, TypeScript, Flow, Angular, Vue, CSS, Less, SCSS, HTML, Ember/Handlebars, JSON, GraphQL, Markdown, YAML, MJML và đặc biệt là Lightning Web Components (LWC).

Dù bạn đang xử lý một file cấu hình đơn giản hay một hệ thống phức tạp, Prettier đảm bảo mọi file đầu ra đều tuân thủ một chuẩn mực duy nhất. Nó định nghĩa lại cách mã nguồn hiển thị dựa trên cấu trúc logic bên dưới, chứ không đơn thuần là căn chỉnh khoảng trắng.

Prettier định dạng code như thế nào?

Cơ chế của Prettier rất triệt để: nó phân tích code thành một cây cú pháp trừu tượng (Abstract Syntax Tree, AST), xóa bỏ mọi định dạng gốc và in lại AST đó theo quy tắc riêng. Cách tiếp cận này đảm bảo tính nhất quán tuyệt đối, vì kết quả đầu ra không phụ thuộc vào cách bạn viết code ban đầu.

Thuật toán in của Prettier xoay quanh "print width" (độ rộng dòng). Thay vì coi đây là giới hạn cứng, Prettier dùng nó như một hướng dẫn để tính toán khi nào cần ngắt dòng. Nếu một dòng code vượt quá giới hạn thiết lập, công cụ sẽ tự động xuống hàng và sắp xếp lại các thành phần để tối ưu khả năng đọc hiểu.

Hãy xem ví dụ về một hàm có tham số quá dài:

// Trước khi dùng Prettier
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
 
// Sau khi Prettier xử lý (Tự động ngắt dòng dựa trên print width)
foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
);

Tái cấu trúc dựa trên AST giữ cho code luôn chuyên nghiệp và dễ bảo trì. Bạn có thể viết code cẩu thả khi đang tập trung vào logic, và để Prettier lo phần trình bày ngay khi lưu file.

Prettier giữ lại và bỏ qua những gì?

Mặc dù xóa hầu hết định dạng gốc, Prettier vẫn giữ lại một số yếu tố mang tính chủ quan để hỗ trợ tính dễ đọc. Nó giữ lại các dòng trống để ngăn cách các khối logic nhưng sẽ gộp nhiều dòng trống liên tiếp thành một dòng duy nhất. Với các object, Prettier giữ định dạng nhiều dòng nếu bạn chủ động xuống hàng ngay sau dấu mở ngoặc { trong code gốc.

Về dấu ngoặc kép, Prettier ưu tiên loại dấu (đơn hoặc kép) giúp giảm thiểu số lượng ký tự escape. Một điểm đáng chú ý khác là cách xử lý dấu chấm phẩy: nếu bạn tắt dấu chấm phẩy (semi: false), Prettier sẽ tự động thêm một dấu ; vào đầu các dòng bắt đầu bằng [ hoặc ( để tránh lỗi Automatic Semicolon Insertion (ASI — JavaScript tự chèn dấu chấm phẩy sai chỗ). Đây là cơ chế bảo vệ giúp code của bạn không bị chạy sai logic.

Đội ngũ phát triển cũng nhấn mạnh vào "formatting reversibility" (tính khả nghịch). Prettier cố gắng tránh các định dạng mà khi thêm hoặc xóa một thuộc tính sẽ làm thay đổi toàn bộ cấu trúc xung quanh không cần thiết. Tuy nhiên, việc giữ lại một số định dạng thủ công (như object literals) thực chất là một "workaround" (cách giải quyết tạm thời) để tránh tạo ra "noise" (nhiễu) trong lịch sử Git diff khi chưa tìm được thuật toán tối ưu hơn.

Vì sao Prettier cố tình có rất ít tùy chọn?

Triết lý của Prettier là: Thêm tùy chọn nghĩa là thêm tranh cãi. Nếu công cụ cho phép cấu hình mọi chi tiết nhỏ nhất, các nhóm sẽ lãng phí thời gian vào việc "bike-shedding" — tranh luận về những thứ vặt vãnh thay vì viết code. Bằng cách giới hạn tùy chọn, Prettier buộc mọi người phải chấp nhận một tiêu chuẩn chung và tập trung vào logic nghiệp vụ.

Sau nhiều năm thu thập phản hồi, đội ngũ phát triển đã thực hiện chính sách "frozen" (đóng băng tùy chọn): các yêu cầu thêm tùy chọn định dạng mới sẽ bị đóng mà không cần thảo luận, trừ khi có lý do kỹ thuật bắt buộc hoặc để đảm bảo tính tương thích. Nhờ vậy công cụ luôn đơn giản và dễ dự đoán.

Sự đơn giản này chính là sức mạnh giúp Prettier quản lý dự án hiệu quả. Thay vì một file cấu hình dài hàng trăm dòng, bạn chỉ cần vài thiết lập cơ bản. Khi lựa chọn bị triệt tiêu, cả hệ sinh thái phần mềm trở nên nhất quán hơn.

Prettier khác ESLint như thế nào?

Prettier và ESLint là hai công cụ bổ trợ nhau nhưng có mục đích khác biệt. Prettier là một Formatter, chuyên về hình thức (khoảng trắng, xuống hàng). ESLint là một Linter, tập trung vào chất lượng code (phát hiện biến chưa dùng, lỗi logic). Nói ngắn gọn: Prettier làm cho code "đẹp", ESLint làm cho code "đúng".

Trong một quy trình làm việc chuẩn, bạn nên dùng cả hai. Hãy sử dụng eslint-config-prettier để tắt các quy tắc định dạng của ESLint mà Prettier đã đảm nhiệm, tránh việc hai công cụ xung đột và báo lỗi lẫn nhau trên cùng một dòng code.

Cài đặt Prettier và bật định dạng khi lưu

Bạn nên cài đặt Prettier theo hai mức: Extension trên VS Code để phản hồi tức thì và cài đặt local như một devDependency để đồng nhất phiên bản cho cả nhóm. Cài đặt local thông qua npm giúp đảm bảo hệ thống CI/CD cũng sử dụng đúng quy tắc định dạng như máy của lập trình viên.

npm install --save-dev prettier

Sau đó, hãy cấu hình VS Code để tự động định dạng mỗi khi lưu file bằng cách thêm vào .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Cài đặt xong, bạn không còn phải bận tâm chuyện căn chỉnh code thủ công. Mỗi khi nhấn Ctrl + S, mã nguồn sẽ tự động trở nên sạch sẽ và đúng chuẩn, giảm thiểu rủi ro commit code lỗi định dạng lên kho lưu trữ chung.

Đưa Prettier vào quy trình của cả nhóm

Để triển khai hiệu quả cho cả nhóm, file .prettierrc là bắt buộc để đồng bộ cấu hình. Ngoài ra, bạn cần file .prettierignore để yêu cầu công cụ bỏ qua các thư mục như node_modules, dist hoặc các file đã được build. Điều này đảm bảo hiệu năng và tránh việc định dạng nhầm các file thư viện.

Một kỹ thuật thực chiến quan trọng là thiết lập Pre-commit hooks bằng husky và lint-staged. Cơ chế này đảm bảo 100% code được đẩy lên Git đều đã qua kiểm tra định dạng. Nếu code chưa chuẩn, các file trong vùng chờ commit (staging) sẽ được tự động định dạng lại và đưa vào commit trước khi quá trình tiếp tục.

Ví dụ cấu hình trong package.json:

"lint-staged": {
  "*.{js,ts,tsx,css,json,md}": [
    "prettier --write"
  ]
}

Việc "ép buộc" này giúp lịch sử commit luôn sạch, không bị lẫn các thay đổi về khoảng trắng hay dấu phẩy vô nghĩa, giúp việc review code và theo dõi thay đổi trở nên chính xác hơn rất nhiều.

Prettier, Biome và cuộc đua tốc độ

Sự trỗi dậy của các công cụ viết bằng Rust như Biome và Oxlint đã thay đổi cục diện hiệu năng. Benchmark cho thấy Biome nhanh hơn Prettier khoảng 25 lần, còn Oxlint có thể nhanh hơn ESLint tới 50-100 lần. Biome hiện đã đạt độ phủ khoảng 75-85% các quy tắc type-aware so với typescript-eslint, trở thành một đối thủ đáng gờm cho các dự án lớn cần tốc độ build cực nhanh.

Đáp lại, Prettier phiên bản 3.6 đã giới thiệu --experimental-cli giúp cải thiện tốc độ đáng kể. Bản cập nhật này cũng hỗ trợ directive @utility của Tailwind CSS v4 và tính năng --check-ignore-pragma. Nhờ nó, bạn có thể bỏ qua việc định dạng các file cụ thể bằng cách thêm comment @noformat hoặc @noprettier ở đầu file.

Sự đánh đổi ở đây là giữa tốc độ và hệ sinh thái. Biome và Oxlint rất nhanh nhưng Prettier vẫn chiếm ưu thế tuyệt đối về độ ổn định, hỗ trợ đa ngôn ngữ và hệ thống plugin phong phú. Nếu bạn ưu tiên sự an toàn và một tiêu chuẩn chung mà ai cũng biết, Prettier vẫn là lựa chọn hàng đầu.

Khi nào nên dùng Prettier?

Hãy dùng Prettier ngay từ giây phút đầu tiên khởi tạo project. Đừng đợi đến khi nhóm đông người mới đi dọn dẹp đống code lộn xộn. Nó đặc biệt hữu ích khi dự án lớn dần và việc review style bằng mắt trở nên quá tải, gây lãng phí tài nguyên của các senior engineer.

Prettier biến định dạng code thành một tiện ích hạ tầng — nó hoạt động thầm lặng để bạn tập trung hoàn toàn vào việc giải quyết các bài toán kỹ thuật khó. Trong ngành phần mềm hiện nay, dùng Prettier không còn là tùy chọn mà đã trở thành một phần của tiêu chuẩn chuyên nghiệp.

Tài liệu tham khảo

• What is Prettier? · Prettier
• Rationale · Prettier
• Option Philosophy · Prettier
• Prettier vs. Linters · Prettier
• Prettier 3.6: Experimental fast CLI and new OXC and Hermes plugins! · Prettier
• Prettier vs ESLint: Choosing the Right Tool for Code Quality — Better Stack
• Format Code with Prettier in Visual Studio Code: Setup Guide — DigitalOcean
• TypeScript Linting and Formatting Tools Compared — sph.sh
• Pre-commit Hook · Prettier