Use when setting up linting and formatting for TypeScript/JavaScript projects. Provides Biome configuration patterns, rule explanations, and best practices.
View on GitHubsizukutamago/dev-tools-plugin
dev-tools-plugin
skills/biome/SKILL.md
February 5, 2026
Select agents to install to:
npx add-skill https://github.com/sizukutamago/dev-tools-plugin/blob/main/skills/biome/SKILL.md -a claude-code --skill biomeInstallation paths:
.claude/skills/biome/# Biome Linting & Formatting
TypeScript/JavaScript プロジェクトの Linting・Formatting 設定ガイドライン。
## 前提条件
- `biome` CLI がインストール済み(`bun add -D @biomejs/biome` または `npm install -D @biomejs/biome`)
- TypeScript/JavaScript プロジェクト
## ワークフロー
1. **設定ファイル作成**: プロジェクトルートに `biome.json` を作成
2. **ルール適用**: 下記の推奨設定をベースにカスタマイズ
3. **実行**: `bunx biome check --write .` でフォーマット+リント修正
4. **CI 連携**: `bunx biome check .` で検証(--write なし)
## 推奨設定
### ベース設定
```json
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"organizeImports": { "enabled": true },
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"complexity": { "noExcessiveCognitiveComplexity": "warn" },
"correctness": { "noUnusedVariables": "warn", "noUnusedImports": "warn" },
"style": { "useConst": "error", "noNonNullAssertion": "warn" },
"suspicious": { "noExplicitAny": "warn" }
}
},
"formatter": {
"enabled": true,
"indentStyle": "tab",
"indentWidth": 2,
"lineWidth": 100
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"semicolons": "always",
"trailingCommas": "all"
}
},
"files": {
"ignore": ["node_modules", "dist", "*.lockb", ".git"]
}
}
```
## ルール解説
### complexity/noExcessiveCognitiveComplexity
関数の認知的複雑度を制限。深いネストや条件分岐が多い関数を検出。
<Bad>
```typescript
function processData(data: Data) {
if (data.type === 'A') {
if (data.subtype === '1') {
if (data.value > 10) {
if (data.active) {
// 深いネスト = 高い認知的複雑度
}
}
}
}
}
```
</Bad>
<Good>
```typescript
function processData(data: Data) {
if (!isValidData(data)) return;
const handler = getHandler(data.type, data.subtype);
return handler(data);
}
function isValidData(data: Data): boolean {
return data.value > 10 && data.active;
}
```
早期リターンと関数分割で複雑度を下げる
</Good>
### correctness/noUnusedVariables & noUnusedImports
使用されていない変数・インポートを検出。
```typescript
// ❌ 未使用インポート
import { unused } from './module';
/