Posted inDevelopment

Biome: Tạm biệt ‘mê cung’ ESLint và Prettier để tăng tốc dự án gấp 25 lần

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Nỗi ám ảnh mang tên “Xung đột cấu hình” giữa ESLint và Prettier

Nếu từng khởi tạo dự án React hay Next.js, chắc hẳn bạn đã quá quen với cảnh cài đặt hàng tá package bổ trợ. Nào là eslint, prettier, rồi đến eslint-config-prettier hay eslint-plugin-prettier. Chỉ riêng việc giữ cho code vừa sạch vừa đúng format đã ngốn của chúng ta cả tiếng đồng hồ cấu hình.

Vấn đề không chỉ nằm ở lúc setup. Trong một dự án thực tế với hơn 100.000 dòng code mình từng tham gia, lệnh npm run lint mất gần 2 phút để hoàn thành. Đôi khi Prettier vừa sửa xong thì ESLint lại báo lỗi ngược lại. Cảm giác lúc đó cực kỳ ức chế. Công cụ hỗ trợ lại vô tình trở thành rào cản làm chậm tiến độ công việc.

Tại sao bộ đôi ESLint & Prettier lại dần trở nên nặng nề?

Việc duy trì hai công cụ riêng biệt cho Linting và Formatting đang bộc lộ nhiều điểm yếu cố hữu:

  • Tốc độ rùa bò: Cả hai đều chạy trên Node.js. Khi dự án phình to, việc phân tích cây cú pháp (AST) lặp đi lặp lại khiến CPU luôn trong tình trạng quá tải.
  • Cấu hình chồng chéo: Bạn buộc phải dùng thêm các plugin trung gian để ngăn chúng “đấm nhau”.
  • Gánh nặng Dependency: Nhìn vào package.json, đôi khi các thư viện chỉ để format code đã chiếm tới 15-20MB dung lượng node_modules.

Các phương án giải quyết hiện nay

Cộng đồng lập trình thường rỉ tai nhau 3 hướng giải quyết chính:

  1. Sống chung với lũ: Tiếp tục dùng bộ đôi cũ và tối ưu bằng cache. Cách này an toàn nhưng không giải quyết được gốc rễ vấn đề tốc độ.
  2. Dùng Linter bằng Rust: Điển hình là oxlint với tốc độ bàn thờ. Tuy nhiên, nó hiện chỉ tập trung vào linting mà thiếu khả năng format code.
  3. Chuyển sang Biome (tiền thân là Rome): Một bộ công cụ “tất cả trong một” viết bằng Rust. Nó thay thế hoàn hảo cho cả ESLint lẫn Prettier.

Tại sao Biome là ‘chân ái’ ở thời điểm hiện tại?

Thực tế kiểm chứng trên dự án outsource quy mô trung bình cho thấy Biome nhanh hơn Prettier khoảng 25 lần. Thay vì đợi vài chục giây, Biome xử lý hàng nghìn file chỉ trong mili giây. Nó tích hợp sẵn linting, formatting và tự động sắp xếp import vào duy nhất một binary nhỏ gọn.

Dưới đây là các bước mình đã thực hiện để dọn dẹp dự án và chuyển sang Biome.

1. Cài đặt tối giản

Thay vì cài 5-6 packages, giờ đây bạn chỉ cần đúng một dòng lệnh:

npm install --save-dev --save-exact @biomejs/biome

Lưu ý: Hãy dùng --save-exact để cố định phiên bản. Việc này giúp đảm bảo mọi thành viên trong team luôn có cùng một kiểu format code.

2. Khởi tạo cấu hình trong chớp mắt

Chỉ cần chạy lệnh sau để tạo file biome.json:

npx biome init

Cấu hình của Biome rất trực quan và dễ đọc. Dưới đây là mẫu cấu hình mình thường áp dụng cho các dự án thực tế:

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": { "useNamingConvention": "warn" }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "quoteStyle": "single"
  }
}

3. Di chuyển tự động từ ESLint/Prettier

Bạn ngại phải gõ lại hàng trăm rule cũ? Biome cung cấp lệnh chuyển đổi tự động cực kỳ thông minh:

npx biome migrate prettier --write
npx biome migrate eslint --write

Công cụ sẽ tự đọc file .eslintrc hoặc .prettierrc và ánh xạ sang cấu hình tương đương. Quá trình này giúp mình tiết kiệm ít nhất 30 phút ngồi rà soát thủ công.

4. Tận hưởng tốc độ thực thi

Để kiểm tra lỗi và format lại toàn bộ code, bạn sử dụng lệnh:

# Vừa check lỗi vừa tự động sửa và format
npx biome check --write .

Mình thường đưa các lệnh này vào scripts của package.json để đồng nhất quy trình cho cả team:

"scripts": {
  "lint": "biome check .",
  "lint:fix": "biome check --write ."
}

Thiết lập ‘chốt chặn’ trên GitHub Actions

Để ngăn code xấu lọt vào nhánh chính, việc tích hợp Biome vào CI là bước không thể thiếu. Vì Biome chạy siêu nhanh, nó gần như không làm tăng thời gian chờ đợi của Pipeline.

name: CI
on: [push, pull_request]
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - name: Run Biome
        run: npx @biomejs/biome ci .

Lệnh biome ci . sẽ kiểm tra nghiêm ngặt. Nếu code chưa format hoặc còn lỗi linter, nó sẽ báo fail ngay lập tức.

Vài lưu ý nhỏ từ trải nghiệm thực tế

Dù Biome rất mạnh mẽ, bạn vẫn cần lưu ý một số điểm trừ nhỏ trước khi quyết định chuyển đổi:

  • Hệ sinh thái: Biome chưa có lượng plugin khổng lồ như ESLint. Nếu dự án dùng những rule quá dị biệt, hãy kiểm tra kỹ tài liệu của Biome trước.
  • Cấu hình VS Code: Hãy cài extension Biome và đặt nó làm Default Formatter. Tránh để nó chạy song song với Prettier vì sẽ gây loạn định dạng khi nhấn Save.
  • Chiến thuật áp dụng: Với dự án cũ (legacy), đừng chuyển đổi ồ ạt. Hãy thử nghiệm trên một vài folder nhỏ để đánh giá độ tương thích.

Tóm lại, Biome là lựa chọn sáng giá nếu bạn ưu tiên tốc độ và sự đơn giản. Trải nghiệm code mượt mà, không giật lag khi lưu file là thứ mà ESLint khó lòng mang lại được.

Share:
Tags: