linter-formatter-init

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Linter Formatter Init

代码检查与格式化工具初始化

Set up comprehensive linting, formatting, and testing for JavaScript/TypeScript projects using Biome 2.3+ (default), Vitest, and Bun.

IMPORTANT: Always uses Biome 2.3+ (latest) - never older versions.

使用Biome 2.3+（默认）、Vitest和Bun为JavaScript/TypeScript项目搭建全面的代码检查、格式化与测试环境。

重要提示：始终使用Biome 2.3+（最新版本）- 绝不使用旧版本。

Purpose

用途

This skill automates the setup of:

Biome for linting + formatting (default, recommended)
Vitest for testing with coverage (use
```
--vitest
```
flag)
ESLint + Prettier (legacy, use
```
--eslint
```
flag)
Husky + lint-staged for pre-commit hooks
VS Code/Cursor settings for auto-format on save
bun scripts for manual linting, formatting, and testing

此技能可自动搭建以下内容：

Biome 用于代码检查 + 格式化（默认推荐）
Vitest 用于带覆盖率统计的测试（使用
```
--vitest
```
参数）
ESLint + Prettier（旧版方案，使用
```
--eslint
```
参数）
Husky + lint-staged 用于提交前钩子
VS Code/Cursor 自动保存时格式化的设置
用于手动检查、格式化和测试的Bun脚本

When to Use

使用场景

Use this skill when:

Starting a new JS/TS project
Adding linting to an existing project without tooling
Standardizing code quality across a team
Setting up pre-commit hooks to enforce quality

在以下场景使用此技能：

启动新的JS/TS项目时
为未配置工具的现有项目添加代码检查时
团队统一代码质量标准时
设置提交前钩子以强制保证代码质量时

Quick Start

快速开始

bash

undefined

bash

undefined

Default setup (Biome) - RECOMMENDED

默认配置（Biome）- 推荐

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py
--root /path/to/project

Use ESLint + Prettier instead (legacy)

改用ESLint + Prettier（旧版）

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py
--root /path/to/project
--eslint

ESLint + Prettier with TypeScript

带TypeScript的ESLint + Prettier

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py
--root /path/to/project
--eslint
--typescript

Skip pre-commit hooks

跳过提交前钩子

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py
--root /path/to/project
--no-hooks

Add Vitest testing with 80% coverage threshold

添加带80%覆盖率阈值的Vitest测试

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py
--root /path/to/project
--vitest

Full setup: Biome + Vitest + Husky

完整配置：Biome + Vitest + Husky

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py
--root /path/to/project
--vitest
--coverage 80

undefined

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py
--root /path/to/project
--vitest
--coverage 80

undefined

What Gets Installed

安装内容

Dependencies

依赖包

Biome 2.3+ (default):

@biomejs/biome@latest (always latest, minimum 2.3+)

Vitest (with --vitest):

vitest
@vitest/coverage-v8

ESLint + Prettier (legacy, with --eslint):

eslint
prettier
eslint-config-prettier
eslint-plugin-prettier
@typescript-eslint/parser (if --typescript)
@typescript-eslint/eslint-plugin (if --typescript)

Pre-commit hooks:

husky
lint-staged

Biome 2.3+（默认）：

@biomejs/biome@latest（始终为最新版本，最低要求2.3+）

Vitest（使用--vitest参数）：

vitest
@vitest/coverage-v8

ESLint + Prettier（旧版，使用--eslint参数）：

eslint
prettier
eslint-config-prettier
eslint-plugin-prettier
@typescript-eslint/parser（如果使用--typescript）
@typescript-eslint/eslint-plugin（如果使用--typescript）

提交前钩子：

husky
lint-staged

Configuration Files (Biome - Default)

配置文件（Biome - 默认）

project/
├── biome.json              # Biome config (lint + format)
├── .vscode/
│   └── settings.json       # Auto-format on save
├── .husky/
│   └── pre-commit          # Pre-commit hook
└── package.json            # Updated with scripts + lint-staged

project/
├── biome.json              # Biome配置文件（检查 + 格式化）
├── .vscode/
│   └── settings.json       # 自动保存时格式化设置
├── .husky/
│   └── pre-commit          # 提交前钩子
└── package.json            # 更新后的脚本 + lint-staged配置

Configuration Files (ESLint + Prettier - Legacy)

配置文件（ESLint + Prettier - 旧版）

project/
├── .eslintrc.json          # ESLint config
├── .prettierrc             # Prettier config
├── .prettierignore         # Prettier ignore patterns
├── .eslintignore           # ESLint ignore patterns
├── .vscode/
│   └── settings.json       # Auto-format on save
├── .husky/
│   └── pre-commit          # Pre-commit hook
└── package.json            # Updated with scripts + lint-staged

