ESLint

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

ESLint combined with Prettier and Stylelint 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:

import core from "ultracite/eslint/core";

export default [...core];

import config from "ultracite/prettier";

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

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:

import core from "ultracite/eslint/core";
import react from "ultracite/eslint/react";
import next from "ultracite/eslint/next";

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

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, @tanstack/eslint-plugin-router, and @tanstack/eslint-plugin-start 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.

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):

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension stylelint.vscode-stylelint