Ultracite

Ultracite is a highly opinionated, zero-configuration preset for JavaScript and TypeScript linting and formatting. It supports three major toolchains:

• Biome — The modern, all-in-one toolchain written in Rust
• ESLint + Prettier + Stylelint — The most mature and comprehensive linting ecosystem
• Oxlint + Oxfmt — The fastest linter available, 50-100x faster than ESLint

Quick Start

The fastest way to get started is using the interactive installer:

npx ultracite init

This will:

1. Detect your project structure
2. Ask which toolchain you prefer (Biome, ESLint+Prettier, or Oxlint+Oxfmt)
3. Install necessary dependencies
4. Create appropriate configuration files
5. Set up editor integration

How It Works

Once set up, Ultracite runs mostly in the background — automatically formatting your code and applying fixes every time you save your files. Because the underlying tools are highly optimized (especially the Rust-based Biome and Oxlint), running Ultracite's checks is extremely fast and can comfortably run on every save without lag. This means you can focus on building and shipping instead of manually correcting style issues or debugging runtime errors.

Basic Setup

Add Ultracite to your Denji hooks to automatically fix and format icons after adding them:

{
  "output": "./src/icons.tsx",
  "framework": "react",
  "typescript": true,
  "hooks": {
    "postAdd": [
      "npx ultracite fix ./src/icons.tsx"
    ]
  }
}

Configuration Examples

Fix with All Safe Fixes

{
  "hooks": {
    "postAdd": [
      "npx ultracite fix ./src/icons.tsx"
    ]
  }
}

Check Only

{
  "hooks": {
    "preAdd": [
      "npx ultracite check ./src/icons.tsx"
    ]
  }
}

Multiple Hooks

Run Ultracite after various operations:

{
  "hooks": {
    "postAdd": [
      "npx ultracite fix ./src/icons.tsx"
    ],
    "postRemove": [
      "npx ultracite fix ./src/icons.tsx"
    ],
    "postClear": [
      "npx ultracite fix ./src/icons.tsx"
    ]
  }
}

Apply Unsafe Fixes

For more aggressive fixes:

{
  "hooks": {
    "postAdd": [
      "npx ultracite fix --unsafe ./src/icons.tsx"
    ]
  }
}

Common Commands

npx ultracite fix ./src/icons.tsx

npx ultracite check ./src/icons.tsx

npx ultracite fix --unsafe ./src/icons.tsx

npx ultracite fix --linter biome ./src/icons.tsx

Ultracite Commands

fix

Fixes all auto-fixable issues:

# Fix all files
npx ultracite fix

# Fix specific files
npx ultracite fix ./src/icons.tsx

# Apply unsafe fixes
npx ultracite fix --unsafe ./src/icons.tsx

# Use specific linter
npx ultracite fix --linter biome ./src/icons.tsx

check

Checks for issues without fixes:

# Check all files
npx ultracite check

# Check specific files
npx ultracite check ./src/icons.tsx

# Filter by severity
npx ultracite check --diagnostic-level error ./src/icons.tsx

doctor

Diagnoses setup and configuration:

npx ultracite doctor

Core Principles

Ultracite is designed with these key goals:

Lightning-Fast Performance

Ultracite benefits from the performance of Rust-based tools like Biome and Oxlint, enabling instant feedback even on large codebases. This allows it to run automatically on every file save without lag.

Zero-Config by Design

Ultracite is designed to be zero-config by default. This allows new users to get started quickly without needing to configure their linter or formatter, saving teams time when onboarding new developers.

The goal is to provide a default configuration that works for most projects, while still allowing customization for those who need it.

Intuitive and Simple

Ultracite should be as invisible as possible. Preferably, it should not require any configuration or action from the user. When feedback is needed, it should be easy to understand and act on.

Maximum Type Safety

Ultracite is designed to be as type-safe as possible. It uses TypeScript's strict mode and additional lint rules to catch errors and provide suggestions for improvements.

