typescript-utility-types
Use when typeScript utility types, mapped types, and advanced type manipulation. Use when creating flexible, type-safe TypeScript code.
biome-configuration
Use when biome configuration including biome.json setup, schema versions, VCS integration, and project organization.
Full skill instructions
Master Biome configuration including biome.json setup, schema versions, VCS integration, and project organization for optimal JavaScript/TypeScript tooling.
Biome is a fast, modern toolchain for JavaScript and TypeScript projects that combines linting and formatting in a single tool. It's designed as a performant alternative to ESLint and Prettier, written in Rust for maximum speed.
Install Biome in your project:
npm install --save-dev @biomejs/biome
# or
pnpm add -D @biomejs/biome
# or
yarn add -D @biomejs/biome
Create a basic biome.json configuration:
npx biome init
This creates a biome.json file in your project root.
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignoreUnknown": false,
"ignore": []
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 80
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"trailingCommas": "es5"
}
}
}
Always use the correct schema version matching your Biome installation:
# Check Biome version
npx biome --version
# Migrate configuration to current version
npx biome migrate --write
The $schema field enables IDE autocomplete and validation:
{
"$schema": "https://biomejs.dev/schemas/2.3.6/schema.json"
}
Configure version control integration to respect .gitignore:
{
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true,
"defaultBranch": "main"
}
}
Options:
enabled: Enable VCS integrationclientKind: "git" for Git repositoriesuseIgnoreFile: Respect .gitignore patternsdefaultBranch: Default branch name for operationsControl which files Biome processes:
{
"files": {
"ignoreUnknown": false,
"ignore": [
"**/node_modules/**",
"**/dist/**",
"**/.next/**",
"**/build/**",
"**/.cache/**"
],
"include": ["src/**/*.ts", "src/**/*.tsx"]
}
}
{
"files": {
"ignore": [
"**/node_modules/",
"**/dist/",
"**/build/",
"**/.next/",
"**/.cache/",
"**/coverage/",
"**/*.min.js",
"**/*.log"
]
}
}
{
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80
}
}
Options:
enabled: Enable/disable formatterformatWithErrors: Format even with syntax errorsindentStyle: "space" or "tab"indentWidth: Number of spaces (2 or 4 recommended)lineEnding: "lf", "crlf", or "cr"lineWidth: Maximum line length{
"javascript": {
"formatter": {
"quoteStyle": "single",
"quoteProperties": "asNeeded",
"trailingCommas": "all",
"semicolons": "always",
"arrowParentheses": "always",
"bracketSpacing": true,
"bracketSameLine": false
}
}
}
{
"json": {
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 80,
"trailingCommas": "none"
}
}
}
{
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
Configure specific rule groups:
{
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"a11y": {
"recommended": true
},
"complexity": {
"recommended": true
},
"correctness": {
"recommended": true
},
"performance": {
"recommended": true
},
"security": {
"recommended": true
},
"style": {
"recommended": true
},
"suspicious": {
"recommended": true
}
}
}
}
Enable or disable specific rules:
{
"linter": {
"rules": {
"recommended": true,
"suspicious": {
"noExplicitAny": "error",
"noConsoleLog": "warn"
},
"style": {
"useConst": "error",
"noVar": "error"
}
}
}
}
Rule levels:
"off": Disable rule"warn": Show warning"error": Fail check{
"$schema": "https://biomejs.dev/schemas/2.3.6/schema.json",
"extends": [],
"files": {
"ignore": ["**/node_modules/", "**/dist/"]
},
"formatter": {
"enabled": true,
"indentWidth": 2
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
Each package can have its own biome.json:
{
"$schema": "https://biomejs.dev/schemas/2.3.6/schema.json",
"extends": ["../../biome.json"],
"linter": {
"rules": {
"suspicious": {
"noConsoleLog": "off"
}
}
}
}
$schema for IDE supportbiome migrate after updatesbiome ci in continuous integration{
"overrides": [
{
"include": ["scripts/**/*.js"],
"linter": {
"rules": {
"suspicious": {
"noConsoleLog": "off"
}
}
}
},
{
"include": ["**/*.test.ts"],
"linter": {
"rules": {
"suspicious": {
"noExplicitAny": "off"
}
}
}
}
]
}
Add to package.json:
{
"scripts": {
"lint": "biome check .",
"lint:fix": "biome check --write .",
"format": "biome format --write .",
"ci": "biome ci ."
}
}
# CI mode (fails on warnings)
biome ci .
# Check without fixing
biome check .
# Fix automatically
biome check --write .
# Format only
biome format --write .
# Error: Schema version doesn't match CLI version
npx biome migrate --write
Check:
files.ignore patternsfiles.include if specifiedVerify:
linter.enabled is trueOptimize:
files.ignore for large directoriesUse when typeScript utility types, mapped types, and advanced type manipulation. Use when creating flexible, type-safe TypeScript code.
Use when writing shell scripts that need to run across different systems, shells, or environments. Covers POSIX compatibility and platform differences.
Use when optimizing Tailwind CSS for production, reducing bundle size, and improving performance. Covers PurgeCSS, JIT mode, and build optimization.
Generate production-ready code from a Figma component or frame using the Figma MCP server
Use when integrating Dialyzer into development workflows and CI/CD pipelines for Erlang/Elixir projects.
Use when ruboCop configuration including YAML config, departments, inheritance, and customization.
Use when Elixir OTP patterns including GenServer, Supervisor, Agent, and Task. Use when building concurrent, fault-tolerant Elixir applications.
Use when creating custom Ameba rules for Crystal code analysis including rule development, AST traversal, issue reporting, and rule testing.
Use when swift's optional handling patterns including optional binding, chaining, nil coalescing, and modern approaches to safely working with optional values while avoiding common pitfalls and force unwrapping.
Use when annotating code with structured metadata, tags, and markers for AI-assisted development workflows. Covers annotation formats, semantic tags, and integration with development tools.
Use when scala collections including immutable/mutable variants, List, Vector, Set, Map operations, collection transformations, lazy evaluation with views, parallel collections, and custom collection builders for efficient data processing.
Use when creating custom React Flow nodes, edges, and handles. Covers custom node components, resizable nodes, toolbars, and advanced customization.
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience