# Formatter from Bun

If you’ve worked in the modern JavaScript/TypeScript ecosystem, formatting your codebase with **Prettier** has likely become standard practice. But as projects grow to tens or hundreds of thousands of files, code formatting quickly becomes a bottleneck in local pre-commit hooks and CI pipelines.

Enter `bun fmt`—Bun’s fast, zero-config built-in code formatter designed to replace Prettier without breaking your workflow.

## What is Bun?

**Bun** is a fast, all-in-one JavaScript and TypeScript toolkit designed as a modern alternative to Node.js and Deno.

Rather than just being a runtime to execute JavaScript code, Bun replaces multiple fragmented tools in the JavaScript ecosystem with a single, high-performance tool written in Rust

## Why `bun fmt` Changes the Game

### 1\. Mind-Blowing Performance (Up to 320x Faster)

Running Prettier across a massive codebase can take minutes. `bun fmt` cuts that down to split seconds:

| Formatter | Time (`--check` on ~10,000 files) | Speedup vs. Prettier |
| --- | --- | --- |
| Bun fmt | 0.43 s | 320× faster |
| oxfmt | 0.85 s | 2× slower than Bun |
| Biome | 3.6 s | 8.3× slower than Bun |
| Prettier | 139 s | Baseline |

### 2\. 5x Memory Efficiency

While Prettier consumes nearly **1 GB** of RAM (approx. 972 MB) on large codebases, `bun fmt` completes the same check using just **183 MB**. That means lighter CI runners, lower cloud bills, and zero lagging on local dev environments.

### 3\. 99% Prettier Test Parity Out-of-the-Box

Switching formatters usually means fighting Git diff wars across your entire engineering team. `bun fmt` mitigates this by passing **9,728 out of 9,821** (99%) of Prettier’s test suite. Your output remains consistent, clean, and Prettier-compatible without requiring massive refactoring.

## Broad Language & Syntax Support

`bun fmt` handles **20 languages and formats** right out of the box, covering virtually every file type in a full-stack project:

*   **JavaScript & TypeScript** (JS, TS, JSX, TSX, Flow)
    
*   **Web Languages** (HTML, CSS, SCSS, Less)
    
*   **Frontend Frameworks** (Vue, Angular, Handlebars)
    
*   **Data Formats** (JSON, JSONC, JSON5, YAML, TOML, GraphQL)
    
*   **Content Formats** (Markdown, MDX, MJML)
    

## Zero Config Required (Works with Existing `.prettierrc`)

`bun fmt` works without extra setup. If you already have a `.prettierrc` or `.oxfmtrc.json` in your repository, `bun fmt` **reads it natively**.

To customize options or set overrides, configure the `[fmt]` section in your `bunfig.toml`:

```typescript
# bunfig.toml
[fmt]
printWidth = 100
semi = false
singleQuote = true
sortImports = true  # Automatically sorts imports

# Set overrides for specific files
[[fmt.overrides]]
files = ["*.test.ts", "scripts/**"]
options = { printWidth = 120 }
```

## How to Use `bun fmt`

### Format Your Project

Run `bun fmt` in your terminal to automatically format all non-ignored files:

```typescript
bun fmt
```

### Check Formatting in CI

Use `--check` to fail if any files require formatting:

```typescript
bun fmt --check
```

### Instant Pre-Commit Hooks (No `lint-staged` Needed)

Format staged Git files directly before committing:

```typescript
bun fmt --staged
```

## **Sort imports**

You can sort the imports

```typescript
[fmt]
sortImports = true
```

*   Imports are grouped: built-in modules, packages, aliases like `@/`, relative paths, styles.
    
*   Each group is sorted by path, and the names in `{ }` are sorted too.
    
*   Two imports from the same module become one.
    
*   Side-effect imports like `import "./setup"` never move, and nothing moves past one.
    

To pick your own groups, use a table. See [`format.sortImports`](https://bun.com/docs/runtime/bunfig#format-sortimports)

```typescript
[fmt.sortImports]
groups = ["react", "builtin", "external", "internal", ["parent", "sibling", "index"]]
customGroups = [{ groupName = "react", elementNamePattern = ["react", "react-dom/**"] }]
```

## **Sort Tailwind CSS classes**

```typescript
[fmt]
sortTailwindcss = true
```

Classes are sorted in Tailwind's recommended order, in `class` and `className` and in calls to `clsx`, `cn`, `cva`, `twMerge`, and [**a few more**](https://bun.com/docs/runtime/bunfig#format-sorttailwindcss). They are sorted with your project's `tailwindcss`, version 3 or 4, and are left as they are if it isn't installed.

If your `.prettierrc` lists `prettier-plugin-tailwindcss`, sorting is already on, with that plugin's options and defaults.

To name your own functions or your stylesheet, use a table.

```typescript
[fmt.sortTailwindcss]
stylesheet = "./src/app.css"
functions = ["clsx", "tw"]
```

## How to Migrate in 10 Seconds

If you’re currently using Prettier in your `package.json`, update your script to use `bun fmt`:

```typescript
{
  "scripts": {
    "format": "bun fmt"
  }
}
```

To know more about how to migrate from Prettier and oxfmt to bun fmt read the posts from Bun

1.  Migrate from Prettier to bun fmt - [https://bun.com/guides/format/migrate-from-prettier](https://bun.com/guides/format/migrate-from-prettier)
    
2.  Migrate from oxfmt to bunfmt - [https://bun.com/guides/format/migrate-from-oxfmt](https://bun.com/guides/format/migrate-from-oxfmt)