Prettier

Prettier is an opinionated code formatter that enforces a consistent style by parsing and re-printing code with its own rules.

Installation

npm install -D prettier

Basic Setup

Add Prettier to your Denji hooks to automatically format icons after adding them:

{
  "output": "./src/icons.tsx",
  "framework": "react",
  "typescript": true,
  "hooks": {
    "postAdd": [
      "npx prettier --write ./src/icons.tsx"
    ]
  }
}

Configuration Examples

Format with Log Level

Control output verbosity:

{
  "hooks": {
    "postAdd": [
      "npx prettier --write --log-level warn ./src/icons.tsx"
    ]
  }
}

Multiple Hooks

Format after various operations:

{
  "hooks": {
    "postAdd": [
      "npx prettier --write ./src/icons.tsx"
    ],
    "postRemove": [
      "npx prettier --write ./src/icons.tsx"
    ],
    "postClear": [
      "npx prettier --write ./src/icons.tsx"
    ]
  }
}

Check Before, Format After

Validate formatting before adding, then fix:

{
  "hooks": {
    "preAdd": [
      "npx prettier --check ./src/icons.tsx"
    ],
    "postAdd": [
      "npx prettier --write ./src/icons.tsx"
    ]
  }
}

Common Commands

npx prettier --write ./src/icons.tsx

npx prettier --check ./src/icons.tsx

npx prettier --write --config .prettierrc.json ./src/icons.tsx

npx prettier --write --parser typescript ./src/icons.tsx

Prettier Options

Common Flags

Examples with Options

{
  "hooks": {
    "postAdd": [
      "npx prettier --write --log-level error ./src/icons.tsx"
    ]
  }
}

Combining with ESLint

Prettier handles formatting, while ESLint handles code quality:

{
  "hooks": {
    "postAdd": [
      "npx eslint --fix ./src/icons.tsx",
      "npx prettier --write ./src/icons.tsx"
    ]
  }
}

npm install -D eslint-config-prettier

import prettier from "eslint-config-prettier";

export default [
  // ... other configs
  prettier,
];

Package Manager Alternatives

{
  "hooks": {
    "postAdd": ["npx prettier --write ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["pnpm exec prettier --write ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["yarn exec prettier --write ./src/icons.tsx"]
  }
}

{
  "hooks": {
    "postAdd": ["bunx prettier --write ./src/icons.tsx"]
  }
}

Using Package Scripts

Define a script in package.json:

{
  "scripts": {
    "format": "prettier --write .",
    "format:icons": "prettier --write ./src/icons.tsx",
    "format:check": "prettier --check ."
  }
}

Reference it in your Denji config:

{
  "hooks": {
    "postAdd": ["npm run format:icons"]
  }
}

Performance Tips

1. Target specific file - Format only the icons file:

   "postAdd": ["npx prettier --write ./src/icons.tsx"]

2. Use log level - Reduce output noise:

   "postAdd": ["npx prettier --write --log-level error ./src/icons.tsx"]

3. Cache in CI - Use caching in CI pipelines:

   npx prettier --check --cache ./src/icons.tsx

Troubleshooting

Prettier Not Found

Install Prettier as a dev dependency:

npm install -D prettier

Formatting Doesn't Match Editor

Ensure your editor is using the same Prettier version and configuration:

• VS Code: Install the Prettier extension
• Check that "editor.formatOnSave": true is enabled
• Verify .prettierrc is in the project root

Conflicting with ESLint

Install eslint-config-prettier to disable conflicting rules:

npm install -D eslint-config-prettier

Different Formatting in CI

Ensure the same Prettier version is installed in CI and locally. Pin the version in package.json:

{
  "devDependencies": {
    "prettier": "3.2.5"
  }
}

Related

• ESLint Integration - Code quality rules
• Biome Integration - All-in-one alternative
• Configuration - Denji configuration options