· biome / prettier / typescript

Biome vs Prettier 2026 — nhanh hơn 34×, một điểm chặn cứng

Biome format toàn bộ Turborepo trong 40ms, Prettier cần 1.35s. Hãy chuyển nếu bạn không dùng prettier-plugin-tailwindcss để sort class. Đừng chuyển nếu bạn có.

Bởi Ethan

1.384 từ · 7 phút đọc

Bước format trong CI của bạn mất 1.35 giây với Prettier. Với Biome, con số đó là 40ms. Chúng tôi đo trực tiếp trên repo này — 74 file TypeScript và Astro, macOS arm64, Node 24. Chênh lệch là 34×, sát với con số ~35× mà Biome công bố chính thức.

Bạn có nên chuyển hay không phụ thuộc gần như hoàn toàn vào một câu hỏi: bạn có đang dùng prettier-plugin-tailwindcss để tự động sort class không?

Bài này dành cho ai

Developer JS/TS cấp mid đến staff đang cân nhắc thay Prettier bằng Biome trong một Turborepo hoặc Nx monorepo. Nếu stack của bạn không có Tailwind, quyết định gần như đã xong — đọc tiếp. Nếu có Tailwind, đọc phần plugin ecosystem trước rồi mới quyết định.

Chúng tôi thử nghiệm gì

  • Prettier 3.8.3 với prettier-plugin-astro — 5 lần chạy cold, lấy trung bình
  • Biome 2.4.15 — 5 lần chạy cold, lấy trung bình
  • Workload: Turborepo harryct229/toolchew, 74 file (TypeScript + Astro)
  • Máy: macOS arm64, Node 24
  • Đo ngày: 2026-05-25

Cả hai tool chỉ chạy ở chế độ format (không lint). Mỗi lần chạy bắt đầu từ shell sạch, không có cache file nào được primed sẵn.

Tốc độ

ToolTrung bình (5 lần)So với Biome
Prettier 3.8.31.35 sChậm hơn 34×
Biome 2.4.150.04 s

34× là con số thật, không phải cherry-picked. Tốc độ đến từ ba thứ cộng hưởng nhau: Biome đóng gói thành một binary Rust duy nhất, xử lý song song trên tất cả CPU core, và bỏ hoàn toàn thời gian khởi động Node.js. Prettier phải boot Node, resolve plugin, rồi xử lý file phần lớn single-threaded.

Với 74 file, bạn tiết kiệm khoảng 1.3 giây. Với 500 file, tỉ lệ tương tự — dự kiến tiết kiệm 8–10 giây mỗi lần chạy. Trên một CI pipeline chạy hàng trăm lần mỗi tuần, con số đó có nghĩa.

Một lưu ý: Prettier 3.6+ có thêm CLI thử nghiệm dựa trên OXC (--experimental-cli), nhanh hơn mặc định nhưng vẫn còn experimental và chúng tôi chưa benchmark. Nếu bạn muốn bám Prettier, đáng thử cờ này.

Migration

Biome có sẵn lệnh migration tự động xử lý config Prettier:

npx @biomejs/biome migrate prettier --write

Lệnh này đọc prettier.config.js (hoặc .prettierrc) của bạn và ghi ra biome.json với các setting tương đương. Với hầu hết config, chạy là xong ngay lần đầu.

Để xem hướng dẫn đầy đủ bao gồm cả việc chuyển ESLint rules và Prettier config sang Biome trong một lần, xem Hướng dẫn chuyển từ ESLint và Prettier sang Biome.

Trên Turborepo này, cần thêm hai bước thủ công:

1. Cú pháp @theme {} của Tailwind v4

Biome không nhận diện block @theme {} của Tailwind v4 theo mặc định và sẽ parse nó thành CSS không hợp lệ. Fix:

{
  "css": {
    "parser": {
      "cssModules": true,
      "tailwindDirectives": true
    }
  }
}

Thiếu tailwindDirectives: true, Biome sẽ báo lỗi với mọi file .css dùng @theme.

2. Gỡ prettier-plugin-astro

Biome xử lý file .astro natively. Nếu để prettier-plugin-astro trong package.json, sẽ xung đột. Gỡ đi:

npm uninstall prettier-plugin-astro

Bug đã biết: xung đột indentWidth với .editorconfig

biome migrate prettier --write có thể generate indentWidth: 2 trong biome.json.editorconfig của bạn đã định nghĩa indent_size khác, khiến formatter override nó. File .editorconfig không bị sửa. Hãy kiểm tra lại giá trị formatter.indentWidth trong biome.json được tạo ra và xóa nó đi nếu bạn muốn .editorconfig kiểm soát indentation. Theo dõi tại biomejs/biome#4146.

Tóm tắt các điểm cần lưu ý

