Code Formatter

Overview

Formats and validates code files using Prettier and related formatting tools. Supports JavaScript, TypeScript, JSON, CSS, Markdown, and many other file types.

Prerequisites

• Node.js (v16+) and npm/npx installed

• Prettier available globally (npm install -g prettier ) or locally in the project

• Write permissions for target files and configuration directories

• Supported file types present in the project (.js , .jsx , .ts , .tsx , .json , .css , .md )

Instructions

• Check whether Prettier is available by running npx prettier --version . If missing, install it locally with npm install --save-dev prettier or globally with npm install -g prettier .

• Detect existing configuration by searching for .prettierrc , .prettierrc.json , prettier.config.js , or a "prettier" key in package.json . If no configuration exists, create a .prettierrc with sensible defaults (see ${CLAUDE_SKILL_DIR}/references/implementation.md ).

• Run npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}" --ignore-path .prettierignore to identify files that need formatting. Report the count and list of non-conforming files.

• Apply formatting to identified files using npx prettier --write on the target paths. For single files, specify the exact path; for directories, use glob patterns.

• Create or update .prettierignore to exclude generated outputs (dist/ , build/ , *.min.js , *.min.css ), dependencies (node_modules/ , vendor/ ), and lock files.

• Optionally set up pre-commit enforcement by installing husky and lint-staged , then configuring lint-staged in package.json to run prettier --write on staged files matching supported extensions.

• Run a final npx prettier --check to confirm all target files now conform to the configured style rules.

Output

A formatting execution report containing:

• Count of files checked and files reformatted

• List of files that were modified with before/after formatting status

• Configuration file(s) created or updated (.prettierrc , .prettierignore )

• Any git hook integration changes applied

• Confirmation of final formatting compliance

Error Handling

Error Cause Solution

prettier: command not found

Prettier not installed globally or locally Run npm install -g prettier or npx prettier --version to use npx

Syntax errors in source files Malformed code that Prettier cannot parse Fix syntax errors first using npx eslint --fix-dry-run <file> then retry formatting

Configuration conflicts Multiple .prettierrc files or conflicting editorconfig

Locate all config files with find . -name ".prettier*" and consolidate to a single config

Permission denied on write File or directory lacks write permission Run chmod u+w <file> to grant write access

Parser not found for file type Unsupported file extension or missing Prettier plugin Install the appropriate Prettier plugin (e.g., prettier-plugin-svelte ) or exclude the file type

Examples

Format a single file: Trigger: "Format src/app.js" Process: Run npx prettier --write src/app.js . Report the file as reformatted or already conformant.

Project-wide formatting setup: Trigger: "Set up code formatting for this project." Process: Create .prettierrc with project defaults, create .prettierignore excluding build outputs, run npx prettier --write "src/**/*.{js,ts,json,css}" , install husky and lint-staged for pre-commit hooks, verify compliance.

Check formatting without modifying files: Trigger: "Check formatting across the project." Process: Run npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}" . Report non-conforming files with their paths. Suggest npx prettier --write to fix.

Resources

• ${CLAUDE_SKILL_DIR}/references/implementation.md -- detailed implementation guide with configuration examples

• ${CLAUDE_SKILL_DIR}/references/errors.md -- common error scenarios and solutions

• Prettier documentation -- official configuration and CLI reference

• ESLint -- complementary linting and code quality tool

• Husky -- git hooks for pre-commit formatting enforcement