Giới thiệu Oxfmt và Oxlint so với Biome

Trong thế giới JavaScript/TypeScript hiện đại, chúng ta đang chứng kiến sự trỗi dậy của các công cụ Rust hiệu suất cao. Trong khi Biome ↗ đã thiết lập mình như một toolchain all-in-one, thì Oxc ↗ lại đi theo hướng tiếp cận khác với các công cụ chuyên biệt: Oxfmt (formatter) và Oxlint (linter). Bài viết này sẽ giới thiệu hai công cụ này và so sánh kiến trúc của chúng với Biome.

Oxfmt là gì?#

Oxfmt (/oʊ-ɛks-fɔːr-mæt/) là một formatter hiệu suất cao cho hệ sinh thái JavaScript, được xây dựng trên stack compiler Oxc. Nó được thiết kế để tương thích hoàn toàn với Prettier trong khi cải thiện hiệu suất đáng kể.

Tính năng chính của Oxfmt#

Hỗ trợ đa ngôn ngữ#

Oxfmt hỗ trợ nhiều định dạng file, với một số được xử lý bởi engine Rust native và các định dạng khác được ủy quyền cho Prettier được tích hợp sẵn:

Native formats (chạy hoàn toàn trong Rust):

• JavaScript/JSX: .js, .jsx, .mjs, .cjs
• TypeScript/TSX: .ts, .tsx, .mts, .cts, .d.ts
• JSON/JSONC/JSON5: .json, .jsonc, .json5
• CSS/SCSS/Less: .css, .scss, .less
• GraphQL: .graphql, .gql
• TOML: .toml
• YAML: .yml, .yaml

Delegated formats (sử dụng Prettier tích hợp):

• HTML, Angular, Vue, Svelte
• Markdown, MDX
• Handlebars, MJML

Tính năng tích hợp sẵn#

Oxfmt bao gồm các tính năng thường yêu cầu Prettier plugins bên ngoài:

• Import sorting: Sắp xếp imports với các tùy chọn cấu hình
• Tailwind CSS class sorting: Tự động sắp xếp class Tailwind (tương thích prettier-plugin-tailwindcss)
• package.json field sorting: Tự động sắp xếp các trường trong package.json
• Embedded formatting: Định dạng code embedded trong template literals (CSS-in-JS, GraphQL, v.v.)

Hiệu suất#

Theo benchmark, Oxfmt nhanh hơn:

• ~30x nhanh hơn Prettier
• 2x nhanh hơn Biome

Tương thích Prettier#

Oxfmt hiện tại đạt 100% các bài test tương thích JavaScript và TypeScript của Prettier. Khi di chuyển từ các phiên bản Prettier gần đây, sự khác biệt về định dạng không nên xảy ra.

Kiến trúc Oxfmt#

Oxfmt sử dụng hệ thống three-stage formatting:

graph LR
    AST[AST from Parser] --> IRGen[IR Generation]
    IRGen --> IR[FormatElement IR]
    IR --> Transform[IR Transformation]
    Transform --> sort_imports[sort_imports]
    sort_imports --> tailwind_sort[Tailwind Sort]
    tailwind_sort --> Printer[Printing]
    Printer --> Output[Formatted Text]

1. IR Generation: Traversal AST sử dụng Format trait
2. IR Transformation: Áp dụng transformations như sort_imports và Tailwind sorting
3. Printing: Printer tiêu thụ IR và render kết quả cuối cùng

[!NOTE] Oxfmt formatter core được port từ Biome’s biome_formatter crate, nhưng với thiết kế language-agnostic hoàn toàn.

Oxlint là gì?#

Oxlint (/oʊ-ɛks-lɪnt/) là một linter hiệu suất cao cho JavaScript và TypeScript được xây dựng trên stack compiler Oxc. Nó được thiết kế như một sự thay thế drop-in cho ESLint với hiệu suất vượt trội.

Tính năng chính của Oxlint#

Phủ sóng quy tắc rộng#

Oxlint bao gồm 870+ built-in rules với độ phủ các linter plugins phổ biến nhất:

• ESLint core rules: Quy tắc JavaScript cơ bản
• TypeScript rules: Bao gồm type-aware rules
• Popular plugins: React, Jest, Vitest, Import, Unicorn, jsx-a11y
• Custom JS plugins: Tương thích với hệ sinh thái plugin ESLint

Type-aware linting#

Oxlint sử dụng Go port native của TypeScript compiler (tsgo aka TypeScript 7), cung cấp:

• Full TypeScript compatibility
• Cùng behavior của type system như TypeScript
• Type-aware linting aligned với TypeScript semantics

Multi-file analysis#