Plays Nice with Others

Ultracite works alongside other tools and libraries without conflict. You can choose the toolchain that best fits your project's needs.

Toolchain Selection

Ultracite automatically detects and uses the appropriate linter:

1. Checks for biome.json → uses Biome
2. Checks for .eslintrc.* or eslint.config.js → uses ESLint + Prettier + Stylelint
3. Checks for oxlint.json → uses Oxlint + Oxfmt
4. Falls back to Biome (default)

You can also explicitly specify a toolchain:

npx ultracite fix --linter biome ./src/icons.tsx
npx ultracite fix --linter eslint ./src/icons.tsx
npx ultracite fix --linter oxlint ./src/icons.tsx

Package Manager Alternatives

{
  "hooks": {
    "postAdd": ["npx ultracite fix ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["pnpm exec ultracite fix ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["yarn exec ultracite fix ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["bunx ultracite fix ./src/icons.tsx"]
  }
}

Using Package Scripts

Define a script in package.json:

{
  "scripts": {
    "format": "ultracite fix .",
    "format:icons": "ultracite fix ./src/icons.tsx",
    "check": "ultracite check ."
  }
}

Reference it in your Denji config:

{
  "hooks": {
    "postAdd": ["npm run format:icons"]
  }
}

Diagnostic Levels

Filter checks by severity:

# Only errors
npx ultracite check --diagnostic-level error ./src/icons.tsx

# Errors and warnings
npx ultracite check --diagnostic-level warning ./src/icons.tsx

# All diagnostics
npx ultracite check --diagnostic-level hint ./src/icons.tsx

Use in hooks:

{
  "hooks": {
    "preAdd": [
      "npx ultracite check --diagnostic-level error ./src/icons.tsx"
    ]
  }
}

Migration from ESLint/Prettier

Step 1: Remove Old Tools

npm uninstall eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin

Step 2: Install Ultracite

npm install -D ultracite

Step 3: Update Denji Config

{
  "hooks": {
    "postAdd": [
      "npx ultracite fix ./src/icons.tsx"
    ]
  }
}

Step 4: Update Package Scripts

{
  "scripts": {
    "format": "ultracite fix .",
    "lint": "ultracite check .",
    "check": "ultracite check ."
  }
}

Step 5: Run Doctor

Verify everything is set up correctly:

npx ultracite doctor

Performance Tips

1. Target specific files - Avoid unnecessary scanning:

   "postAdd": ["npx ultracite fix ./src/icons.tsx"]

2. Use check for validation - Faster when you don't need fixes:

   "preAdd": ["npx ultracite check ./src/icons.tsx"]

3. Filter diagnostics - Only show errors in CI:

   npx ultracite check --diagnostic-level error

Troubleshooting

Ultracite Not Found

Install Ultracite as a dev dependency:

npm install -D ultracite

No Linter Detected

Run the doctor command to diagnose:

npx ultracite doctor

Ultracite will suggest which configuration file to create.

Hook Fails on First Run

If the icons file doesn't exist yet, Ultracite may fail. Ensure the file exists before running:

{
  "hooks": {
    "postAdd": [
      "npx ultracite fix ./src/icons.tsx"
    ]
  }
}

Unsafe Fixes Required

Some issues require unsafe fixes. Review the output and decide:

npx ultracite fix --unsafe ./src/icons.tsx

Different Linter Needed

Specify which linter to use:

npx ultracite fix --linter eslint ./src/icons.tsx

Ultracite vs Direct Tooling

Code Standards

Ultracite enforces strict, opinionated standards optimized for modern development. See the Ultracite documentation.

Related

• Biome Integration - One of Ultracite's supported toolchains
• ESLint Integration - One of Ultracite's supported toolchains
• Prettier Integration - Part of ESLint toolchain option
• Oxlint Integration - One of Ultracite's supported toolchains
• Oxfmt Integration - Part of Oxlint toolchain option
• Configuration - Denji configuration options