Konfigurasi Prettier dengan Claude Code

Saat Claude Code mulai mengubah project sungguhan, formatting bukan lagi urusan tampilan kecil. Satu task bisa menyentuh component, test, JSON, Markdown, dan konfigurasi CI sekaligus. Kalau indentasi, quote style, line ending, dan trailing comma ikut berubah dalam satu diff, reviewer harus membaca noise dulu sebelum memahami perubahan perilaku.

Prettier adalah code formatter. Artinya, Prettier merapikan bentuk visual file yang didukung tanpa menilai apakah business logic benar. Pembagian ini penting: Prettier mengurus layout, sedangkan test, TypeScript, dan ESLint mengurus behavior dan quality rules.

Artikel ini membangun setup Prettier yang praktis untuk Claude Code: local install, .prettierrc, .prettierignore, npm scripts, VS Code settings, CI check, staged formatting, dan instruksi project agar Claude Code mengikuti aturan yang sama. Contohnya cocok untuk project npm dengan JavaScript atau TypeScript.

Alur kerja

Jangan perlakukan Prettier sebagai command bersih-bersih yang baru diingat di akhir. Lebih stabil jika Prettier menjadi quality gate kecil di beberapa titik.

flowchart LR
  A["Claude Code mengedit file"] --> B[".prettierrc mendefinisikan aturan"]
  B --> C["VS Code format saat save"]
  C --> D["npm run format:check"]
  D --> E["lint-staged format staged files"]
  E --> F["CI memeriksa PR"]

Setiap lapisan punya fungsi. .prettierrc menyimpan kebijakan format. .prettierignore melindungi file generated atau di luar scope. package.json scripts memberi command yang sama untuk developer, Claude Code, dan CI. VS Code memberi feedback cepat saat coding. lint-staged membatasi perubahan ke file yang akan di-commit. CI menahan format yang terlewat sebelum review.

Claude Code bisa mengikuti instruksi natural language, tetapi aturan format sebaiknya tidak hanya hidup di chat. Simpan di repository, lengkap dengan command yang bisa diverifikasi.

Install Prettier secara lokal

Install Prettier sebagai development dependency lokal. Panduan resmi Prettier Install menyarankan local install dengan exact version agar semua environment memakai perilaku formatter yang sama.

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

Saat pertama kali memperkenalkan Prettier, jalankan satu pass penuh.

npx prettier . --write

Untuk project yang sudah berjalan, simpan pass pertama ini dalam commit atau pull request tersendiri. Jangan campur repo-wide formatting dengan feature change. Diff mekanis yang besar akan menyembunyikan perubahan penting dan mempersulit investigasi bug.

Buat .prettierrc

Prettier mendukung beberapa format konfigurasi: .prettierrc, prettier.config.mjs, atau key prettier di package.json. Dokumentasi resmi Configuration File menjelaskan bahwa Prettier mencari config dari lokasi file yang diformat ke directory atas, dan tidak memakai global config. Hasilnya lebih reproducible saat project pindah mesin.

Untuk awal, .prettierrc JSON paling mudah dibaca.

{
  "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 bukan batas karakter mutlak. Ini adalah panduan untuk Prettier saat memutuskan line break. endOfLine: "lf" mengurangi churn antara Windows, macOS, Linux, dan CI. trailingComma: "all" sering membuat diff lebih kecil saat menambah item ke object atau array.

Jika project memakai Tailwind CSS, prettier-plugin-tailwindcss bisa dipertimbangkan nanti. Jangan mulai dengan terlalu banyak plugin. Stabilkan core Prettier dulu, baru tambah plugin yang memang menjawab kebutuhan project.

Buat .prettierignore

.prettierignore memberi tahu Prettier file mana yang tidak boleh ditulis ulang. Pakai untuk build output, cache, generated code, file minified, dan lockfile yang dikelola package manager.

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

Prettier juga mengikuti .gitignore saat dijalankan dari directory yang sama, tetapi tujuan keduanya berbeda. .gitignore menentukan apa yang tidak dilacak Git. .prettierignore menentukan apa yang tidak boleh diformat. Boundary yang eksplisit membantu Claude Code memahami scope perubahan.

Kesalahan umum adalah lupa mengecualikan generated API client. Claude Code mengubah satu component kecil, lalu prettier . --write memformat ribuan baris di src/generated/. Untuk file generated, ubah source schema lalu generate ulang. Jangan sembunyikan perubahan besar itu di feature diff.

Tambahkan npm scripts

Dokumentasi npm menjelaskan scripts sebagai tempat package mendefinisikan command yang bisa dijalankan. Dalam workflow Claude Code, scripts penting karena agent, developer, dan CI bisa memakai nama command yang sama.

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

Gunakan command write di lokal dan command check di automasi.

npm run format
npm run format:check

format mengubah file. format:check hanya memastikan file sudah rapi dan gagal jika belum. Untuk CI, format:check lebih jelas karena tidak menulis ulang kode yang belum direview.

Konfigurasi VS Code

Format on save mengurangi noise sebelum commit. Simpan setting di .vscode/settings.json agar convention dibawa repository, bukan tergantung preferensi editor masing-masing orang.

{
  "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 adalah pengaman yang berguna. Extension hanya bekerja di project yang memang punya config Prettier. Developer yang sering pindah repository bisa menghindari formatting tidak sengaja di project lain.

Check di CI

Workflow GitHub Actions minimal sudah cukup untuk memulai.

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

Saat Claude Code memperbarui pull request, check ini menangkap formatting drift sebelum reviewer membaca diff. Untuk quality rules lain, kombinasikan dengan panduan ESLint Claude Code, tetapi pisahkan sinyal formatter dan linter agar error mudah dipahami.

Format hanya staged files

Di repository besar, memformat semua file setiap commit bisa lambat dan menyentuh hutang lama. Husky dan lint-staged memungkinkan hanya file yang sudah git add diproses. Workflow lengkap ada di panduan Husky + lint-staged; berikut minimal untuk Prettier.

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

Tambahkan konfigurasi ini ke package.json.

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

Jaga .husky/pre-commit tetap sederhana.

npx lint-staged

Manfaat utamanya adalah scope control. Jika Claude Code mengedit tiga file, pre-commit hanya memformat tiga file itu, bukan seluruh repository.

Beri aturan ke Claude Code

Instruksi project sebaiknya ditulis di CLAUDE.md. Dokumentasi resmi Claude Code memory menjelaskan ./CLAUDE.md dan ./.claude/CLAUDE.md sebagai file instruksi bersama untuk command, coding standards, dan workflow.

## 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.

Anda juga bisa memakai Claude Code hooks. Panduan resmi hooks menampilkan contoh menjalankan Prettier setelah tool Edit atau Write.

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

Hook ini praktis, tetapi bergantung pada jq dan shell behavior. Untuk tim yang banyak memakai Windows, mulai dengan instruksi eksplisit di CLAUDE.md dan wajibkan npm run format:check di akhir task. Setelah environment seragam, barulah share hook.

Tiga use case

Use case	Manfaat Prettier	Prompt untuk Claude Code
Aplikasi TypeScript	Component, test, dan type helper tetap readable dalam satu diff	Jalankan npm run format:check setelah perubahan.
Site Astro atau MDX	Frontmatter, Markdown, code fence, dan JSON konsisten	Pastikan MDX code fences masih valid.
Pull request tim	Reviewer fokus ke behavior, bukan indentasi	Jangan campur formatter-only diff dengan feature.

Use case MDX paling terasa. Satu artikel bisa berisi prose, frontmatter, shell command, JSON, dan JSX. Tanpa Prettier, Claude Code bisa membuat konten benar tetapi style visualnya tidak konsisten. Dengan formatter, review kembali fokus ke akurasi dan contoh yang bisa dijalankan.

Kesalahan umum

Kesalahan pertama adalah memakai npx prettier . --write tanpa menginstal Prettier. Jika dependency tidak fixed, npx bisa mengambil versi berbeda di masa depan. Install lokal dengan --save-exact.

Kesalahan kedua adalah membuat ESLint dan Prettier mengurus aturan yang sama. Prettier memformat. ESLint menangkap potensi bug dan maintainability issues. Jika ada konflik style, pertimbangkan eslint-config-prettier.

Kesalahan ketiga adalah memformat seluruh repository di branch feature. Jika baseline masih berantakan, buat formatter-only change terlebih dahulu. Setelah itu minta Claude Code menghindari formatting yang tidak terkait.

Kesalahan keempat adalah .prettierignore terlalu luas. Entry seperti src/** membuat kode utama tidak ikut standar. Ignore generated files, cache, file besar, dan output tool eksternal, bukan kode yang direview setiap hari.

CTA monetisasi

Jika Anda memakai Claude Code di banyak project, asset yang bisa dipakai ulang bukan hanya .prettierrc. Nilainya ada pada sistem: CLAUDE.md, verification commands, review checklist, PR template, dan handoff rules. ClaudeCodeLab mengumpulkan materi ini di products page agar setup ini bisa menjadi standar tim yang repeatable.

Ringkasan

Prettier adalah fondasi kecil tetapi penting untuk workflow Claude Code. Install secara lokal, definisikan .prettierrc, lindungi generated files dengan .prettierignore, sediakan format dan format:check, gunakan VS Code untuk feedback cepat, check di CI, dan tambahkan lint-staged untuk membatasi scope. Setelah itu, tulis ekspektasi yang sama di CLAUDE.md.

Hasil pengujian: setelah setup ini dipakai di project kecil TypeScript/MDX, pass pertama membuat baseline bersih, npm run format:check stabil, dan edit artikel dari Claude Code jauh lebih mudah direview. Dampak terbesar datang dari ignore generated output dan pemisahan format dari format:check.