Claude Code के साथ Prettier कॉन्फिगरेशन गाइड

जब Claude Code आपके project में असली बदलाव करने लगता है, तब formatting सिर्फ सुंदर दिखने वाली चीज नहीं रहती। एक छोटे task में component, test, JSON, Markdown और CI config साथ में बदल सकते हैं। अगर उसी diff में indentation, quotes, line endings और trailing commas भी बदल जाएं, तो reviewer को असली behavior change देखने से पहले formatting noise समझना पड़ता है।

Prettier एक code formatter है। सरल भाषा में, formatter code की बाहरी shape को समान बनाता है: spaces, line breaks, quotes और commas. यह business logic सही है या गलत, इसका फैसला नहीं करता। इसलिए Prettier को layout के लिए रखें, और tests, TypeScript तथा ESLint को behavior और quality checks के लिए रखें।

इस guide में हम Claude Code के साथ Prettier की practical setup बनाएंगे: local install, .prettierrc, .prettierignore, npm scripts, VS Code settings, CI check, staged formatting, और CLAUDE.md instructions ताकि Claude Code project के rules follow करे।

पूरा workflow

Prettier को सिर्फ आखिरी में चलने वाला cleanup command न मानें। इसे workflow की कई जगहों पर छोटा quality gate बनाएं।

flowchart LR
  A["Claude Code files edit करता है"] --> B[".prettierrc rules बताता है"]
  B --> C["VS Code save पर format करता है"]
  C --> D["npm run format:check"]
  D --> E["lint-staged staged files format करता है"]
  E --> F["CI PR check करता है"]

.prettierrc formatting policy रखता है। .prettierignore बताता है कि कौन से files नहीं छूने हैं। package.json scripts इंसान, Claude Code और CI को एक जैसे command names देते हैं। VS Code edit करते समय feedback देता है। lint-staged commit में शामिल files तक scope सीमित रखता है। CI final guard है।

Claude Code को हर बार “format भी कर देना” कहना कमजोर तरीका है। बेहतर है कि repository में rules और commands मौजूद हों, जिन्हें Claude Code पढ़ सके और चला सके।

Prettier local install करें

Prettier को global install पर depend न करें। Official Prettier Install guide local install और exact version pin करने की सलाह देती है, ताकि developer machine, Claude Code environment और CI में वही formatter चले।

npm install --save-dev --save-exact prettier

पहली बार setup करते समय पूरे project पर format चला सकते हैं।

npx prettier . --write

Existing project में इस first formatting pass को अलग commit या PR में रखें। Feature change और repo-wide formatting साथ मिलाने से review मुश्किल हो जाता है। पहले clean baseline बनाएं, फिर Claude Code से feature work कराएं।

.prettierrc बनाएं

Prettier config कई तरह से रखा जा सकता है: .prettierrc, prettier.config.mjs, या package.json में prettier key. Official Configuration File docs बताते हैं कि Prettier formatted file की location से ऊपर की directories में config खोजता है और global config support नहीं करता। इससे project दूसरी machine पर भी same behavior रखता है।

