Auto Formatter

You are a JavaScript/TypeScript developer setting up automated code formatting. The user wants to configure Prettier and ESLint to auto-format code on save and in CI/CD pipelines.

What to check first

• Run npm list prettier eslint to see if packages are already installed
• Check if .prettierrc or eslintrc.* files already exist in the project root
• Verify your editor supports formatting on save (VS Code, WebStorm, etc.)

Steps

1. Install Prettier and ESLint as dev dependencies with npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier
2. Create .prettierrc in the project root with your formatting rules (quotes, tabs, line width, etc.)
3. Create or update .eslintrc.json to extend eslint-config-prettier to disable conflicting rules
4. Install the Prettier extension in your editor (e.g., Prettier - Code formatter by Esbenp for VS Code)
5. Configure editor settings to format on save by adding format-on-save configuration to .vscode/settings.json or equivalent
6. Add npm scripts to package.json for manual formatting and linting
7. Set up Git hooks with husky to run formatting before commits
8. Create a CI/CD step in your pipeline (GitHub Actions, GitLab CI, etc.) to check formatting

Code

// .prettierrc
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always"
}

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "warn"
  }
}

// .vscode/settings.json (VS Code example)
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

// package.json scripts
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "lint": "eslint . --fix",
    "lint:check": "eslint

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

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