project/
├── .eslintrc.json          # ESLint配置文件
├── .prettierrc             # Prettier配置文件
├── .prettierignore         # Prettier忽略规则
├── .eslintignore           # ESLint忽略规则
├── .vscode/
│   └── settings.json       # 自动保存时格式化设置
├── .husky/
│   └── pre-commit          # 提交前钩子
└── package.json            # 更新后的脚本 + lint-staged配置

Bun Scripts Added (Biome)

添加的Bun脚本（Biome）

json

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

json

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

Bun Scripts Added (Vitest)

添加的Bun脚本（Vitest）

json

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest",
    "test:coverage": "vitest run --coverage",
    "test:ui": "vitest --ui"
  }
}

json

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest",
    "test:coverage": "vitest run --coverage",
    "test:ui": "vitest --ui"
  }
}

Bun Scripts Added (ESLint + Prettier)

添加的Bun脚本（ESLint + Prettier）

json

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

json

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Biome Configuration (Default)

Biome默认配置

Biome is a fast, all-in-one linter and formatter. The default config includes:

json

{
  "$schema": "https://biomejs.dev/schemas/2.3.12/schema.json",
  "assist": {
    "actions": {
      "source": { "organizeImports": "on" }
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": { "noForEach": "off" },
      "style": { "noNonNullAssertion": "off" },
      "suspicious": { "noArrayIndexKey": "off", "noExplicitAny": "warn" }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "es5",
      "semicolons": "always"
    }
  }
}

Biome是一个快速的一体化代码检查器和格式化工具。默认配置包含：

json

{
  "$schema": "https://biomejs.dev/schemas/2.3.12/schema.json",
  "assist": {
    "actions": {
      "source": { "organizeImports": "on" }
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": { "noForEach": "off" },
      "style": { "noNonNullAssertion": "off" },
      "suspicious": { "noArrayIndexKey": "off", "noExplicitAny": "warn" }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "es5",
      "semicolons": "always"
    }
  }
}

Customization

自定义设置

After setup, customize

biome.json

to adjust:

Linting rules
Formatting preferences
File ignore patterns

完成搭建后，可修改

biome.json

来调整：

代码检查规则
格式化偏好
文件忽略规则

Vitest Configuration (with --vitest)

Vitest配置（使用--vitest参数）

When you use the

--vitest

flag, this skill creates a

vitest.config.ts

typescript

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "node", // or "jsdom" for frontend
    include: ["src/**/*.{test,spec}.{ts,tsx}", "**/*.{test,spec}.{ts,tsx}"],
    exclude: ["node_modules", "dist", ".next", "build"],
    coverage: {
      provider: "v8",
      reporter: ["text", "json", "html", "lcov"],
      include: ["src/**/*.ts", "src/**/*.tsx"],
      exclude: ["src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"],
      thresholds: {
        lines: 80,
        functions: 80,
        branches: 75,
        statements: 80,
      },
    },
    mockReset: true,
    restoreMocks: true,
  },
});

当使用

--vitest

参数时，此技能会创建

vitest.config.ts

：

typescript

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "node", // 前端项目可改为"jsdom"
    include: ["src/**/*.{test,spec}.{ts,tsx}", "**/*.{test,spec}.{ts,tsx}"],
    exclude: ["node_modules", "dist", ".next", "build"],
    coverage: {
      provider: "v8",
      reporter: ["text", "json", "html", "lcov"],
      include: ["src/**/*.ts", "src/**/*.tsx"],
      exclude: ["src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"],
      thresholds: {
        lines: 80,
        functions: 80,
        branches: 75,
        statements: 80,
      },
    },
    mockReset: true,
    restoreMocks: true,
  },
});

Coverage Thresholds

覆盖率阈值

Default threshold is 80%. Customize with:

bash

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py \
  --root /path/to/project \
  --vitest \
  --coverage 90  # Set to 90%

默认阈值为80%。可通过以下命令自定义：

bash

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py \
  --root /path/to/project \
  --vitest \
  --coverage 90  # 设置为90%

Test Setup File

测试初始化文件

Creates

src/test/setup.ts

for global test configuration:

typescript

import { expect, afterEach } from "vitest";
import { cleanup } from "@testing-library/react"; // For React projects

// Cleanup after each test
afterEach(() => {
  cleanup();
});

创建

src/test/setup.ts

用于全局测试配置：

typescript

import { expect, afterEach } from "vitest";
import { cleanup } from "@testing-library/react"; // 针对React项目