Vấn đềTrạng tháiCách xử lý
Lỗi parse @theme {} của Tailwind v4Cần config thủ côngtailwindDirectives: true trong biome.json
Xung đột prettier-plugin-astroGỡ packagenpm uninstall prettier-plugin-astro
indentWidth xung đột với .editorconfig khi migrateBug đang theo dõi #4146Xóa formatter.indentWidth khỏi biome.json nếu dùng .editorconfig
Sort class Tailwind bằng prettier-plugin-tailwindcssKhông có tương đương trong BiomeXem phần dưới — đây là điểm chặn cứng

Plugin ecosystem

Đây là chỗ Biome còn thiếu hụt thực sự.

Hệ thống GritQL plugin của Biome chỉ hỗ trợ linting. Không có formatter plugin API. Điều đó có nghĩa prettier-plugin-tailwindcss — plugin tự động sort utility class Tailwind theo thứ tự nhất quán — hiện tại không có tương đương trong Biome.

Nếu team bạn đang dùng class sorting, chuyển sang Biome đồng nghĩa với mất tính năng đó. Bạn vẫn có thể sort thủ công hoặc dùng một bước riêng biệt, nhưng không có giải pháp thay thế trực tiếp chạy bên trong Biome.

Với project không dùng Tailwind, hoặc dùng Tailwind nhưng không quan tâm đến thứ tự class, khoảng hổng này không ảnh hưởng. Với team đang enforce class sort order trong CI, đây là điểm chặn cứng cho đến khi Biome ra formatter plugin API.

Để so sánh khả năng lint của Biome với ESLint, xem Biome vs ESLint 2026.

Trải nghiệm editor

Extension VS Code chính thức (biomejs.biome) hoạt động tốt với cả single-package repo lẫn monorepo có config biome.json riêng theo từng package. Lỗi resolve per-package config (biomejs/biome-vscode#655) đã được fix trong Biome 2.0.4 — không còn là vấn đề ở phiên bản 2.4.15.

Nếu bạn đang dùng phiên bản cũ hơn, extension không chính thức fronterior.biome-monorepo là workaround tạm thời, nhưng nên upgrade lên 2.0.4+ trước.

Đà phát triển

Biome đang trên một quỹ đạo tích cực. Tính đến tháng 5/2026: 24.7k GitHub stars, 15 triệu lượt download npm mỗi tháng, release đều đặn hàng tháng, và có sự hậu thuẫn từ Depot (Platinum sponsor) cùng Lokalise (Silver sponsor). Project đã phát triển nhanh kể từ khi fork từ Rome — phiên bản v2.0 bổ sung type-aware linting mà không cần TypeScript compiler, đây là tính năng không hề đơn giản để làm.

Prettier vẫn ổn định và không đi đâu cả. Đây là lựa chọn mặc định an toàn với hệ sinh thái khổng lồ và nhiều năm chạy trong production. Nhưng Prettier đang ở thế phòng thủ: phần lớn sự chuyển động thú vị trong không gian JS/TS formatting tooling đang diễn ra ở phía Biome.

Nếu bạn đang bắt đầu project mới hôm nay, chọn Biome mặc định là quyết định hợp lý. Nếu đang migrate, câu hỏi là liệu khoảng hổng plugin và độ nhám của editor có đáng đổi lấy tốc độ hay không.

Kết luận

Kịch bảnKhuyến nghị
Monorepo TypeScript mới, không Tailwind hoặc không enforce sort classChuyển sang Biome
Monorepo hiện có, muốn CI nhanh hơn, không dùng prettier-plugin-tailwindcssMigrate — một ngày làm việc là xong
Project nặng Tailwind với sort class được enforceỞ lại Prettier cho đến khi Biome có formatter plugin
Cần prettier-plugin-tailwindcss + format nhanhDùng hybrid: Biome cho file không phải CSS, Prettier chỉ cho file CSS/Tailwind
Chưa chắc — muốn thử trước khi quyếtChạy Biome như một bước check trong CI, chưa gỡ Prettier

Tốc độ nhanh hơn 34× là thật. Khoảng hổng prettier-plugin-tailwindcss cũng là thật. Hai thực tế này bao phủ 90% của quyết định.

Lưu ý

Chúng tôi test trên một Turborepo 74 file. Repo lớn hơn sẽ có tỉ lệ tương tự nhưng con số tuyệt đối lớn hơn — chúng tôi chưa test ở mức 1,000+ file. CLI --experimental-cli dựa trên OXC của Prettier chưa được benchmark ở đây; nếu flag đó thu hẹp khoảng cách, phép tính sẽ thay đổi.

Lỗi per-package config của VS Code monorepo (biomejs/biome-vscode#655) đã được giải quyết trong 2.0.4 — không còn là blocker ở 2.4.15.

Không có quan hệ affiliate với cả hai tool. Cả hai đều miễn phí và mã nguồn mở.

Tham khảo