A highly opinionated, zero-configuration linter and formatter. | Ultracite

Ultracite is a highly opinionated preset for Biome, designed to help you and your AI models write consistent and type-safe code without the hassle of configuration.

收录于 1 年前更新于 1 年前正常收录

A highly opinionated, zero-configuration linter and formatter. | Ultracite 网站预览

详细内容

Ultracite\
Ultracite

Home Docs Social

Select language

Search... ⌘K

Docs

A highly opinionated, zero-configuration linter and formatter

Ultracite is a highly opinionated preset for Biome, designed to help you and your AI models write consistent and type-safe code without the hassle of configuration.

Read the docs

npx ultracite@latest fix

./app/(authenticated)/welcome/components/welcome-demo.tsx:205:19 lint/complexity/noExcessiveCognitiveComplexity ━━━━━━━━━━

  ⚠ Excessive complexity of 20 detected (max: 15).

    204 │   const handleNodesChange = useCallback(() => {
  > 205 │     setTimeout(() => {
        │                   ^^^
    206 │       const newEdges = getEdges();
    207 │       const newNodes = getNodes();

  ℹ Please refactor this function to reduce its complexity score from 20 to the max allowed complexity 15.


./scripts/skip-ci.js:1:30 lint/style/useNodejsImportProtocol  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ A Node.js builtin module should be imported with the node: protocol.

  > 1 │ const { execSync } = require('child_process');
      │                              ^^^^^^^^^^^^^^^
    2 │
    3 │ const commitMessage = execSync('git log -1 --pretty=%B').toString().trim();

  ℹ Using the node: protocol is more explicit and signals that the imported module belongs to Node.js.

  ℹ Unsafe fix: Add the node: protocol.

     1    │ - const·{·execSync·}·=·require('child_process');
        1 │ + const·{·execSync·}·=·require('node:child_process');
     2  2 │
     3  3 │   const commitMessage = execSync('git log -1 --pretty=%B').toString().trim();


./scripts/skip-ci.js:6:3 lint/suspicious/noConsole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Don't use console.

    5 │ if (commitMessage.includes('[skip ci]')) {
  > 6 │   console.log('Skipping build due to [skip ci] in commit message.');
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    7 │   process.exit(0); // this causes Vercel to skip the build
    8 │ }

  ℹ The use of console is often reserved for debugging.

  ℹ Unsafe fix: Remove console.

     4  4 │
     5  5 │   if (commitMessage.includes('[skip ci]')) {
     6    │ - ··console.log('Skipping·build·due·to·[skip·ci]·in·commit·message.');
     7  6 │     process.exit(0); // this causes Vercel to skip the build
     8  7 │   }


./scripts/skip-ci.js:6:3 lint/suspicious/noConsoleLog  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Don't use console.log

    5 │ if (commitMessage.includes('[skip ci]')) {
  > 6 │   console.log('Skipping build due to [skip ci] in commit message.');
      │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    7 │   process.exit(0); // this causes Vercel to skip the build
    8 │ }

  ℹ console.log is usually a tool for debugging and you don't want to have that in production.

  ℹ If it is not for debugging purpose then using console.info might be more appropriate.

  ℹ Unsafe fix: Remove console.log

     4  4 │
     5  5 │   if (commitMessage.includes('[skip ci]')) {
     6    │ - ··console.log('Skipping·build·due·to·[skip·ci]·in·commit·message.');
     7  6 │     process.exit(0); // this causes Vercel to skip the build
     8  7 │   }


./app/actions/tweet/get.ts:29:12 lint/correctness/noUnusedVariables  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This variable is unused.

    27 │       date: tweet.created_at,
    28 │     };
  > 29 │   } catch (error) {
       │            ^^^^^
    30 │     return {
    31 │       error: 'Error fetching tweet',

  ℹ Unused variables usually are result of incomplete refactoring, typos and other source of bugs.

  ℹ Unsafe fix: If this is intentional, prepend error with an underscore.

    27 27 │         date: tweet.created_at,
    28 28 │       };
    29    │ - ··}·catch·(error)·{
       29 │ + ··}·catch·(_error)·{
    30 30 │       return {
    31 31 │         error: 'Error fetching tweet',


./app/api/code/route.ts:77:7 lint/suspicious/noConsole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Don't use console.

    75 │     messages: convertToModelMessages(messages),
    76 │     onError: (error) => {
  > 77 │       console.error(error);
       │       ^^^^^^^^^^^^^^^^^^^^^
    78 │     },
    79 │     onFinish: async ({ usage }) => {

  ℹ The use of console is often reserved for debugging.

  ℹ Unsafe fix: Remove console.

    75 75 │       messages: convertToModelMessages(messages),
    76 76 │       onError: (error) => {
    77    │ - ······console.error(error);
    78 77 │       },
    79 78 │       onFinish: async ({ usage }) => {


./app/api/webhooks/stripe/route.ts:10:23 lint/complexity/noExcessiveCognitiveComplexity ━━━━━━━━━━━━

  ⚠ Excessive complexity of 20 detected (max: 15).

     8 │ import type Stripe from 'stripe';
     9 │
  > 10 │ export async function POST(req: Request) {
       │                       ^^^^
    11 │   const body = await req.text();
    12 │   const signature = req.headers.get('stripe-signature') as string;

  ℹ Please refactor this function to reduce its complexity score from 20 to the max allowed complexity 15.


./app/api/webhooks/stripe/route.ts:105:9 lint/suspicious/noConsole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Don't use console.

    103 │       }
    104 │       default:
  > 105 │         console.log(`Unhandled event type ${event.type}`);
        │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    106 │         break;
    107 │     }

  ℹ The use of console is often reserved for debugging.

  ℹ Unsafe fix: Remove console.

    103 103 │         }
    104 104 │         default:
    105     │ - ········console.log(`Unhandled·event·type·${event.type}`);
    106 105 │           break;
    107 106 │       }


./app/api/webhooks/stripe/route.ts:105:9 lint/suspicious/noConsoleLog  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  ⚠ Don't use console.log

    103 │       }
    104 │       default:
  > 105 │         console.log(`Unhandled event type ${event.type}`);
        │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    106 │         break;
    107 │     }

  ℹ console.log is usually a tool for debugging and you don't want to have that in production.

  ℹ If it is not for debugging purpose then using console.info might be more appropriate.

  ℹ Unsafe fix: Remove console.log

    103 103 │         }
    104 104 │         default:
    105     │ - ········console.log(`Unhandled·event·type·${event.type}`);
    106 105 │           break;
    107 106 │       }

