← All Posts

How to Do Prettier Configuration on Claude Code

You can configure Prettier on Claude Code by prompting it to install the package, generate a .prettierrc config file, and wire up a format-on-save hook, all without leaving your terminal. This approach suits developers who want consistent formatting enforced from day one without manually hunting through Prettier docs. The main trade-off: Claude Code will make opinionated defaults (single quotes, no semicolons, etc.) unless you specify otherwise upfront.

  • Prettier has over 20 configurable options covering print width, tab width, trailing commas, and bracket spacing.
  • Claude Code can scaffold a full Prettier setup, including .prettierignore and editor integration config, in a single session.
  • Using Claude Code hooks, you can auto-run Prettier after every file edit so formatting is never an afterthought.

What is Prettier and why configure it through Claude Code?

Prettier is an opinionated code formatter that enforces a consistent style across JavaScript, TypeScript, CSS, HTML, JSON, and more. Instead of debating tabs vs. spaces in code review, you let Prettier win every argument automatically.

Claude Code makes the setup faster for two reasons. First, it knows the Prettier option surface well and can generate a .prettierrc tailored to your stack. Second, it can wire the formatter into your existing toolchain (ESLint integration, Git hooks via Husky, or Claude Code's own hook system) so formatting runs automatically rather than requiring a manual step.

How to install and configure Prettier with Claude Code

Step 1: Install Prettier

Open Claude Code in your project root and run a prompt like:

Install Prettier as a dev dependency and create a .prettierrc with these preferences: 2-space indentation, single quotes, trailing commas in ES5 contexts, print width of 100.

Claude Code will run the install command and write the config file for you. Underneath, it executes:

npm install --save-dev prettier
# or
yarn add --dev prettier

Step 2: Define your .prettierrc

Claude Code will generate a file based on your prompt. A typical .prettierrc looks like this:

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always"
}

If you have existing team conventions, describe them in plain English in your prompt. Claude Code will map them to the correct Prettier option names automatically.

Step 3: Add a .prettierignore file

Prompt Claude Code to also create a .prettierignore:

Add a .prettierignore that excludes node_modules, dist, build, coverage, and any generated files.

This prevents Prettier from reformatting compiled output or third-party code, which would create noisy diffs.

Step 4: Add a format script to package.json

Ask Claude Code to wire up a script:

Add a "format" script to package.json that runs Prettier across all source files, and a "format:check" script for CI.

It will add entries like:

"scripts": {
  "format": "prettier --write \"src/**/*.{js,ts,jsx,tsx,css,json}\"",
  "format:check": "prettier --check \"src/**/*.{js,ts,jsx,tsx,css,json}\""
}

Step 5: Integrate with ESLint (optional)

If your project uses ESLint, formatting rules can conflict. Prompt Claude Code:

Install eslint-config-prettier and add it to my ESLint config so ESLint and Prettier don't fight each other.

Claude Code will install eslint-config-prettier and append it as the last entry in your extends array, which disables all ESLint rules that Prettier already handles.

How to auto-format files using Claude Code hooks

One of the most useful patterns is setting up a Claude Code hook that runs Prettier automatically after Claude edits a file. This means every file Claude Code touches gets formatted without you ever running a separate command.

Prompt Claude Code:

Set up a PostToolUse hook that runs Prettier on any JS, TS, or CSS file after you edit it.

Claude Code will add the hook configuration to your project's .claude/settings.json. The hook triggers on the Write and Edit tool events and pipes the affected file path through prettier --write.

This creates a tight loop: Claude edits, Prettier formats, you review clean diffs. No context switching, no manual format runs.

How to set up Prettier for specific file types

Prettier supports per-file-type overrides via the overrides key. Tell Claude Code what you need:

Add Prettier overrides: use 4-space indentation for Python-like YAML files, and disable semicolons for .vue files.

The resulting config will include an overrides block that applies targeted rules without affecting the rest of your project.

Prettier with TypeScript projects

For TypeScript, prompt Claude Code to also install the Prettier TypeScript parser if needed and verify your tsconfig.json paths are excluded from .prettierignore. Claude Code will cross-check both files and flag any gaps.

Prettier with Tailwind CSS

If you're using Tailwind CSS, ask Claude Code to install prettier-plugin-tailwindcss. This plugin automatically sorts Tailwind class names in a consistent order, which dramatically reduces class-ordering conflicts in Git diffs.

How to add Prettier to a CI/CD pipeline with Claude Code

Formatting checks should block merges when code isn't formatted. Claude Code can scaffold this for you:

Add a GitHub Actions step that runs "npm run format:check" and fails the build if any files are not formatted.

Combined with the CI/CD pipeline setup Claude Code can generate, this creates a complete quality gate: format check, lint, and tests all run before code reaches main.

Pre-commit hooks with Husky and lint-staged

For teams that want formatting enforced before commits rather than in CI, prompt:

Set up Husky and lint-staged so Prettier runs on staged files before every commit.

Claude Code will install both packages, initialize Husky, and configure lint-staged in package.json to run prettier --write only on files staged for the current commit. This is faster than formatting the whole project and avoids noise in unrelated files.

Staying in flow while Claude Code runs

Prettier configuration is one of those tasks that can spiral: you install it, discover a conflict with ESLint, then realize your CI pipeline needs updating, then notice your editor isn't using the project config. A single Claude Code session handles all of it, but the session consumes tokens and time.

If you're deep into a setup task and hit a Claude usage limit mid-session, you lose momentum at exactly the wrong moment. Usagebar sits in your macOS menu bar and shows your remaining Claude Code usage in real time, with alerts at 50%, 75%, and 90% capacity. You'll know to wrap up before the 5-hour lockout hits, not after.

Usagebar also shows exactly when your usage window resets, so you can plan tasks around your remaining capacity rather than guessing. It's available on a pay-what-you-want model, with a free option for students.

Get Usagebar for instant download, and stay in flow during long Claude Code sessions.

Key takeaways

  1. Describe your formatting preferences in plain English: Claude Code maps them to the correct .prettierrc options.
  2. Always add a .prettierignore to avoid reformatting node_modules, dist, and generated files.
  3. Use eslint-config-prettier to prevent rule conflicts if ESLint is already in your stack.
  4. Set up a PostToolUse hook to auto-format every file Claude Code edits.
  5. Add prettier --check to your CI pipeline to enforce formatting on every pull request.
  6. For Tailwind CSS projects, add prettier-plugin-tailwindcss to keep class order consistent automatically.
  7. Monitor your Claude Code usage with Usagebar so a long setup session doesn't end in an unexpected lockout.

Sources

Track Your Claude Code Usage

Never hit your usage limits unexpectedly. Usagebar lives in your menu bar and shows your 5-hour and weekly limits at a glance.

Get Usagebar