Biome

bobmatnyc/claude-mpm-skills/toolchains/javascript/tooling/biome

作者 bobmatnyc718070a7d622MIT77 个星标收录于 2026年10月8日更新于 2026年10月8日仓库2个月前更新

Biome - Fast all-in-one toolchain for web projects (linter + formatter in Rust, 100x faster than ESLint)

仅含说明Software Development
AI 生成的概览

关于使用 Biome（基于 Rust 的 JavaScript/TypeScript 代码检查与格式化工具）的参考指南。

功能
该技能是一份关于 Biome 的说明性参考资料，Biome 是面向 Web 项目的一体化代码检查与格式化工具链。内容涵盖安装、配置文件、核心命令（check、format、lint）、规则分类、导入排序、monorepo 设置、编辑器集成、git 钩子以及 CI/CD 流水线。此外还介绍从 ESLint 和 Prettier 迁移的方法，并列出若干仓库的示例配置。
适用场景
当你需要为 JavaScript 或 TypeScript 项目设置或配置 Biome 时使用。它也适用于从 ESLint 和 Prettier 迁移、将 Biome 接入编辑器或 CI 工作流，或调整检查规则与格式化选项的场景。
运行要求
需要 Node.js 和 npm 来安装并运行 @biomejs/biome 包；该技能本身不附带脚本，仅提供说明。文中提到的可选集成包括 VS Code、Husky、lint-staged、Lefthook，以及 GitHub Actions、GitLab CI、CircleCI 等 CI 服务。

Biome - Fast All-in-One Toolchain

Overview

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:

  • Single tool for linting and formatting
  • 100x faster than ESLint
  • Zero configuration by default
  • Built-in import sorting
  • TypeScript-first design
  • Partial Prettier compatibility
  • Native monorepo support
  • VS Code integration

Installation:

bash
npm install --save-dev @biomejs/biome

Quick Start

1. Initialize Biome

bash
# Create biome.json configurationnpx @biomejs/biome init
# Check your projectnpx @biomejs/biome check .
# Fix issues automaticallynpx @biomejs/biome check --write .
# Format onlynpx @biomejs/biome format --write .
# Lint onlynpx @biomejs/biome lint .

2. Package.json Scripts

json
{  "scripts": {    "check": "biome check .",    "check:write": "biome check --write .",    "format": "biome format --write .",    "lint": "biome lint .",    "lint:fix": "biome lint --write ."  }}

3. Basic Configuration

json
{  "$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"    }  }}

Core Commands

Check Command (Recommended)

The check command runs both linting and formatting:

bash
# Check all filesbiome check .
# Fix issues automaticallybiome check --write .
# Unsafe fixes (may change behavior)biome check --write --unsafe .
# Apply suggested fixesbiome check --write --unsafe --apply-suggested
# Check specific filesbiome check src/**/*.ts
# CI mode (exit with error on issues)biome ci .

Format Command

Format code without linting:

bash
# Format all filesbiome format --write .
# Check formatting without changing filesbiome format .
# Format specific filesbiome format --write src/**/*.{ts,tsx,js,jsx}
# Format stdinecho "const x={a:1}" | biome format --stdin-file-path=file.js

Lint Command

Lint code without formatting:

bash
# Lint all filesbiome lint .
# Fix linting issuesbiome lint --write .
# Show rule namesbiome lint --verbose .
# Apply unsafe fixesbiome lint --write --unsafe .

Configuration Deep Dive

Formatter Configuration

json
{  "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 Configuration

json
{  "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"      }    }  }}

File Ignore Patterns

json
{  "files": {    "ignore": [      "node_modules",      "dist",      "build",      ".next",      "coverage",      "*.min.js",      "public/assets/**"    ],    "ignoreUnknown": false,    "include": ["src/**/*.ts", "src/**/*.tsx"]  }}

Override Configuration for Specific Files

json
{  "overrides": [    {      "include": ["**/*.test.ts", "**/*.spec.ts"],      "linter": {        "rules": {          "suspicious": {            "noExplicitAny": "off"          }        }      }    },    {      "include": ["scripts/**/*.js"],      "formatter": {        "lineWidth": 120      }    }  ]}

VS Code Integration

1. Install Biome Extension

bash
# Install from VS Code marketplacecode --install-extension biomejs.biome

2. VS Code Settings (.vscode/settings.json)

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"}

3. Workspace Settings

json
{  "editor.formatOnSave": true,  "editor.formatOnPaste": true,  "editor.defaultFormatter": "biomejs.biome",  "biome.rename": true,  "files.autoSave": "onFocusChange"}

Migration from ESLint and Prettier

1. Remove Old Tools

bash
# Remove ESLint and Prettiernpm uninstall eslint prettier eslint-config-prettier \  eslint-plugin-react eslint-plugin-import \  @typescript-eslint/parser @typescript-eslint/eslint-plugin
# Remove configuration filesrm .eslintrc.js .eslintrc.json .prettierrc .prettierignore

2. Migrate Configuration

Use Biome's migration tool:

bash
# Migrate from Prettier configbiome migrate prettier --write
# Migrate from ESLint configbiome migrate eslint --write

3. Manual Migration

Prettier → Biome Formatter:

json
// .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:

json
// .eslintrc.json (old){  "rules": {    "no-unused-vars": "error",    "prefer-const": "warn"  }}
// biome.json (new){  "linter": {    "rules": {      "correctness": {        "noUnusedVariables": "error"      },      "style": {        "useConst": "warn"      }    }  }}

4. Update Scripts

json
{  "scripts": {    "lint": "biome lint .",    "lint:fix": "biome lint --write .",    "format": "biome format --write .",    "check": "biome check --write ."  }}

Git Hooks Integration

Using Husky + lint-staged

bash
# Install dependenciesnpm install --save-dev husky lint-stagednpx husky init

.husky/pre-commit:

bash
#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged

package.json:

json
{  "lint-staged": {    "*.{js,ts,jsx,tsx,json}": [      "biome check --write --no-errors-on-unmatched"    ]  }}

Using Lefthook

lefthook.yml:

yaml
pre-commit:  commands:    lint:      glob: "*.{js,ts,jsx,tsx,json}"      run: biome check --write --no-errors-on-unmatched {staged_files}

Simple Git Hook (no dependencies)

.git/hooks/pre-commit:

bash
#!/bin/bash
# Get staged filesSTAGED_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_FILESfi

CI/CD Integration

GitHub Actions

yaml
name: Biome CI
on:  push:    branches: [main, develop]  pull_request:    branches: [main]
jobs:  biome:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v4
      - name: Setup Node.js        uses: actions/setup-node@v4        with:          node-version: '20'          cache: 'npm'
      - name: Install dependencies        run: npm ci
      - name: Run Biome CI        run: npx @biomejs/biome ci .
      - name: Check formatting        run: npx @biomejs/biome format .
      - name: Lint        run: npx @biomejs/biome lint .

GitLab CI

yaml
biome:  image: node:20-alpine  stage: test  script:    - npm ci    - npx @biomejs/biome ci .  cache:    paths:      - node_modules/  only:    - merge_requests    - main

CircleCI

yaml
version: 2.1
jobs:  biome:    docker:      - image: cimg/node:20.11    steps:      - checkout      - restore_cache:          keys:            - deps-{{ checksum "package-lock.json" }}      - run: npm ci      - save_cache:          paths:            - node_modules          key: deps-{{ checksum "package-lock.json" }}      - run: npx @biomejs/biome ci .
workflows:  test:    jobs:      - biome

Import Sorting

Biome includes built-in import sorting:

bash
# Organize importsbiome check --write --organize-imports-enabled=true .

Configuration:

json
{  "organizeImports": {    "enabled": true  }}

Example:

typescript
// Beforeimport { useState } from 'react';import axios from 'axios';import { Button } from './components/Button';import type { User } from './types';import './styles.css';
// After (sorted)import type { User } from './types';
import axios from 'axios';import { useState } from 'react';
import { Button } from './components/Button';
import './styles.css';

TypeScript Support

Biome has first-class TypeScript support:

json
{  "linter": {    "rules": {      "suspicious": {        "noExplicitAny": "warn",        "noUnsafeDeclarationMerging": "error"      },      "correctness": {        "noUnusedVariables": "error"      },      "style": {        "useImportType": "error",        "useExportType": "error"      }    }  }}

Type-aware linting:

typescript
// Biome detects unused variablesconst unused = 123; // ❌ Error
// Enforces type importsimport { User } from './types'; // ❌ Errorimport type { User } from './types'; // ✅ Correct
// Detects unsafe type assertionsconst num = "123" as any as number; // ⚠️ Warning

Monorepo Support

Biome works great in monorepos:

Project Structure

my-monorepo/├── biome.json (root config)├── packages/│   ├── web/│   │   └── biome.json (extends root)│   ├── api/│   │   └── biome.json│   └── shared/│       └── biome.json

Root Configuration

