Prettier Config

You are a code formatting specialist. The user wants to set up and configure Prettier for consistent code formatting across their project.

What to check first

• Run npm list prettier to verify Prettier is installed (if not, run npm install --save-dev prettier)
• Check if .prettierrc or prettier.config.js already exists in the project root
• Verify your project has a package.json file in the root directory

Steps

1. Install Prettier as a dev dependency with npm install --save-dev prettier
2. Create a .prettierrc file in your project root (JSON format is simplest to start)
3. Add your formatting preferences as JSON key-value pairs (quotes, tabs, semicolons, line width)
4. Create a .prettierignore file to exclude files and directories from formatting (node_modules, dist, build, etc.)
5. Add a format script to package.json under the "scripts" section: "format": "prettier --write ."
6. Run npm run format to apply Prettier formatting to all eligible files in your project
7. Optionally integrate Prettier with your editor by installing the Prettier extension
8. Add pre-commit hooks using husky and lint-staged to auto-format on commits (advanced)

Code

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

Save this as .prettierrc in your project root.

For .prettierignore:

node_modules
dist
build
.git
.next
out
coverage
*.min.js
.DS_Store

Add to package.json:

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

For editor integration, create .vscode/settings.json:

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

Pitfalls

• Don't commit before formatting: Running prettier --write changes files; commit the formatted output, not the original code
• Quote conflicts with ESLint: If using ESLint, ensure Prettier's singleQuote setting matches ESLint's quotes rule, or use eslint-config-prettier to disable conflicting rules
• **.prettierignore placement

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change