Skip to content

haydenbleasel/ultracite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7611bc9 · Feb 12, 2025
Dec 2, 2024
Jul 19, 2024
Feb 12, 2025
Jul 19, 2024
Jan 4, 2025
Mar 18, 2022
May 28, 2024
Feb 12, 2025
Feb 1, 2025
Dec 26, 2023
Dec 15, 2024
Dec 26, 2023
Feb 12, 2025
Dec 13, 2024

Repository files navigation

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

Automatic Installation

Run the command below to install and initialize Ultracite in the current directory:

npx ultracite init

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

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "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) has strictNullChecks 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:

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "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