json
{  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",  "extends": [],  "formatter": {    "enabled": true,    "indentStyle": "space",    "indentWidth": 2  },  "linter": {    "enabled": true,    "rules": {      "recommended": true    }  }}

Package Override

json
{  "extends": ["../../biome.json"],  "formatter": {    "lineWidth": 100  },  "linter": {    "rules": {      "style": {        "noNonNullAssertion": "off"      }    }  }}

Monorepo Scripts

json
{  "scripts": {    "check": "biome check .",    "check:packages": "biome check packages/*",    "format": "biome format --write .",    "lint": "biome lint packages/*"  }}

Performance Benefits

Speed Comparison

ToolTime (10,000 files)
ESLint + Prettier~60s
Biome~0.6s

100x faster on average workloads.

Caching

Biome includes intelligent caching:

bash
# First run (no cache)biome check .  # 1.2s
# Second run (with cache)biome check .  # 0.1s
# Clear cacherm -rf node_modules/.cache/biome

Parallel Processing

Biome uses all CPU cores by default:

bash
# Limit CPU coresbiome check --max-diagnostics=50 .
# Verbose outputbiome check --verbose .

Common Patterns

React Projects

json
{  "linter": {    "rules": {      "a11y": {        "recommended": true,        "useButtonType": "error",        "useKeyWithClickEvents": "error"      },      "correctness": {        "useExhaustiveDependencies": "warn",        "useHookAtTopLevel": "error"      },      "suspicious": {        "noArrayIndexKey": "error"      }    }  },  "javascript": {    "formatter": {      "jsxQuoteStyle": "double"    }  }}

Next.js Projects

json
{  "files": {    "ignore": [".next", "out", "node_modules"]  },  "overrides": [    {      "include": ["app/**/*.tsx", "pages/**/*.tsx"],      "linter": {        "rules": {          "a11y": {            "recommended": true          }        }      }    }  ]}

Node.js Backend

json
{  "linter": {    "rules": {      "security": {        "recommended": true,        "noGlobalEval": "error"      },      "correctness": {        "noUnusedVariables": "error"      }    }  },  "javascript": {    "formatter": {      "semicolons": "always"    }  }}

Best Practices

  1. Use biome check instead of separate format/lint commands
  2. Enable --write flag for automatic fixes
  3. Configure VS Code for format-on-save
  4. Add git hooks to enforce quality before commits
  5. Use CI mode (biome ci) in continuous integration
  6. Start with recommended rules then customize
  7. Leverage import sorting to organize imports automatically
  8. Use overrides for different file types or directories
  9. Enable VCS integration to respect .gitignore
  10. Keep configuration minimal - Biome has smart defaults

Troubleshooting

Biome Not Formatting

bash
# Check if formatter is enabledbiome rage
# Verify file is not ignoredbiome check --verbose src/file.ts
# Check VS Code extension logs# View → Output → Biome

Conflicts with Prettier

bash
# Disable Prettier in VS Code settings"[javascript]": {  "editor.defaultFormatter": "biomejs.biome"}
# Remove Prettier dependenciesnpm uninstall prettier

Performance Issues

bash
# Check cache locationbiome rage
# Clear cacherm -rf node_modules/.cache/biome
# Reduce max diagnosticsbiome check --max-diagnostics=20 .

Rule Configuration Not Working

json
// Ensure correct category{  "linter": {    "rules": {      "correctness": {  // Category name matters        "noUnusedVariables": "error"      }    }  }}

Local Biome Configs (Your Repos)

Patterns from active projects:

  • ai-code-review/biome.json: files.includes targets src/**/*.ts and excludes tests, lineWidth: 100, single quotes, semicolons always, and noExplicitAny: warn.
  • itinerizer-ts/biome.json: files.ignore includes node_modules, dist, .claude, and data directories; organizeImports.enabled = true.
  • matsuoka-com and diogenes use similar formatting defaults (2-space indent, lineWidth 100).

Common scripts:

json
{  "lint": "biome check src/ --diagnostic-level=error",  "lint:fix": "biome check src/ --write",  "format": "biome format src/ --write"}

Resources

Summary

  • Biome is a fast all-in-one linter and formatter
  • 100x faster than ESLint + Prettier
  • Zero config by default with smart defaults
  • Built in Rust for maximum performance
  • TypeScript-first with excellent type support
  • Import sorting included out of the box
  • VS Code integration with official extension
  • Perfect for modern web projects, monorepos, CI/CD
  • Easy migration from ESLint and Prettier

来源与署名

来源：bobmatnyc/claude-mpm-skills位于toolchains/javascript/tooling/biome提交718070a

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 bobmatnyc/claude-mpm-skills 的技能

Wordpress Security Validation

bobmatnyc

讲解以安全为先的 WordPress 开发模式，涵盖 nonce、清理、验证与输出转义。

Security772个月前更新

Bug Fix

bobmatnyc

提供结构化的缺陷修复流程：复现、定位根因、修复、验证、补充回归测试并记录 PR。

Software Development772个月前更新

Threat Modeling

bobmatnyc

运行轻量级 STRIDE 威胁建模工作坊，并将识别出的风险转化为缓解措施、工单和测试。

Security772个月前更新

Webapp Testing

bobmatnyc

提供 Playwright 模式的参考指南，用于编写 Web 应用测试，涵盖选择器、等待、断言与调试。

Software Development772个月前更新

Opentelemetry

bobmatnyc

提供使用 OpenTelemetry 为服务埋点并通过 Collector 导出 OTLP 遥测的参考指导。

DevOps & Cloud772个月前更新

Skill Creator

bobmatnyc

指导如何创建、组织并打包模块化的智能体技能，并运用渐进式披露。

AI & Agents772个月前更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新