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.

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

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

Quick Start

# Default setup (Biome) - RECOMMENDED
python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py \
  --root /path/to/project

# Use ESLint + Prettier instead (legacy)
python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py \
  --root /path/to/project \
  --eslint

# ESLint + Prettier with TypeScript
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
python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py \
  --root /path/to/project \
  --vitest

# Full setup: Biome + Vitest + Husky
python3 ~/.claude/skills/linter-formatter-init/scripts/setup.py \
  --root /path/to/project \
  --vitest \
  --coverage 80

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

Configuration Files (Biome - Default)

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

Configuration Files (ESLint + Prettier - Legacy)

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

Bun Scripts Added (Biome)

{
  "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)

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

Bun Scripts Added (ESLint + Prettier)

{
  "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 is a fast, all-in-one linter and formatter. The default config includes:

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

Vitest Configuration (with --vitest)

When you use the --vitest flag, this skill creates a vitest.config.ts:

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: ["no

...