---
title: ESLint
description: Learn when Ultracite is the right fit for ESLint, Prettier, and Stylelint, and what you keep from the mature plugin ecosystem.
---

[ESLint](https://eslint.org/) combined with [Prettier](https://prettier.io/) and [Stylelint](https://stylelint.io/) provides the most mature and battle-tested linting solution available. Used by millions of developers, this toolchain offers the largest ecosystem of plugins and configurations.

## Benefits

- **Battle-tested** — Used by millions of developers worldwide with the largest plugin ecosystem
- **20+ plugins included** — React, TypeScript, JSX A11y, Import, Next.js, Unicorn, SonarJS, and more
- **Three tools in one** — ESLint for code quality, Prettier for formatting, Stylelint for CSS, SCSS, and Less
- **Framework-aware** — First-class support for React, Next.js, Vue, Svelte, and more
- **Type-aware linting** — typescript-eslint's project service finds the nearest `tsconfig.json` for each file, so monorepos and solution-style configs get type information without extra setup
- **Maximum coverage** — Hundreds of rules covering accessibility, security, performance, and best practices

## Usage

Ultracite generates three config files for ESLint:

```javascript title="eslint.config.mjs"
import core from "ultracite/eslint/core";

export default [...core];
```

```javascript title="prettier.config.mjs"
import config from "ultracite/prettier";

export default {
  ...config,
  plugins: ["prettier-plugin-tailwindcss"],
};
```

```javascript title="stylelint.config.mjs"
export { default } from "ultracite/stylelint";
```

The `prettier-plugin-tailwindcss` plugin is always included (and must stay last); selecting the Astro or Svelte frameworks adds `prettier-plugin-astro` or `prettier-plugin-svelte` before it.

The ESLint preset lints JavaScript and TypeScript modules (`.js`, `.jsx`, `.mjs`, `.cjs`, `.ts`, `.tsx`, `.mts`, `.cts`) and inline scripts in HTML files; the Vue, Svelte, and Astro presets add their own file types. It doesn't lint JSON — Prettier formats it. Stylelint lints `.css`, `.scss`, and `.less` files (`init` installs `postcss-scss` and `postcss-less` for the last two) and understands Tailwind CSS v4 at-rules, functions, and theme variables.

Add framework presets as needed:

```javascript title="eslint.config.mjs"
import core from "ultracite/eslint/core";
import react from "ultracite/eslint/react";
import next from "ultracite/eslint/next";

export default [...core, ...react, ...next];
```

## Authorization Proofs with gdp-ts (Optional)

Ultracite also ships an opt-in `gdp` preset for [gdp-ts](https://github.com/rauchg/gdp-ts), which makes authorization checks visible to the type checker: sensitive functions demand a proof that only a trusted module in `proofs/` can mint. The lint plugin ships inside `@gdp-ts/core`, so once your codebase uses gdp-ts there is nothing extra to install. Spread the preset after core:

```javascript title="eslint.config.mjs"
import core from "ultracite/eslint/core";
import gdp from "ultracite/eslint/gdp";

export default [...core, ...gdp];
```

It matches the [Oxlint preset](/docs/provider/oxlint#authorization-proofs-with-gdp-ts-optional): upstream's strict mode stops proofs being forged with type assertions or minted outside `proofs/`, and empty proof interfaces (`interface X<P> extends Proof<"X", [P]> {}`) are allowed inside `proofs/`. It also sets `@typescript-eslint/no-unused-vars` to ignore `_`-prefixed arguments, as Oxlint does by default, because sensitive functions take proofs they never read at runtime (`_proof: UserIsProjectAdmin<U, P>`).

## Configuration Approach

Ultracite's ESLint configuration uses an **opt-out** approach. This means we enable every non-deprecated rule from each plugin at the `error` level, then selectively disable or adjust rules that don't fit our opinionated defaults. This ensures maximum coverage while avoiding overly strict or conflicting rules.

## Included Plugins

Ultracite's ESLint configuration includes the following plugins:

### Core Plugins

- **eslint** — ESLint's built-in rules for JavaScript best practices
- **@typescript-eslint** — TypeScript-specific linting rules with type-aware checks
- **prettier** — Integrates Prettier formatting as ESLint rules
- **unused-imports** — Automatically removes unused imports

### Code Quality

- **unicorn** — Opinionated rules for cleaner, more readable code
- **sonarjs** — Bug detection and code smell identification
- **promise** — Best practices for Promises and async/await
- **import-x** — Import/export syntax validation and organization
- **jsdoc** — JSDoc comment validation (the rules Oxlint also implements)

### Framework Support

- **react** / **react-hooks** — React-specific rules and hooks validation
- **jsx-a11y** — Accessibility rules for JSX elements
- **tanstack** — [`@tanstack/eslint-plugin-query`](https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query), [`@tanstack/eslint-plugin-router`](https://tanstack.com/router/latest/docs/eslint/eslint-plugin-router), and [`@tanstack/eslint-plugin-start`](https://tanstack.com/start/latest/docs/eslint) when you opt into the **`tanstack`** framework preset
- **@next/next** — Next.js-specific rules
- **vue** / **svelte** / **solid** / **astro** / **angular** / **qwik** / **remix** / **nestjs** — Framework-specific rules

### Testing

- **jest** — Jest testing best practices
- **vitest** — Vitest testing best practices
- **cypress** — Cypress testing best practices
- **storybook** — Storybook component documentation rules

### Other

- **n** — Node.js-specific rules
- **compat** — Browser compatibility checks
- **github** — GitHub-specific best practices
- **html** — Linting for inline scripts in HTML files

## Formatter Settings (Prettier)

Ultracite configures Prettier with these defaults:

- **Indentation**: 2 spaces
- **Line Width**: 80 characters
- **Semicolons**: Always required
- **Double Quotes**: Yes
- **Trailing Commas**: ES5 style
- **Arrow Parentheses**: Always include
- **Tailwind Class Sorting**: Enabled through `prettier-plugin-tailwindcss`, including inside `clsx`, `cva`, `tw`, `twMerge`, `cn`, `twJoin`, and `tv` calls

## Rule Reference

For the complete list of rules and their settings, see the [ESLint configuration on GitHub](https://github.com/haydenbleasel/ultracite/tree/main/packages/cli/config/eslint).

## VS Code Extensions

When `init` creates `.vscode/settings.json`, it installs the ESLint and Prettier extensions for you. Otherwise, install the required extensions yourself (the Stylelint one is always manual):

```bash title="Terminal"
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension stylelint.vscode-stylelint
```