The OXC tools¶

OXC is a collection of JavaScript/TypeScript tooling written in Rust. The OXC formatter is a fast, configurable code formatter for JavaScript, TypeScript, JSX, and JSON. It represents a new generation of high-performance tools for the JavaScript ecosystem.

How The OXC Formatter Works¶

OXC formatter parses your JavaScript/TypeScript source code into an Abstract Syntax Tree (AST), then applies formatting rules to generate consistently styled output. Because it's written in Rust, it avoids the overhead of Node.js and achieves near-native performance.

Use Cases¶

• Large Codebases: Format thousands of files in seconds during CI/CD pipelines
• Monorepos: Handle multiple packages with different configurations efficiently
• Pre-commit Hooks: Instant formatting without waiting for slower alternatives
• IDE Integration: Real-time formatting as you type with minimal latency
• Migration Projects: Drop-in replacement for Prettier with compatible output

Why OXC Formatter?¶

Installation¶

npm install --save-dev oxc

Or using other package managers:

    pnpm add -D oxc

    yarn add -D oxc

    bun add -D oxc

Standalone Formatter (oxcfmt)¶

You can also install the standalone formatter package oxcfmt directly:

    pnpm add -D oxcfmt

    npm install --save-dev oxcfmt

    yarn add -D oxcfmt

Basic Usage¶

CLI Commands¶

# Format all files
npx oxc format .

# Format specific files
npx oxc format src/**/*.ts

# Check formatting without writing
npx oxc format . --check

Configuration¶

Create an oxc.config.json file in your project root:

{
  "formatter": {
    "enabled": true,
    "indentStyle": "tab",
    "indentWidth": 2,
    "lineEnding": "lf",
    "printWidth": 80,
    "quoteStyle": "double"
  }
}

Configuration Options¶

Formatting Examples¶

Before Formatting¶

function greet(name, age) {
  const message = "Hello, " + name + "! You are " + age + " years old.";
  console.log(message);
  return { message: message, timestamp: Date.now() };
}

After Formatting¶

function greet(name, age) {
  const message = "Hello, " + name + "! You are " + age + " years old.";
  console.log(message);
  return { message: message, timestamp: Date.now() };
}

Supported Languages¶

• JavaScript (.js, .mjs, .cjs)
• TypeScript (.ts, .mts, .cts)
• JSX (.jsx)
• TSX (.tsx)
• JSON (.json)
• JSONC (.jsonc)

Integration¶

With VS Code¶

Install the OXC VS Code extension:

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

VS Code Extension¶

The OXC VS Code extension provides first-class integration with your editor.

Features¶

• Format on Save: Automatically format files when you save them
• Format on Type: Format code as you type (configurable)
• Format Selection: Format only the selected code block
• Error Reporting: Shows parsing errors and formatting issues inline
• Configuration Support: Reads your oxc.config.json automatically

Extension installation¶

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "OXC"
4. Click Install on the OXC extension

Or install via CLI:

code --install-extension oxc.oxc-vscode

Recommended Settings¶

{
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "[javascript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  }
}

With LazyVim¶

LazyVim includes OXC support as an extra. Enable it in your configuration:

-- In your LazyVim config (e.g., lua/plugins/oxc.lua)
{ import = "lazyvim.plugins.extras.lang.typescript.oxc" }

For more details, see the LazyVim OXC documentation.

With Pre-commit Hooks¶

Add to your .pre-commit-config.yaml:

repos:
  - repo: local
    hooks:
      - id: oxc-format
        name: OXC Format
        entry: npx oxc format
        language: system
        files: \.(js|ts|jsx|tsx|json)$

Migration from Prettier¶

Migration steps:

1. Install OXC: npm install --save-dev oxc
2. Create oxc.config.json with your preferred settings
3. Run formatter: npx oxc format .
4. Compare output with your Prettier-formatted code
5. Update CI/CD pipelines to use OXC
6. Remove Prettier (optional)

Performance Comparison¶

Benchmark: Formatting 1000 files

OXC:        ~50ms
Prettier:   ~2000ms

Speedup: 40x faster

Resources¶

• OXC Official Website
• GitHub Repository
• Configuration Documentation