How to Add Ultracite to Your Code Editor

If you're tired of the complexity of managing ESLint, Prettier, and multiple configuration files, Ultracite might be exactly what you need. Built on top of Biome (a Rust-based formatter and linter), Ultracite provides a fast, simple alternative that combines code formatting and linting into a single tool.

What is Ultracite?

Ultracite is a development tool that brings automated code formatting and linting to JavaScript/TypeScript projects. It's built on top of Biome, which is written in Rust and combines the functionality of Prettier (formatting), ESLint (linting), and Stylelint into one extremely fast binary.

Key benefits:

• Lightning fast - Biome is written in Rust and significantly faster than traditional tools
• Zero configuration - Works out of the box with sensible defaults
• Single tool - Replaces ESLint + Prettier + Stylelint
• Automatic fixes - Formats and fixes issues on save
• AI editor integration - Built-in support for AI coding tools

Quick Installation

Getting started with Ultracite is incredibly simple:

npx ultracite init

This command will:

1. Install Ultracite and its dependencies
2. Create configuration files
3. Set up editor integrations
4. Configure Git hooks (optional)

Installation Options

You can customise the installation with flags:

# Specify package manager
npx ultracite init --pm pnpm

# Configure specific editors
npx ultracite init --editors vscode,cursor

# Set up AI editor rules
npx ultracite init --rules vscode-copilot,cursor,windsurf

# Enable additional features
npx ultracite init --features husky,lint-staged

# Remove existing tools
npx ultracite init --remove-prettier --remove-eslint

Setting Up Ultracite in Different Editors

VS Code Setup

1. Install Ultracite:

   npx ultracite init --editors vscode

2. Install the Biome VS Code extension:

   • Open VS Code
   • Go to Extensions (Ctrl/Cmd + Shift + X)
   • Search for "Biome"
   • Install the official Biome extension

3. Configure VS Code settings: The init command creates a .vscode/settings.json file:

   {
     "editor.defaultFormatter": "biomejs.biome",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "quickfix.biome": "explicit",
       "source.organizeImports.biome": "explicit"
     }
   }

Cursor Setup

1. Install Ultracite with Cursor support:

   npx ultracite init --editors cursor --rules cursor

2. Install Biome extension in Cursor:

   • Open Cursor
   • Go to Extensions
   • Search for "Biome" and install

3. AI Integration: Ultracite creates .cursor/rules/ files for better AI assistance:

   Use Biome for code formatting and linting.
   Format code using Biome's rules.
   Apply Biome's import sorting.
   Fix linting issues automatically when possible.

Windsurf Setup

1. Install with Windsurf configuration:

   npx ultracite init --editors windsurf --rules windsurf

2. Install Biome extension (if available in Windsurf marketplace)

3. AI Rules: Creates .windsurfrules for AI-assisted development

Zed Setup

1. Install with Zed support:

   npx ultracite init --editors zed --rules zed

2. Zed configuration is automatically added to your settings

Configuration

Ultracite creates a biome.json file with optimised settings:

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignoreUnknown": false,
    "ignore": ["dist/**", "build/**", "node_modules/**"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "es5"
    }
  }
}

Git Integration

Ultracite can set up Git hooks to ensure code quality:

Husky + lint-staged

npx ultracite init --features husky,lint-staged

This creates:

• .husky/pre-commit hook
• lint-staged configuration in package.json

Lefthook Alternative

npx ultracite init --features lefthook

AI Editor Rules

Ultracite creates AI-specific rule files to help AI coding assistants understand your formatting preferences:

For GitHub Copilot (.github/copilot-instructions.md)

## Code Style Guidelines

Use Biome for all code formatting and linting.

- Use single quotes for strings
- Use trailing commas where valid
- Organise imports automatically
- Follow Biome's recommended rules

For Cursor (.cursor/rules/)

When writing code:
- Use Biome formatting standards
- Apply single quotes for strings
- Use 2-space indentation
- Organise imports with Biome
- Follow linting rules from biome.json

Migrating from Existing Tools

From ESLint + Prettier

# Remove old tools and install Ultracite
npx ultracite init --remove-eslint --remove-prettier

This will:

• Remove ESLint and Prettier dependencies
• Delete configuration files
• Update scripts in package.json
• Set up Biome configuration

From existing Biome setup

npx ultracite init

Ultracite will detect existing Biome configuration and enhance it.

Common Commands

Once installed, you can use these commands:

# Format all files
npm run format

# Check for issues
npm run lint

# Fix issues automatically
npm run lint:fix

# Check files (no fixes)
npx biome check .

# Format specific files
npx biome format --write src/

Troubleshooting

Editor not formatting on save

1. Check that Biome extension is installed
2. Verify .vscode/settings.json has correct configuration
3. Restart your editor

Conflicts with existing tools

# Remove conflicts
npx ultracite init --remove-prettier --remove-eslint

Performance issues

Biome is extremely fast, but if you experience issues:

1. Check .biomeignore file excludes large directories
2. Verify files.ignore in biome.json

Why Choose Ultracite?

Speed Comparison:

• ESLint + Prettier: ~2-5 seconds on medium projects
• Biome/Ultracite: ~200-500ms on the same projects

Developer Experience:

• Single configuration file vs multiple config files
• Consistent formatting and linting rules
• Works seamlessly with AI coding assistants
• Automatic import organisation

Getting Started Checklist

1. ✅ Install Ultracite: npx ultracite init
2. ✅ Install Biome extension in your editor
3. ✅ Configure editor settings for format on save
4. ✅ Set up Git hooks (optional): --features husky
5. ✅ Configure AI rules for your coding assistant
6. ✅ Remove old ESLint/Prettier config: --remove-eslint --remove-prettier

Conclusion

Ultracite simplifies the development toolchain by providing a fast, zero-config alternative to the traditional ESLint + Prettier setup. With built-in support for modern editors and AI coding assistants, it's designed for the current development landscape.

The Rust-based Biome engine makes it significantly faster than traditional JavaScript tools, while the Ultracite wrapper provides sensible defaults and easy setup for modern TypeScript projects.

Try it out in your next project – the setup takes less than a minute, and the performance improvement is immediately noticeable.