---

name: code-formatter description: | Automatically formats and validates code files using Prettier and other formatting tools. Use when users mention "format my code", "fix formatting", "apply code style", "check formatting", "make code consistent", or "clean up code formatting". Handles JavaScript, TypeScript, JSON, CSS, Markdown, and many other file types. allowed-tools: Read, Write, Edit, Grep, Glob, Bash version: 1.0.0

Code Formatter Skill

This skill provides comprehensive code formatting and validation capabilities using industry-standard tools like Prettier.

Prerequisites

• Node.js and npm/npx installed
• Prettier available globally or locally
• Write permissions for target files
• Supported file types in the project

Instructions

1. Analyze Current Formatting

First, check the current formatting state of files:

Copy# Check if prettier is available
npx prettier --version || npm install -g prettier

# Find all formattable files
find . -type f \( -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" -o -name "*.json" -o -name "*.css" -o -name "*.md" \) -not -path "*/node_modules/*" -not -path "*/dist/*"

# Check which files need formatting
npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}" --ignore-path .prettierignore

2. Configure Formatting Rules

Create or check for existing Prettier configuration:

Copy// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

3. Apply Formatting

Format individual files or entire directories:

Copy# Format a single file
npx prettier --write src/app.js

# Format all JavaScript files
npx prettier --write "**/*.js"

# Format with specific config
npx prettier --write --config .prettierrc "src/**/*.{js,jsx,ts,tsx}"

# Dry run to see what would change
npx prettier --check src/

4. Set Up Ignore Patterns

Create .prettierignore for files to skip:

Copy# Dependencies
node_modules/
vendor/

# Build outputs
dist/
build/
*.min.js
*.min.css

# Generated files
coverage/
*.lock

5. Integrate with Git Hooks (Optional)

Set up pre-commit formatting:

Copy# Install husky and lint-staged
npm install --save-dev husky lint-staged

# Configure in package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,md}": [
      "prettier --write"
    ]
  }
}

Output

The formatter provides detailed feedback:

Success Output

Copy✓ Formatted: src/app.js
✓ Formatted: src/components/Button.jsx
✓ Formatted: package.json
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ Successfully formatted 3 files

Validation Output

CopyChecking formatting...
[warn] src/app.js
[warn] src/utils/helper.ts
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Found 2 files that need formatting

Error Output

Copy✗ Error: Cannot format src/broken.js
  SyntaxError: Unexpected token (line 15:8)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
❌ Failed to format 1 file

Error Handling

Common issues and solutions:

1. Prettier Not Found

Copy# Install globally
npm install -g prettier

# Or use npx (no installation needed)
npx prettier --version

2. Syntax Errors

Copy# Validate JavaScript syntax first
npx eslint src/app.js --fix-dry-run

# Check for parsing errors
npx prettier --debug-check src/app.js

3. Configuration Conflicts

Copy# Find all config files
find . -name ".prettier*" -o -name "prettier.config.js"

# Use specific config
npx prettier --config ./custom-prettier.json --write src/

4. Permission Issues

Copy# Check file permissions
ls -la src/app.js

# Fix permissions if needed
chmod u+w src/app.js

Resources

File Type Support

Configuration Options

Copy{
  // Semicolons
  "semi": true,              // Add semicolons

  // Quotes
  "singleQuote": true,       // Use single quotes
  "jsxSingleQuote": false,   // JSX double quotes

  // Indentation
  "tabWidth": 2,             // Spaces per tab
  "useTabs": false,          // Use spaces

  // Line Length
  "printWidth": 100,         // Line wrap length
  "proseWrap": "preserve",   // Markdown wrapping

  // Trailing Commas
  "trailingComma": "es5",    // Valid in ES5

  // Brackets
  "bracketSpacing": true,    // { foo: bar }
  "bracketSameLine": false,  // JSX brackets

  // Arrow Functions
  "arrowParens": "avoid",    // x => x vs (x) => x

  // Formatting
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto"
}

Command Reference

Copy# Basic formatting
prettier --write <file>           # Format file
prettier --check <file>           # Check if formatted
prettier --debug-check <file>     # Debug parse errors

# Multiple files
prettier --write "src/**/*.js"    # Glob pattern
prettier --write . --ignore-path .gitignore

# Configuration
prettier --config <path>          # Use specific config
prettier --no-config              # Ignore config files
prettier --find-config-path <file> # Show config used

# Output options
prettier --list-different         # List unformatted files
prettier --log-level debug        # Verbose output
prettier --no-color              # Disable colors

# Special options
prettier --require-pragma         # Only format with @format
prettier --insert-pragma          # Add @format comment
prettier --range-start 10 --range-end 50  # Partial format

Integration Examples

VS Code Integration:

Copy{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

CI/CD Pipeline:

Copy# GitHub Actions
- name: Check formatting
  run: npx prettier --check .

# Fail on unformatted code
- name: Enforce formatting
  run: |
    npx prettier --check . || {
      echo "Code is not formatted!"
      exit 1
    }

Pre-commit Hook:

Copy#!/bin/sh
# .git/hooks/pre-commit

files=$(git diff --cached --name-only --diff-filter=ACMR | grep -E '\.(js|jsx|ts|tsx|json|css|md)$')

if [ -n "$files" ]; then
  npx prettier --write $files
  git add $files
fi

Performance Tips

1. Use .prettierignore to skip large/generated files
2. Cache node_modules in CI environments
3. Run in parallel for multiple files:

   Copyfind . -name "*.js" | xargs -P 4 -I {} npx prettier --write {}
   

4. Use --cache flag for incremental formatting:

   Copynpx prettier --write --cache src/
   

Related Tools

• ESLint - Linting and code quality
• Stylelint - CSS/SCSS linting
• Markdownlint - Markdown style checking
• Black - Python formatting
• rustfmt - Rust formatting
• gofmt - Go formatting

---

Version: 1.0.0 Last Updated: 2025-12-12 Compatibility: Claude Code v1.5.0+