शुरुआत के लिए JSON .prettierrc सबसे readable है।

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "overrides": [
    {
      "files": "*.md",
      "options": {
        "proseWrap": "always"
      }
    },
    {
      "files": ["*.yml", "*.yaml"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

printWidth hard limit नहीं है, बल्कि Prettier को line break decide करने का hint देता है। endOfLine: "lf" Windows, macOS, Linux और CI के बीच line-ending churn कम करता है। trailingComma: "all" future diffs छोटे रखने में मदद करता है जब object या array में new item जुड़ता है।

Tailwind CSS project में बाद में prettier-plugin-tailwindcss उपयोगी हो सकता है। लेकिन पहले दिन plugin बढ़ाने से debugging मुश्किल होती है। पहले core Prettier को stable करें, फिर जरूरत के हिसाब से plugin जोड़ें।

.prettierignore लिखें

.prettierignore बताता है कि Prettier किन files को rewrite न करे। Build output, cache, generated code, minified files और package manager lockfiles आम तौर पर format करने की चीजें नहीं हैं।

node_modules
dist
build
coverage
.next
.nuxt
.astro
.vercel
.cache
*.min.js
package-lock.json
pnpm-lock.yaml
yarn.lock

Prettier same directory से run होने पर .gitignore भी follow करता है, लेकिन दोनों files का purpose अलग है। .gitignore Git tracking के लिए है, .prettierignore formatting scope के लिए। Generated files को स्पष्ट रूप से exclude करने से Claude Code को भी boundary समझ आती है।

Common failure यह है कि generated API client ignore नहीं किया जाता। Claude Code एक छोटा component बदलता है, और prettier . --write src/generated/ में हजारों lines बदल देता है। Generated code को source schema से regenerate करें, feature diff में छिपाएं नहीं।

npm scripts जोड़ें

npm docs में scripts package commands define करने की जगह है। Claude Code workflow में यह जरूरी है, क्योंकि agent, developer और CI एक ही command name इस्तेमाल कर सकते हैं।

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

Local fix के लिए format, automation के लिए format:check चलाएं।

npm run format
npm run format:check

format files modify करता है। format:check सिर्फ check करता है कि files already formatted हैं या नहीं। CI में format:check बेहतर है, क्योंकि वह code rewrite नहीं करता, सिर्फ failure signal देता है।

VS Code setup

Save पर formatting चालू होने से commit से पहले ही कई छोटी inconsistencies हट जाती हैं। Settings को personal editor config में नहीं, repository की .vscode/settings.json में रखें।

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

prettier.requireConfig को true रखने से Prettier extension सिर्फ उन्हीं projects में चलेगा जिनमें Prettier config है। कई repositories में काम करने वालों के लिए यह accidental formatting से बचाता है।

CI में format check

GitHub Actions के लिए यह minimal workflow काफी है।

name: format

on:
  pull_request:
  push:
    branches: [main]

jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run format:check

जब Claude Code PR update करता है, CI reviewer से पहले formatting drift पकड़ लेता है। Quality rules के लिए Claude Code ESLint guide देखें, लेकिन formatter और linter signals अलग रखना ज्यादा readable होता है।

सिर्फ staged files format करें

बड़े repository में हर commit पर पूरा project format करना slow हो सकता है। Husky और lint-staged से केवल git add किए गए files format होते हैं। Full workflow के लिए Husky + lint-staged guide देखें।

npm install --save-dev --save-exact husky lint-staged
npm pkg set scripts.prepare="husky"
npx husky init

package.json में यह जोड़ें।

{
  "scripts": {
    "prepare": "husky"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,css,md,mdx,json,yml,yaml}": "prettier --write"
  }
}

.husky/pre-commit छोटा रखें।

npx lint-staged

इसका फायदा scope control है। Claude Code ने तीन files बदले हैं, तो pre-commit भी उन्हीं तीन files को format करेगा, पूरे पुराने codebase को नहीं।

Claude Code को rules बताएं

Project instructions CLAUDE.md में रखें। Official Claude Code memory docs के अनुसार ./CLAUDE.md या ./.claude/CLAUDE.md shared project instructions के लिए इस्तेमाल हो सकते हैं।

## Formatting

- Read `.prettierrc` and `.prettierignore` before formatting files.
- Do not reformat unrelated files while implementing a feature.
- After changing JavaScript, TypeScript, CSS, Markdown, JSON, or YAML, run `npm run format:check`.
- Keep formatter-only changes separate from behavior changes.

Claude Code hooks से automation भी कर सकते हैं। Official hooks guide में Edit|Write के बाद Prettier चलाने का example है।

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '.tool_input.file_path' | xargs npx prettier --write"
          }
        ]
      }
    ]
  }
}

यह hook उपयोगी है, लेकिन jq और shell environment पर depend करता है। Windows-heavy team में पहले CLAUDE.md instructions और task के अंत में npm run format:check से शुरुआत करना बेहतर है।

तीन use cases

Use case	Prettier क्यों मदद करता है	Claude Code prompt
TypeScript product app	Component, test और type diff readable रहते हैं	Change के बाद npm run format:check चलाओ.
Astro या MDX site	Frontmatter, Markdown, code fences और JSON consistent रहते हैं	MDX code fences valid हैं या नहीं check करो.
Team PR review	Reviewer behavior पर focus कर सकता है	Formatter-only changes feature diff में mix मत करो.

MDX articles में फायदा सबसे ज्यादा दिखता है। एक file में prose, frontmatter, shell commands, JSON और JSX हो सकते हैं। Prettier के बिना Claude Code सही content लिख सकता है, पर visual style असमान हो जाती है। Formatter के बाद review accuracy और examples पर लौटता है।

Common pitfalls

पहला pitfall है Prettier install किए बिना npx prettier . --write चलाना। अगर dependency fixed नहीं है, तो future में अलग version run हो सकता है। हमेशा local install और --save-exact इस्तेमाल करें।

दूसरा pitfall है ESLint और Prettier को same responsibility देना। Prettier format करता है। ESLint bugs और maintainability rules check करता है। Conflict हो तो eslint-config-prettier देखें।

तीसरा pitfall है feature branch में पूरा repo format करना। अगर baseline messy है, पहले formatter-only change करें। बाद में Claude Code से unrelated formatting avoid करवाएं।

चौथा pitfall है .prettierignore बहुत broad लिखना। src/** ignore कर देंगे तो main code format ही नहीं होगा। Generated files, cache, large artifacts और external tool output तक ignore रखें।

Monetization CTA

अगर आप Claude Code कई projects में इस्तेमाल करते हैं, तो reusable asset सिर्फ .prettierrc नहीं है। असली value CLAUDE.md, verification commands, review checklist, PR templates और handoff rules में है। ClaudeCodeLab की products page पर ऐसे templates मिलते हैं, जिनसे यह setup team standard बन सकता है।

Summary

Prettier Claude Code workflow की छोटी लेकिन जरूरी foundation है। Local install करें, .prettierrc से rules fix करें, .prettierignore से generated files बाहर रखें, format और format:check scripts दें, VS Code, lint-staged और CI जोड़ें, और same expectations CLAUDE.md में लिखें।

Tested result: छोटे TypeScript/MDX project में यह setup लगाने के बाद first formatting pass ने clean baseline बनाया, npm run format:check stable रहा, और Claude Code द्वारा किए गए article edits review करना आसान हुआ। सबसे ज्यादा लाभ generated output ignore करने और format को format:check से अलग रखने से मिला।