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 是面向網頁專案的一體化程式碼檢查與格式化工具鏈。內容涵蓋安裝、設定檔、核心指令（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 模式的參考指南，用於撰寫網頁應用程式測試，涵蓋選擇器、等待、斷言與除錯。

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 週前更新