Configure Formatting

/configure:formatting

Check and configure code formatting tools against modern best practices.

When to Use This Skill

Context

• Biome config: !find . -maxdepth 1 -name \'biome.json\'
• Prettier config: !find . -maxdepth 1 \( -name '.prettierrc*' -o -name 'prettier.config.*' \)
• Ruff config: !grep -l 'tool.ruff.format' pyproject.toml
• Black config: !grep -l 'tool.black' pyproject.toml
• Rustfmt config: !find . -maxdepth 1 \( -name 'rustfmt.toml' -o -name '.rustfmt.toml' \)
• EditorConfig: !find . -maxdepth 1 -name \'.editorconfig\'
• Package JSON: !find . -maxdepth 1 -name \'package.json\'
• Python project: !find . -maxdepth 1 -name \'pyproject.toml\'
• Rust project: !find . -maxdepth 1 -name \'Cargo.toml\'
• Pre-commit: !find . -maxdepth 1 -name \'.pre-commit-config.yaml\'
• Project standards: !find . -maxdepth 1 -name \'.project-standards.yaml\'

Parameters

Parse from $ARGUMENTS:

• --check-only: Report compliance status without modifications
• --fix: Apply all fixes automatically without prompting
• --formatter <formatter>: Override formatter detection (biome, prettier, ruff, rustfmt)

Version Checking

CRITICAL: Before flagging outdated formatters, verify latest releases using WebSearch or WebFetch:

1. Biome: Check biomejs.dev or GitHub releases 2. Prettier: Check prettier.io or npm 3. Ruff: Check docs.astral.sh/ruff or GitHub releases 4. rustfmt: Bundled with Rust toolchain - check Rust releases

Execution

Execute this code formatting configuration workflow:

Step 1: Detect project languages and existing formatters

Check for language indicators and formatter configurations:

Modern formatting preferences:

• JavaScript/TypeScript: Biome (preferred) or Prettier
• Python: Ruff format (replaces Black)
• Rust: rustfmt (standard)

Step 2: Analyze current formatter configuration

For each detected formatter, check configuration completeness: 1. Config file exists with required settings (indent, line width, quotes, etc.) 2. Ignore patterns configured 3. Format scripts defined in package.json / pyproject.toml 4. Pre-commit hook configured 5. CI/CD check configured

Step 3: Generate compliance report

Print a formatted compliance report:

Code Formatting Compliance Report
==================================
Project: [name]
Language: [detected]
Formatter: [detected]

Configuration:  [status per check]
Format Options: [status per check]
Scripts:        [status per check]
Integration:    [status per check]

Overall: [X issues found]
Recommendations: [list specific fixes]

If --check-only, stop here.

Step 4: Install and configure formatter (if --fix or user confirms)

Based on detected language and formatter preference, install and configure. Use configuration templates from REFERENCE.md.

1. Install formatter package 2. Create configuration file (biome.json, .prettierrc.json, pyproject.toml section, rustfmt.toml) 3. Add format scripts to package.json or Makefile/justfile 4. Create ignore file if needed (.prettierignore)

Step 5: Create EditorConfig integration

Create or update .editorconfig with settings matching the formatter configuration.

Step 6: Handle migrations (if applicable)

If legacy formatter detected (Prettier -> Biome, Black -> Ruff): 1. Import existing configuration 2. Install new formatter 3. Remove old formatter 4. Update scripts 5. Update pre-commit hooks

Use migration guides from REFERENCE.md.

Step 7: Configure pre-commit hooks

Add formatter to .pre-commit-config.yaml using the appropriate hook repository.

Step 8: Configure CI/CD integration

Add format check step to GitHub Actions workflow.

Step 9: Configure editor integration

Create or update .vscode/settings.json with format-on-save and .vscode/extensions.json with formatter extension.

Step 10: Update standards tracking

Update .project-standards.yaml:

components:
  formatting: "2025.1"
  formatting_tool: "[biome|prettier|ruff|rustfmt]"
  formatting_pre_commit: true
  formatting_ci: true

Step 11: Print completion report

Print a summary of changes made, scripts added, and next steps (run format, verify CI, enable format-on-save).

For detailed configuration templates, migration guides, and pre-commit configurations, see REFERENCE.md.

Agentic Optimizations

Flags

Examples

# Check compliance and offer fixes
/configure:formatting

# Check only, no modifications
/configure:formatting --check-only

# Auto-fix and migrate to Biome
/configure:formatting --fix --formatter biome

Error Handling

• Multiple formatters detected: Warn about conflict, suggest migration
• No package manager found: Cannot install formatter, error
• Invalid configuration: Report parse error, offer to replace with template
• Formatting conflicts: Report files that would be reformatted

See Also

• /configure:linting - Configure linting tools
• /configure:editor - Configure editor settings
• /configure:pre-commit - Pre-commit hook configuration
• /configure:all - Run all compliance checks
• Biome documentation: https://biomejs.dev
• Ruff documentation: https://docs.astral.sh/ruff
• rustfmt documentation: https://rust-lang.github.io/rustfmt

configure-formatting Reference

Configuration templates, migration guides, and pre-commit configurations for code formatters.

Biome Configuration (Recommended for JS/TS)

Install

npm install --save-dev @biomejs/biome
# or
bun add --dev @biomejs/biome

biome.json

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always",
      "trailingCommas": "all",
      "arrowParentheses": "always",
      "bracketSpacing": true,
      "jsxQuoteStyle": "double"
    }
  },
  "json": {
    "formatter": {
      "enabled": true,
      "indentWidth": 2
    }
  },
  "files": {
    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx", "*.json"],
    "ignore": [
      "node_modules",
      "dist",
      "build",
      ".next",
      "coverage",
      "*.min.js"
    ]
  }
}

package.json Scripts

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

Prettier Configuration (Alternative for JS/TS)

Install

npm install --save-dev prettier
# or
bun add --dev prettier

.prettierrc.json

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto"
}

.prettierignore

node_modules
dist
build
.next
coverage
*.min.js
*.min.css
package-lock.json
pnpm-lock.yaml

package.json Scripts

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Ruff Format Configuration (Recommended for Python)

Install

uv add --group dev ruff

pyproject.toml

[tool.ruff.format]
quote-style = "double"
indent-style = "space"
line-ending = "auto"
skip-magic-trailing-comma = false
docstring-code-format = true
docstring-code-line-length = 72
preview = false

[tool.ruff]
line-length = 100
exclude = [
    ".git",
    ".venv",
    "__pycache__",
    "dist",
    "build",
]

Run

uv run ruff format .

Black Configuration (Alternative for Python)

Install

uv add --group dev black

pyproject.toml

[tool.black]
line-length = 100
target-version = ['py312']
include = '\.pyi?$'
extend-exclude = '''
/(
  \.eggs
  | \.git
  | \.venv
  | dist
  | build
)/
'''

rustfmt Configuration (Rust)

rustfmt.toml

edition = "2021"
max_width = 100
tab_spaces = 4
hard_tabs = false
newline_style = "Unix"
use_small_heuristics = "Default"
reorder_imports = true
reorder_modules = true
remove_nested_parens = true
format_code_in_doc_comments = true
normalize_comments = true
wrap_comments = true
format_strings = true
format_macro_bodies = true
format_macro_matchers = true
imports_granularity = "Crate"
group_imports = "StdExternalCrate"

Run

cargo fmt --all

EditorConfig Template

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.{js,jsx,ts,tsx,json,jsonc}]
indent_style = space
indent_size = 2
max_line_length = 100

[*.py]
indent_style = space
indent_size = 4
max_line_length = 100

[*.rs]
indent_style = space
indent_size = 4
max_line_length = 100

[*.{yml,yaml}]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false
max_line_length = off

[Makefile]
indent_style = tab

Migration Guides

Prettier to Biome

# Step 1: Install Biome
npm install --save-dev @biomejs/biome

# Step 2: Import Prettier config
npx @biomejs/biome migrate prettier --write

# Step 3: Review and adjust biome.json

# Step 4: Remove Prettier
npm uninstall prettier
rm .prettierrc.* prettier.config.* .prettierignore

# Step 5: Update scripts in package.json

Black to Ruff Format

# Step 1: Install Ruff
uv add --group dev ruff

# Step 2: Configure [tool.ruff.format] in pyproject.toml

# Step 3: Format codebase
uv run ruff format .

# Step 4: Remove Black
uv remove black

Pre-commit Hooks

Biome

repos:
  - repo: https://github.com/biomejs/pre-commit
    rev: v0.4.0
    hooks:
      - id: biome-check
        additional_dependencies: ["@biomejs/biome@1.9.4"]

Prettier

repos:
  - repo: https://github.com/pre-commit/mirrors-prettier
    rev: v4.0.0-alpha.8
    hooks:
      - id: prettier
        types_or: [javascript, jsx, ts, tsx, json, yaml, markdown]

Ruff Format

repos:
  - repo: https://github.com/astral-sh/ruff-pre-commit
    rev: v0.8.4
    hooks:
      - id: ruff-format

rustfmt

repos:
  - repo: https://github.com/doublify/pre-commit-rust
    rev: v1.0
    hooks:
      - id: fmt

CI/CD Integration

GitHub Actions - Biome

- name: Check formatting
  run: npx @biomejs/biome format .

GitHub Actions - Prettier

- name: Check formatting
  run: npm run format:check

GitHub Actions - Ruff

- name: Check formatting
  run: uv run ruff format --check .

GitHub Actions - rustfmt

- name: Check formatting
  run: cargo fmt --all -- --check

VS Code Editor Integration

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "[javascript]": { "editor.defaultFormatter": "biomejs.biome" },
  "[typescript]": { "editor.defaultFormatter": "biomejs.biome" },
  "[python]": { "editor.defaultFormatter": "charliermarsh.ruff" },
  "[rust]": { "editor.defaultFormatter": "rust-lang.rust-analyzer", "editor.formatOnSave": true }
}

.vscode/extensions.json

{
  "recommendations": [
    "biomejs.biome",
    "charliermarsh.ruff",
    "rust-lang.rust-analyzer",
    "editorconfig.editorconfig"
  ]
}