haydenbleaselUltracite
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 initManual Installation
Run the command below to install Ultracite:
pnpm add -D --save-exact ultracite @biomejs/biomeIf you're running VS Code, ensure you have the following extensions installed:
code --install-extension biomejs.biome
code --install-extension bradlc.vscode-tailwindcssSetup
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": {
"source.fixAll.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 ultraciteConfiguration
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