// 每个测试后清理
afterEach(() => {
  cleanup();
});

Pre-commit Hooks

提交前钩子

When enabled (default), lint-staged runs on every commit:

Biome (default):

json

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css}": ["bunx biome check --write"]
  }
}

ESLint + Prettier (legacy):

json

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,yml,yaml}": ["prettier --write"]
  }
}

This ensures:

All committed code passes linting
All committed code is formatted
No broken code enters the repo

启用时（默认启用），lint-staged会在每次提交时运行：

Biome（默认）：

json

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css}": ["bunx biome check --write"]
  }
}

ESLint + Prettier（旧版）：

json

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,yml,yaml}": ["prettier --write"]
  }
}

这可确保：

所有提交的代码通过检查
所有提交的代码已格式化
没有损坏的代码进入仓库

VS Code / Cursor Integration

VS Code / Cursor 集成

The skill creates

.vscode/settings.json

Biome (default):

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit",
    "quickfix.biome": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

ESLint + Prettier (legacy):

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

此技能会创建

.vscode/settings.json

：

Biome（默认）：

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit",
    "quickfix.biome": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

ESLint + Prettier（旧版）：

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Why Biome Over ESLint + Prettier?

为什么选择Biome而非ESLint + Prettier？

Faster: Written in Rust, 10-100x faster than ESLint + Prettier
Simpler: One tool instead of two, one config file
No conflicts: No need for eslint-config-prettier or similar workarounds
Better defaults: Sensible rules out of the box

更快：基于Rust编写，比ESLint + Prettier快10-100倍
更简单：一个工具替代两个，一个配置文件
无冲突：无需eslint-config-prettier或类似的解决方案
更优默认值：开箱即用的合理规则

Monorepo Support

单仓库支持

For monorepos, run from the root:

bash

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py \
  --root /path/to/monorepo \
  --monorepo

This adds root-level config that applies to all packages.

对于单仓库（monorepo），在根目录运行：

bash

python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py \
  --root /path/to/monorepo \
  --monorepo

这会添加适用于所有包的根级配置。

Troubleshooting

故障排除

Pre-commit hooks not running

提交前钩子未运行

bash

undefined

bash

undefined

Reinstall husky

重新安装husky

bunx husky chmod +x .husky/pre-commit

undefined

bunx husky chmod +x .husky/pre-commit

undefined

Format on save not working (Biome)

自动保存时格式化不生效（Biome）

Install the Biome extension in VS Code/Cursor
Set Biome as default formatter
Enable "Format on Save" in settings

在VS Code/Cursor中安装Biome扩展
设置Biome为默认格式化工具
在设置中启用“保存时格式化”

Format on save not working (ESLint + Prettier)

自动保存时格式化不生效（ESLint + Prettier）

Install the Prettier extension in VS Code/Cursor
Set Prettier as default formatter
Enable "Format on Save" in settings

在VS Code/Cursor中安装Prettier扩展
设置Prettier为默认格式化工具
在设置中启用“保存时格式化”

Framework-Specific Configs (ESLint mode only)

框架特定配置（仅ESLint模式）

When using

--eslint

, the skill detects common frameworks and adjusts config:

Next.js: Adds
```
next/core-web-vitals
```
to ESLint

React: Adds

eslint-plugin-react

and

eslint-plugin-react-hooks

NestJS: Adds rules for decorators and DI patterns

使用

--eslint

参数时，此技能会检测常见框架并调整配置：

Next.js：在ESLint中添加
```
next/core-web-vitals
```
规则

React：添加

eslint-plugin-react

和

eslint-plugin-react-hooks

NestJS：添加适用于装饰器和依赖注入模式的规则

Manual Setup (Alternative)

手动搭建（替代方案）

If you prefer manual setup over the script:

Biome:

bash

bun add -D @biomejs/biome husky lint-staged
bunx biome init
bunx husky

ESLint + Prettier:

bash

bun add -D eslint prettier eslint-config-prettier eslint-plugin-prettier husky lint-staged
bun add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
bunx eslint --init
bunx husky

Then copy configs from

~/.claude/skills/linter-formatter-init/assets/configs/

如果您更喜欢手动搭建而非使用脚本：

Biome：

bash

bun add -D @biomejs/biome husky lint-staged
bunx biome init
bunx husky

ESLint + Prettier：

bash

bun add -D eslint prettier eslint-config-prettier eslint-plugin-prettier husky lint-staged
bun add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
bunx eslint --init
bunx husky

然后从

~/.claude/skills/linter-formatter-init/assets/configs/

复制配置文件。