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
1---2name: code-formatter3description: Execute 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. Trigger with relevant phrases based on skill purpose.4license: MIT5---6# Code Formatter
7
8## Overview
9
10Formats and validates code files using Prettier and related formatting tools. Supports JavaScript, TypeScript, JSON, CSS, Markdown, and many other file types.
11
12## Prerequisites
13
14- Node.js (v16+) and npm/npx installed
15- Prettier available globally (`npm install -g prettier`) or locally in the project
16- Write permissions for target files and configuration directories
17- Supported file types present in the project (`.js`, `.jsx`, `.ts`, `.tsx`, `.json`, `.css`, `.md`)
18
19## Instructions
20
211. 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`.
222. 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`).
233. 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.
244. 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.
255. Create or update `.prettierignore` to exclude generated outputs (`dist/`, `build/`, `*.min.js`, `*.min.css`), dependencies (`node_modules/`, `vendor/`), and lock files.
266. 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.
277. Run a final `npx prettier --check` to confirm all target files now conform to the configured style rules.
28
29## Output
30
31A formatting execution report containing:
32
33- Count of files checked and files reformatted
34- List of files that were modified with before/after formatting status
35- Configuration file(s) created or updated (`.prettierrc`, `.prettierignore`)
36- Any git hook integration changes applied
37- Confirmation of final formatting compliance
38
39## Error Handling
40
41| Error | Cause | Solution |
42|---|---|---|
43| `prettier: command not found` | Prettier not installed globally or locally | Run `npm install -g prettier` or `npx prettier --version` to use npx |
44| 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 |
45| Configuration conflicts | Multiple `.prettierrc` files or conflicting `editorconfig` | Locate all config files with `find . -name ".prettier*"` and consolidate to a single config |
46| Permission denied on write | File or directory lacks write permission | Run `chmod u+w <file>` to grant write access |
47| 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 |
48
49## Examples
50
51**Format a single file:**
52Trigger: "Format src/app.js"
53Process: Run `npx prettier --write src/app.js`. Report the file as reformatted or already conformant.
54
55**Project-wide formatting setup:**
56Trigger: "Set up code formatting for this project."
57Process: 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.
58
59**Check formatting without modifying files:**
60Trigger: "Check formatting across the project."
61Process: Run `npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}"`. Report non-conforming files with their paths. Suggest `npx prettier --write` to fix.
62
63## Resources
64
65- `${CLAUDE_SKILL_DIR}/references/implementation.md` -- detailed implementation guide with configuration examples
66- `${CLAUDE_SKILL_DIR}/references/errors.md` -- common error scenarios and solutions
67- [Prettier documentation](https://prettier.io/docs/en/) -- official configuration and CLI reference
68- [ESLint](https://eslint.org/) -- complementary linting and code quality tool
69- [Husky](https://typicode.github.io/husky/) -- git hooks for pre-commit formatting enforcement
gabrielmoreira