Ultracite

Ultracite is a robust linting configuration for modern TypeScript apps, built on Biome. It is incredibly opinionated and strict, enforcing the maximum amount of type safety and code quality. Once Ultracite is set up, it will automatically lint, fix and format your code on save.

Installation

Run the command below to install Ultracite:

pnpm add -D --save-exact ultracite @biomejs/biome

If you're running VS Code, ensure you have the following extensions installed:

code --install-extension biomejs.biome
code --install-extension bradlc.vscode-tailwindcss

Setup

Create a biome.json with the following contents:

{ "extends": ["ultracite"] }

Ultracite is designed to be used with VS Code. Create a .vscode/settings.json file with the following contents to enable full formatting and fixing on save:

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "emmet.showExpandedAbbreviation": "never",
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

Lastly, ensure your tsconfig.json (if it exists) includes your new ESLint config and that strictNullChecks is enabled.

{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

Usage

Ultracite will automatically lint, fix and format your code on save. If you'd like to run Ultracite manually, you can do so with the following command:

npx ultracite

Configuration

While Ultracite is designed to be zero-config, you can modify anything you'd like in your biome.json file. For example, to enable the noAutofocus rule, you can do the following:

{
  "extends": ["ultracite"],
  "linter": {
    "rules": {
      "a11y": {
        "noAutofocus": "off"
      }
    }
  }
}

You can also disable rules on a per-line basis by adding a comment to the end of the line:

// biome-ignore lint/security/noDangerouslySetInnerHtml: I do what I want mate.
<div dangerouslySetInnerHTML={{ ... }} />

Notes

Ultracite was previously built on ESLint, Prettier and Stylelint. If you'd like to use that stack, you can install a compatible version of Ultracite with the following command:

pnpm add -D ultracite@3 eslint@8 prettier stylelint typescript jest