Biome - Fast all-in-one toolchain for web projects (linter + formatter in Rust, 100x faster than ESLint)
Biome is a fast, all-in-one toolchain for web projects written in Rust. It replaces both ESLint and Prettier with a single tool that's 100x faster and provides zero-config defaults.
Key Features:
Installation:
npm install --save-dev @biomejs/biome
# Create biome.json configuration
npx @biomejs/biome init
# Check your project
npx @biomejs/biome check .
# Fix issues automatically
npx @biomejs/biome check --write .
# Format only
npx @biomejs/biome format --write .
# Lint only
npx @biomejs/biome lint .
{
"scripts": {
"check": "biome check .",
"check:write": "biome check --write .",
"format": "biome format --write .",
"lint": "biome lint .",
"lint:fix": "biome lint --write ."
}
}
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false,
"ignore": ["node_modules", "dist", "build", ".next"]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 100
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"semicolons": "asNeeded",
"trailingCommas": "all"
}
}
}
The check command runs both linting and formatting:
# Check all files
biome check .
# Fix issues automatically
biome check --write .
# Unsafe fixes (may change behavior)
biome check --write --unsafe .
# Apply suggested fixes
biome check --write --unsafe --apply-suggested
# Check specific files
biome check src/**/*.ts
# CI mode (exit with error on issues)
biome ci .
Format code without linting:
# Format all files
biome format --write .
# Check formatting without changing files
biome format .
# Format specific files
biome format --write src/**/*.{ts,tsx,js,jsx}
# Format stdin
echo "const x={a:1}" | biome format --stdin-file-path=file.js
Lint code without formatting:
# Lint all files
biome lint .
# Fix linting issues
biome lint --write .
# Show rule names
biome lint --verbose .
# Apply unsafe fixes
biome lint --write --unsafe .
{
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80,
"attributePosition": "auto"
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"jsxQuoteStyle": "double",
"quoteProperties": "asNeeded",
"trailingCommas": "all",
"semicolons": "asNeeded",
"arrowParentheses": "always",
"bracketSpacing": true,
"bracketSameLine": false
}
},
"json": {
"formatter": {
"trailingCommas": "none"
}
}
}
{
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"a11y": {
"recommended": true,
"noAutofocus": "error",
"useKeyWithClickEvents": "warn"
},
"complexity": {
"recommended": true,
"noForEach": "off",
"useLiteralKeys": "error"
},
"correctness": {
"recommended": true,
"noUnusedVariables": "error",
"useExhaustiveDependencies": "warn"
},
"performance": {
"recommended": true,
"noAccumulatingSpread": "warn"
},
"security": {
"recommended": true,
"noDangerouslySetInnerHtml": "error"
},
"style": {
"recommended": true,
"noNonNullAssertion": "warn",
"useConst": "error",
"useTemplate": "warn"
},
"suspicious": {
"recommended": true,
"noExplicitAny": "warn",
"noArrayIndexKey": "error"
}
}
}
}
{
"files": {
"ignore": [
"node_modules",
"dist",
"build",
".next",
"coverage",
"*.min.js",
"public/assets/**"
],
"ignoreUnknown": false,
"include": ["src/**/*.ts", "src/**/*.tsx"]
}
}
{
"overrides": [
{
"include": ["**/*.test.ts", "**/*.spec.ts"],
"linter": {
"rules": {
"suspicious": {
"noExplicitAny": "off"
}
}
}
},
{
"include": ["scripts/**/*.js"],
"formatter": {
"lineWidth": 120
}
}
]
}
# Install from VS Code marketplace
code --install-extension biomejs.biome
.vscode/settings.json){
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"quickfix.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true
},
"biome.lspBin": "./node_modules/@biomejs/biome/bin/biome"
}
{
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.defaultFormatter": "biomejs.biome",
"biome.rename": true,
"files.autoSave": "onFocusChange"
}
# Remove ESLint and Prettier
npm uninstall eslint prettier eslint-config-prettier \
eslint-plugin-react eslint-plugin-import \
@typescript-eslint/parser @typescript-eslint/eslint-plugin
# Remove configuration files
rm .eslintrc.js .eslintrc.json .prettierrc .prettierignore
Use Biome's migration tool:
# Migrate from Prettier config
biome migrate prettier --write
# Migrate from ESLint config
biome migrate eslint --write
Prettier → Biome Formatter:
// .prettierrc (old)
{
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100
}
// biome.json (new)
{
"formatter": {
"lineWidth": 100
},
"javascript": {
"formatter": {
"semicolons": "asNeeded",
"quoteStyle": "single",
"trailingCommas": "all"
}
}
}
ESLint → Biome Linter:
// .eslintrc.json (old)
{
"rules": {
"no-unused-vars": "error",
"prefer-const": "warn"
}
}
// biome.json (new)
{
"linter": {
"rules": {
"correctness": {
"noUnusedVariables": "error"
},
"style": {
"useConst": "warn"
}
}
}
}
{
"scripts": {
"lint": "biome lint .",
"lint:fix": "biome lint --write .",
"format": "biome format --write .",
"check": "biome check --write ."
}
}
# Install dependencies
npm install --save-dev husky lint-staged
npx husky init
.husky/pre-commit:
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
package.json:
{
"lint-staged": {
"*.{js,ts,jsx,tsx,json}": [
"biome check --write --no-errors-on-unmatched"
]
}
}
lefthook.yml:
pre-commit:
commands:
lint:
glob: "*.{js,ts,jsx,tsx,json}"
run: biome check --write --no-errors-on-unmatched {staged_files}
.git/hooks/pre-commit:
#!/bin/bash
# Get staged files
STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(js|ts|jsx|tsx|json)$')
if [ -n "$STAGED_FILES" ]; then
echo "Running Biome on staged files..."
npx @biomejs/biome check --write --no-errors-on-unmatched $STAGED_FILES
# Add formatted files back to staging
git add $STAGED_FILES
fi