Oxlint hỗ trợ multi-file analysis như một tính năng first-class:

• Xây dựng project-wide module graph
• Chia sẻ parsing và resolution across rules
• Cải thiện các kiểm tra phụ thuộc vào cross-file imports
• Tránh performance cliff thường thấy với các quy tắc như import/no-cycle trong ESLint

Hiệu suất#

Oxlint được xây dựng cho large repositories và CI environments:

• 50-100x nhanh hơn ESLint
• Kiến trúc loại bỏ các structural bottlenecks giới hạn hiệu suất trong ESLint
• Multi-threaded file processing

Kiến trúc Oxlint#

Oxlint sử dụng kiến trúc parallel execution với dual branch strategy:

graph TB
    CLI[CLI Interface] --> LintRunner[LintRunner]
    LintRunner --> LintService[LintService]
    LintService --> Runtime[Runtime]
    Runtime --> process_source[process_source]
    process_source --> Parser[Parser]
    Parser --> AST[AST]
    AST --> LintContext[LintContext]
    LintContext --> Linter[Linter]
    Linter --> execute_rules[execute_rules]
    
    execute_rules --> strategy1[Strategy 1: nodes → rules]
    execute_rules --> strategy2[Strategy 2: rules → nodes]
    
    strategy1 --> RULE_BUCKETS[RULE_BUCKETS]
    strategy2 --> RULE_BUCKETS
    
    LintService --> DiagnosticService[DiagnosticService]
    DiagnosticService --> Output[Output]

Các thành phần chính#

1. LintService: Orchestrates linting với parallel execution
2. Runtime: Quản lý paths và file discovery
3. LintContext: Chứa Semantic analysis context
4. Linter: Core engine executing rules trên AST
5. Rule Trait: Định nghĩa hooks cho rule implementation

Dual Branch Strategy#

• Small files (<200k nodes): Iterate (nodes → rules)
• Large files (≥200k nodes): Iterate (rules → nodes) với RULE_BUCKETS
• Điều này giúp tránh CPU cache thrashing trên large files

So sánh kiến trúc với Biome#

1. Triết lý thiết kế#

2. Formatter Architecture#

3. Linter Architecture#

4. Performance#

5. Migration Path#

Khi nào nên dùng cái nào?#

Chọn Oxfmt + Oxlint khi#

• Bạn muốn maximum performance cho CI/CD
• Cần Prettier compatibility mà không cần thay đổi output
• Muốn separate tools cho formatter và linter
• Đang di chuyển từ ESLint + Prettier với minimum disruption
• Cần Tailwind CSS integration built-in
• Muốn type-aware linting với TypeScript semantics chính xác

Chọn Biome khi#

• Bạn muốn unified toolchain trong một package
• Cần multi-language support (CSS, HTML, GraphQL) native
• Muốn daemon process cho IDE integration tốt hơn
• Team muốn single configuration file
• Không cần Prettier compatibility tuyệt đối

Ví dụ sử dụng#

Oxfmt#

# Cài đặt
npm install -D oxfmt

# Format files
oxfmt src/

# Check formatting
oxfmt --check src/

# Init config
oxfmt --init

# Migrate from Prettier
oxfmt --migrate=prettier

# Migrate from Biome
oxfmt --migrate=biome

Oxlint#

# Cài đặt
npm install -D oxlint

# Lint files
oxlint src/

# Type-aware linting
oxlint --tsconfig tsconfig.json src/

# Multi-file analysis
oxlint --enable-import-plugin src/

Biome#

# Cài đặt
npm install -D @biomejs/biome

# Format và lint
biome check src/

# Chỉ format
biome format src/

# Chỉ lint
biome lint src/

# Watch mode
biome check --watch .

Kết luận#

Oxfmt và Oxlint đại diện cho hướng tiếp cận specialized tools với hiệu suất tối đa và Prettier/ESLint compatibility, trong khi Biome cung cấp unified toolchain với trải nghiệm tích hợp.

Lựa chọn giữa hai ecosystem phụ thuộc vào ưu tiên của dự án: performance & compatibility vs integration & simplicity, separate tools vs unified toolchain, existing ecosystem compatibility vs new toolchain adoption.

Cả hai đều đại diện cho tương lai của JavaScript/TypeScript tooling với hiệu suất Rust cao, nhưng phục vụ các use cases khác nhau trong development workflow.

Tài liệu tham khảo#

• Oxfmt Documentation ↗
• Oxfmt Language Support ↗
• Oxlint Documentation ↗
• Oxlint Multi-file Analysis ↗
• Oxc Architecture ↗
• Biome Architecture ↗
• Oxfmt Beta Announcement ↗