Biome: Linter/Formatter Nhanh Thay Thế Prettier+ESLint

Biome là toolchain hiện đại cho phát triển web, cung cấp linter và formatter đầy đủ tính năng cho JavaScript, TypeScript, JSX, JSON, CSS và GraphQL. Thiết kế từ đầu để thay thế dupla Prettier + ESLint, Biome tập trung vào hiệu suất và trải nghiệm lập trình, được viết hoàn toàn bằng Rust để đạt tốc độ nhanh hơn nhiều so với các công cụ dựa trên Node.js.

Lý Do Ra Đời Biome

Trước đây, sinh viên web JavaScript/TypeScript thường phải dùng hai công cụ riêng biệt:

Prettier: Formatter stanovished, nhưng tốc độ chậm trên file lớn và cấu hình hạn chế.
ESLint: Linter mạnh mẽ nhưng tốn tài nguyên, cấu hình phức tạp và chậm khi chạy toàn bộ dự án.

Những bất lợi này gây ra:

Thời gian chờ đợi khi format/lint mỗi lần lưu file.
Cấu hình lặp lại qua file .prettierrc, .eslintrc, package.json.
Tích hợp IDE phức tạp do phải chạy hai tiến trình nền.

Biome giải quyết vấn đề này bằng cách đưa linter và formatter vào cùng một binary duy nhất, viết bằng Rust để tối ưu hiệu suất và giảm thiểu sự phụ thuộc vào Node.js.

Ưu Điểm Của Biome

1. Tốc độ nhẹ nhàng

Biome được benchmark cho thấy 10-30x nhanh hơn Prettier và 2-5x nhanh hơn ESLint trong nhiều tình huống thực tế. Điểm nhấn:

Format toàn bộ dự án 10.000 file trong vòng vài giây thay vì vài phút.
Linter chạy trong thời gian thực khi soạn thảo mà không làm lag editor.
Khởi động ngay lập tức vì không cần khởi động Node.js VM.

2. Cấu hình thống nhất

Thay vì duy trì hai file cấu hình riêng biệt, Biome sử dụng một biome.json duy nhất để điều khiển cả linter và formatter. Ví dụ cấu hình cơ bản:

{
  "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "a11y": {
        "useKeyWithClickable": "off"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

3. Tích hợp IDE mượt mà

Biome cung cấp extension cho các trình soạn thảo chính:

VS Code: Extension biomejs.biome hỗ trợ format-on-save, lint-as-you-type, và quick fix tự động.
WebStorm: Hỗ trợ qua plugin filesystem watcher tích hợp.
Neovim: Có thể gọi qua null-ls hoặc conform.nvim.

Tất cả đều hoạt động mà không cần cấu hình PATH phức tạp vì extension gọi trực tiếp đến binary Biome.

Tính Năng Linter Nổi Bật

Biome linter tích hợp >500 quy tắc từ các nguồn khác nhau:

ESLint core: Quy tắc cơ bản như no-unused-vars, eqeqeq, prefer-const.
typescript-eslint: Các quy tắc TypeScript đặc biệt như no-explicit-any, consistent-type-definitions.
Rules độc quyền: Quy tắc tối ưu hiệu suất và phong cách hiện đại như no-debugger, no-console trong production.

Quan trọng: Biome cung cấp chẩn đoán chi tiết và ngữ cảnh, giúp lập trình viên hiểu rõ tại sao một đoạn code được đánh dấu là lỗi và cách khắc phục hiệu quả nhất.

Formatter Đáng Tin Cậy

Biome formatter claiming 97% tương thích với Prettier, nghĩa là hầu hết các dự án hiện đang dùng Prettier có thể chuyển sang Biome mà không thay đổi đáng kể về định dạng code. Những điểm khác biệt chủ yếu liên quan đến:

Xử lý dấu phẩy trong object literal (trailing comma).
Định dạng ternary expression dài.
Sắp xếp import theo thứ tự đặc định.

Biome cho phép người dùng tùy chỉnh mức độ tương thích qua tùy chọn formatter.enabled và các quy tắc cụ thể trong formatter section.

Cách Sử Dụng Biome Trong Dự Án

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

Thêm Biome làm dev dependency:

npm i -D @biomejs/biome
# Hoặc với Yarn/pnpm
yarn add -D @biomejs/biome
pnpm add -D @biomejs/biome

Bước 2: Khởi tạo cấu hình

Chạy lệnh sau để tạo file biome.json mẫu:

npx biome init

Bước 3: Tích hợp vào workflow

Thêm scripts vào package.json:

{
  "scripts": {
    "format": "biome format --write .",
    "lint": "biome lint .",
    "check": "biome check .",
    "prepare": "husky install"
  }
}

Kết hợp với Husky để chạy tự động trước mỗi commit:

npx husky add .husky/pre-commit "npm run lint"

Bước 4: Tối ưu hiệu suất CI/CD

Trong môi trường tích hợp liên tục, Biome rất nhẹ nên có thể cache toàn bộ binary:

# GitHub Actions example
- name: Setup Biome
  uses: actions/setup-node@v4
  with:
    node-version: '20'
- name: Install Biome
  run: npm ci
- name: Lint & Format
  run: |
    npm run lint
    npm run format -- --check

So Sánh Với Các Công Cụ Thay Thế

Tiêu chí	Biome	Prettier+ESLint	Deno fmt
Tốc độ format	⚡⚡⚡ (Nhanh)	⚡ (Chậm)	⚡⚡ (Vừa)
Tốc độ lint	⚡⚡⚡ (Nhanh)	⚡ (Chậm)	⚡ (Không hỗ trợ)
Cấu hình	Một file	Hai file	Không có (dùng deno.json)
Tích hợp IDE	Mở rộng đầy đủ	Mở rộng tốt	Hạn chế
Hỗ trợ ngôn ngữ	JS/TS/JSX/JSON/CSS/GraphQL	JS/TS/JSX/JSON	JS/TS
Autofix	Có (linter + formatter)	Hạn chế (chỉ formatter)	Không

Kết Luận

Biome không chỉ là một linter/formatter khác – nó biểu thị một bước tiến trong phát triển công cụ cho sinh viên web. Bằng cách:

Tận dụng Rust để đạt hiệu suất nguyên bản.
Thiết kế một file cấu hình thống nhất để giảmภาระ bảo trì.
Cung cấp chẩn đoán chi tiết giúp lập trình viên học hỏi và cải thiện.
Đảm bảo tương thích ngược cao với Prettier để dễ dàng di chuyển.

Biome ngày càng được các dự án mã nguồn mở lớn adoptted, từ các framework frontend cho tới các công cụ DevTools. Với sự phát triển cộng đồng mạnh mẽ và lộ trình tính năng rõ ràng, Biome có thể trở thành tiêu chuẩn mới cho chất lượng code trong hệ sinh thái JavaScript/TypeScript trong những năm tới.

Nguồn: Biome GitHub Repository, Biome Official Documentation