Setting Up Oxfmt: The Fast Prettier-Compatible Formatter

Introduction

Oxfmt is a Rust-powered, Prettier-compatible code formatter that was recently released in alpha. Built by the Oxc project team, Oxfmt brings incredible performance improvements to JavaScript and TypeScript code formatting.

Why Oxfmt?

• 🚀 Performance: More than 30× faster than Prettier and more than 3× faster than Biome on initial runs without cache
• ✅ Compatibility: Prettier-compatible configuration format, making migration seamless
• ⚡ Speed: Built with Rust for maximum performance

Oxfmt is designed to be a drop-in replacement for Prettier, with the same formatting output but significantly better performance. The alpha release focuses on JavaScript and TypeScript, with plans for additional file formats and features in the beta release.

Setting up Oxfmt in your project

Step 1: Install Oxfmt

Add oxfmt to your project as a dev dependency:

pnpm add -D oxfmt@latest

Step 2: Create Configuration File

Create a new configuration file called .oxfmtrc.json in a root of your project and use this example configuration:

{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "arrowParens": "always",
}

Step 3: Add Format Script

Add a format script to your package.json:

{
  "scripts": {
    "format": "oxfmt"
  }
}

Now you can format your codebase with:

pnpm format

VS Code and Cursor Setup

Since Cursor is built on VS Code's foundation, the setup process is identical for both editors. The Oxc extension provides the best integration with both editors.

Step 1: Install the Extension

1. Open VS Code or Cursor
2. Go to Extensions (Cmd+Shift+X on macOS, Ctrl+Shift+X on Windows/Linux)
3. Search for "Oxc" or "oxc-vscode"
4. Install the extension by the Oxc team

Step 2: Configure Editor Settings

Add the following to your VS Code/Cursor settings (.vscode/settings.json or User Settings):

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

Key Settings Explained:

• oxc.fmt.experimental: true - Enables the experimental formatter feature
• editor.defaultFormatter: "oxc.oxc-vscode" - Sets Oxc as the default formatter
• editor.formatOnSave: true - Automatically formats files on save

These settings ensure that Oxfmt is enabled, set as the default formatter, files are automatically formatted on save, and you have consistent indentation across your project.

Current Limitations (Alpha)

As of the alpha release, Oxfmt has some limitations:

• File formats: Only JavaScript and TypeScript files are supported
• Configuration:
  • No support for prettier field in package.json
  • Only .json and .jsonc config file formats
  • No nested configs in subdirectories
  • No override field support
• Plugins: Prettier plugins are not yet supported
• Features: Some experimental Prettier options are not supported

What's Coming in Beta

The Oxc team plans to add:

• Support for more file formats (e.g., .json files)
• Embedded language formatting (CSS-in-JS, GraphQL)
• Built-in import sorting
• Prettier plugin support
• Node.js API
• Migration tool from Prettier

Track progress: Formatter Beta Milestone

Resources

• Documentation: Oxfmt Guide
• Announcement: Oxfmt Alpha Blog Post
• GitHub: Oxc Project
• Discussion: Formatter RFC
• Differences with Prettier: Compatibility Discussion

Conclusion

Oxfmt provides a fast, Prettier-compatible formatter that can significantly improve your development workflow. With easy setup in both VS Code and Cursor (using the same configuration), you can start using it today and enjoy the performance benefits while maintaining compatibility with your existing Prettier configuration.