biome-configuration
$
npx mdskill add TheBushidoCollective/han/biome-configurationConfigure Biome for fast linting and formatting.
- Sets up biome.json with schema versions and project rules.
- Integrates with Git for version control and ignore files.
- Executes Bash commands to install and initialize the tool.
- Generates optimized configuration files for JavaScript projects.
SKILL.md
.github/skills/biome-configurationView on GitHub ↗
---
name: biome-configuration
user-invocable: false
description: Use when biome configuration including biome.json setup, schema versions, VCS integration, and project organization.
allowed-tools: [Read, Write, Edit, Bash, Glob, Grep]
---
# Biome Configuration
Master Biome configuration including biome.json setup, schema versions, VCS integration, and project organization for optimal JavaScript/TypeScript tooling.
## Overview
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.
## Installation and Setup
### Basic Installation
Install Biome in your project:
```bash
npm install --save-dev @biomejs/biome
# or
pnpm add -D @biomejs/biome
# or
yarn add -D @biomejs/biome
```
### Initialize Configuration
Create a basic biome.json configuration:
```bash
npx biome init
```
This creates a `biome.json` file in your project root.
## Configuration File Structure
### Basic biome.json
```json
{
"$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"
}
}
}
```
### Schema Versioning
Always use the correct schema version matching your Biome installation:
```bash
# Check Biome version
npx biome --version
# Migrate configuration to current version
npx biome migrate --write
```
The `$schema` field enables IDE autocomplete and validation:
```json
{
"$schema": "https://biomejs.dev/schemas/2.3.6/schema.json"
}
```
### VCS Integration
Configure version control integration to respect .gitignore:
```json
{
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true,
"defaultBranch": "main"
}
}
```
Options:
- `enabled`: Enable VCS integration
- `clientKind`: "git" for Git repositories
- `useIgnoreFile`: Respect .gitignore patterns
- `defaultBranch`: Default branch name for operations
## File Management
### File Patterns
Control which files Biome processes:
```json
{
"files": {
"ignoreUnknown": false,
"ignore": [
"**/node_modules/**",
"**/dist/**",
"**/.next/**",
"**/build/**",
"**/.cache/**"
],
"include": ["src/**/*.ts", "src/**/*.tsx"]
}
}
```
### Common Ignore Patterns
```json
{
"files": {
"ignore": [
"**/node_modules/",
"**/dist/",
"**/build/",
"**/.next/",
"**/.cache/",
"**/coverage/",
"**/*.min.js",
"**/*.log"
]
}
}
```
## Formatter Configuration
### Basic Formatter Settings
```json
{
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80
}
}
```
Options:
- `enabled`: Enable/disable formatter
- `formatWithErrors`: Format even with syntax errors
- `indentStyle`: "space" or "tab"
- `indentWidth`: Number of spaces (2 or 4 recommended)
- `lineEnding`: "lf", "crlf", or "cr"
- `lineWidth`: Maximum line length
### Language-Specific Formatting
#### JavaScript/TypeScript
```json
{
"javascript": {
"formatter": {
"quoteStyle": "single",
"quoteProperties": "asNeeded",
"trailingCommas": "all",
"semicolons": "always",
"arrowParentheses": "always",
"bracketSpacing": true,
"bracketSameLine": false
}
}
}
```
#### JSON
```json
{
"json": {
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 80,
"trailingCommas": "none"
}
}
}
```
## Linter Configuration
### Enable Recommended Rules
```json
{
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
```
### Rule Categories
Configure specific rule groups:
```json
{
"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
}
}
}
}
```
### Fine-Grained Rule Control
Enable or disable specific rules:
```json
{
"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
## Monorepo Configuration
### Root Configuration
```json
{
"$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
}
}
}
```
### Package-Specific Overrides
Each package can have its own biome.json:
```json
{
"$schema": "https://biomejs.dev/schemas/2.3.6/schema.json",
"extends": ["../../biome.json"],
"linter": {
"rules": {
"suspicious": {
"noConsoleLog": "off"
}
}
}
}
```
## Best Practices
1. **Use Schema URLs** - Always include `$schema` for IDE support
2. **Version Management** - Run `biome migrate` after updates
3. **VCS Integration** - Enable VCS to respect .gitignore
4. **Consistent Formatting** - Set clear formatter rules across team
5. **Rule Documentation** - Document why specific rules are disabled
6. **Monorepo Strategy** - Use extends for shared configuration
7. **CI Integration** - Run `biome ci` in continuous integration
8. **Pre-commit Hooks** - Validate code before commits
9. **Editor Integration** - Install Biome VSCode/IDE extensions
10. **Regular Updates** - Keep Biome updated for new features
## Common Pitfalls
1. **Schema Mismatch** - Using outdated schema version
2. **Missing Migration** - Not running migrate after updates
3. **Overly Strict** - Enabling all rules without team agreement
4. **No VCS Integration** - Not respecting gitignore patterns
5. **Inconsistent Config** - Different settings across packages
6. **Ignored Warnings** - Dismissing warnings that indicate issues
7. **No Editor Setup** - Missing IDE integration for real-time feedback
8. **Large Line Width** - Setting lineWidth too high reduces readability
9. **Mixed Quotes** - Not enforcing consistent quote style
10. **No CI Enforcement** - Not running checks in CI pipeline
## Advanced Topics
### Overrides Per Path
```json
{
"overrides": [
{
"include": ["scripts/**/*.js"],
"linter": {
"rules": {
"suspicious": {
"noConsoleLog": "off"
}
}
}
},
{
"include": ["**/*.test.ts"],
"linter": {
"rules": {
"suspicious": {
"noExplicitAny": "off"
}
}
}
}
]
}
```
### Custom Scripts
Add to package.json:
```json
{
"scripts": {
"lint": "biome check .",
"lint:fix": "biome check --write .",
"format": "biome format --write .",
"ci": "biome ci ."
}
}
```
### CI/CD Integration
```bash
# CI mode (fails on warnings)
biome ci .
# Check without fixing
biome check .
# Fix automatically
biome check --write .
# Format only
biome format --write .
```
## When to Use This Skill
- Setting up Biome in new projects
- Migrating from ESLint/Prettier to Biome
- Configuring Biome for monorepos
- Customizing linting and formatting rules
- Troubleshooting Biome configuration issues
- Integrating Biome with CI/CD pipelines
- Establishing team code standards
- Optimizing Biome performance
## Troubleshooting
### Schema Version Mismatch
```bash
# Error: Schema version doesn't match CLI version
npx biome migrate --write
```
### Files Not Being Checked
Check:
1. VCS integration and .gitignore
2. `files.ignore` patterns
3. `files.include` if specified
4. File extensions supported by Biome
### Rules Not Applying
Verify:
1. `linter.enabled` is true
2. Rule category is enabled
3. Rule name is correct
4. No overrides disabling the rule
### Performance Issues
Optimize:
1. Use `files.ignore` for large directories
2. Enable VCS integration
3. Exclude generated files
4. Update to latest Biome version
More from TheBushidoCollective/han
- absinthe-resolversUse when implementing GraphQL resolvers with Absinthe. Covers resolver patterns, dataloader integration, batching, and error handling.
- absinthe-schemaUse when designing GraphQL schemas with Absinthe. Covers type definitions, interfaces, unions, enums, and schema organization patterns.
- absinthe-subscriptionsUse when implementing real-time GraphQL subscriptions with Absinthe. Covers Phoenix channels, PubSub, and subscription patterns.
- act-docker-setupUse when configuring Docker environments for act, selecting runner images, managing container resources, or troubleshooting Docker-related issues with local GitHub Actions testing.
- act-local-testingUse when testing GitHub Actions workflows locally with act. Covers act CLI usage, Docker configuration, debugging workflows, and troubleshooting common issues when running workflows on your local machine.
- act-workflow-syntaxUse when creating or modifying GitHub Actions workflow files. Provides guidance on workflow syntax, triggers, jobs, steps, and expressions for creating valid GitHub Actions workflows that can be tested locally with act.
- ameba-configurationUse when configuring Ameba rules and settings for Crystal projects including .ameba.yml setup, rule management, severity levels, and code quality enforcement.
- ameba-custom-rulesUse when creating custom Ameba rules for Crystal code analysis including rule development, AST traversal, issue reporting, and rule testing.
- ameba-integrationUse when integrating Ameba into development workflows including CI/CD pipelines, pre-commit hooks, GitHub Actions, and automated code review processes.
- analyze-performanceAnalyze performance metrics and identify slow transactions in Sentry