Skipped 9 suggested fixes.
Checked 174 files in 111ms. Fixed 6 files.
Found 3 errors.
Found 17 warnings.

Used by these organizations and thousands of open source projects.

Why choose Ultracite?

Ultracite is specifically designed to be easy to setup and use. Here's how it compares to other toolchains.

ESLint + Prettier + Stylelint

The traditional JavaScript toolchain.

Thousands of available rules

Hundreds of lines of config

10+ dependencies

4+ config files

Slow performance

Setup in minutes

Ultracite

Zero-config Biome preset with AI integration.

Hundreds of available rules

2 lines of config

2 dependencies

1 config file

Lightning fast performance

Agent Rules

Editor Configuration

Third-party integrations

MCP Server

Setup in seconds

Framework presets

Biome

Fast Rust-based formatter and linter.

Hundreds of available rules

Hundreds of lines of config

1 dependency

1 config file

Lightning fast performance

Setup in minutes

Zero-config by design

Hundreds of rules for your framework to optimize your JavaScript / TypeScript code, while still allowing you to customize when needed.

Next.jsNext.jsReactReactSolidSolidVueVueSvelteSvelteQwikQwikAngularAngularRemixRemixAstroAstro

{  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",  "extends": ["ultracite/core", "ultracite/react", "ultracite/next"]}

Designed for humans and AI

Ensure consistent code style and quality across all team members and AI models, eliminating debates over formatting and reducing code review friction.

Agent Integration

Add formatting rules for AI agents and run Ultracite in agent loops.

Editor configuration

Automatically generate editor-specific rule files to work with Ultracite.

Configurable spec

Zero configuration Biome configuration out of the box.

.cursor

JSON

hooks.json

.rules

Markdown

ultracite.mdc

.vscode

JSON

settings.json

React

index.tsx

React

layout.tsx

TypeScript

utils.ts

CSS

globals.css

JSON

biome.jsonc

import React from 'react';interface User {  id: number;  name: string;  email: string;}const UserCard: React.FC<{ user: User }> = ({ user }) => {  return (    <div className="p-4 border rounded-lg shadow-sm">      <h3 className="text-lg font-semibold">{user.name}</h3>      <p className="text-gray-600">{user.email}</p>    </div>  );};export default UserCard;

Problems

Biome (Ultracite)

React

index.tsx

/index.tsx

React is imported but not used

It is not necessary to wrap the return statement in a div.

Generate me a new UserCard component.

Sure! I'll generate a new UserCard component for you.

Using Ultracite

I found several issues with the code. Here's a list of suggestions:

React is imported but not used. This is a common pattern in React codebases, but it's not necessary. You can destructure the import to use the React object.
It is not necessary to wrap the return statement in a div. You can return the JSX directly.
Extract types into a type definition rather than providing them inline. This will make the code more readable and maintainable.

MCP Support

Lint and format code without needing to run Ultracite locally.

Output panel

Biome uses the VS Code output panel to show problems.

Works with all your favourite agents

Ultracite can generate rules files for all these popular IDEs and agents, so you can get the most of out of your AI integrations.

+ 11

See how to migrate to Ultracite

Watch some popular YouTubers use Ultracite to lint and format their code.

The EASIEST Way To Switch From ESLint & Prettier to Biome — Ultracite - YouTube

Photo image of Better Stack

Better Stack

84.8K subscribers

The EASIEST Way To Switch From ESLint & Prettier to Biome — Ultracite

Better Stack

Watch later

Copy link

Info

Shopping

Tap to unmute

If playback doesn't begin shortly, try restarting your device.

What the community is saying

Here's what some of the most in the most forward-thinking developers in the React ecosystem have to say about Ultracite.

shadcn

@shadcn

· Follow

View on Twitter

I’ve switched to Ultracite for most of my projects now. Can recommend.

Hayden Bleasel

@haydenbleasel

✨ I'm unbelievably excited to introduce Ultracite v5: the AI-ready formatter that helps you write and generate code faster.

🙅 Zero-config
⚡ Lightning fast
🤖 Designed for humans and AI
💪 Maximum type safety
🔗 Plays nice with others

Here's the TL;DR 👇🧵

Watch on X

2:51 AM · Jun 24, 2025 Twitter for Websites, Ads Information and Privacy

Copy link

· Follow

Ustedes saben lo insoportable que soy con la configuración de ESLint y eso. No digo que vaya a reemplazar mi super mega config, pero `ultracite` anda muy bien 👀

4:58 PM · Aug 12, 2025 Twitter for Websites, Ads Information and Privacy

Copy link

· Follow

thanks for building Ultracite @haydenbleasel, it's awesome.

7:33 PM · Oct 10, 2025 Twitter for Websites, Ads Information and Privacy

Copy link

· Follow

One of the biggest lessons I learned from my first startup is to set the bar extremely high for code quality and linting from day one. If you do not, it turns into an impossible escalator you can never step off.

We are big believers in ultracite.ai, and I am always