Stop Prettier v4 from Fighting AI Code Suggestions in 5 Minutes

Problem: Prettier and AI Keep Reformatting Each Other's Code

You accept an AI suggestion from Copilot or Cursor, save the file, and Prettier immediately reformats it differently. The AI suggests the same code again. Infinite loop.

You'll learn:

• Why Prettier v4 conflicts with AI formatting
• How to align Prettier rules with AI output
• When to disable auto-formatting

Time: 5 min | Level: Beginner

Why This Happens

AI models (GitHub Copilot, Cursor, Claude) are trained on diverse codebases with varying formatting styles. Prettier v4 introduced stricter rules around indentation and line breaks that don't match the AI's training data.

Common symptoms:

• Saved files get reformatted immediately after accepting AI suggestions
• Indentation switches between 2 and 4 spaces
• Line breaks added/removed after save
• Git diffs full of whitespace changes

Key conflict areas:

• Trailing commas: AIs often omit them, Prettier v4 adds them
• Arrow function parentheses: AIs use x => x, Prettier wants (x) => x
• Semicolons: Mixed preferences cause constant toggling
• Quote style: Single vs double quote inconsistency

Solution

Step 1: Check Your Prettier Version

npm list prettier
# or
cat package.json | grep prettier

Expected: Should show prettier@^4.0.0 or higher

If you see 3.x: Update first with npm install -D prettier@latest - v4 has better AI compatibility options

Step 2: Create/Update .prettierrc

This config aligns with most AI model outputs:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": false,
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "experimentalTernaries": false
}

Why this works:

• arrowParens: "avoid" matches AI preference for x => x
• trailingComma: "es5" is middle ground (commas in objects/arrays, not functions)
• printWidth: 100 gives AI more room before line breaks
• experimentalTernaries: false disables aggressive v4 ternary reformatting

Step 3: Configure Editor Auto-Format Timing

VS Code (settings.json):

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // Critical: Let AI finish before formatting
  "github.copilot.editor.enableAutoCompletions": true,
  "editor.inlineSuggest.enabled": true,
  "editor.quickSuggestions": {
    "other": "on",
    "comments": "off",
    "strings": "on"
  }
}

Cursor (similar approach):

{
  "editor.formatOnSave": true,
  "prettier.requireConfig": true,
  "cursor.aiDelay": 100
}

Why this works: Format-on-save only triggers after you accept the AI suggestion, not while typing.

Step 4: Add Pre-commit Hook (Optional)

Prevent formatting wars in PRs:

npm install -D husky lint-staged
npx husky init

Create .husky/pre-commit:

#!/bin/sh
npx lint-staged

Add to package.json:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

Expected: Prettier runs once before commit, not on every save.

Verification

Test it:

1. Accept an AI code suggestion
2. Save the file (Cmd/Ctrl + S)
3. Check if the code stays the same

You should see: No reformatting flash, code remains as AI suggested.

If it still reformats:

• Check: Run npx prettier --check . to see which rule is triggering
• Debug: Add --log-level debug to see exact rule conflicts
• Nuclear option: Set "editor.formatOnSave": false and format manually with Cmd+Shift+F

What You Learned

• Prettier v4 has stricter defaults that conflict with AI training data
• arrowParens: "avoid" and printWidth: 100 reduce conflicts
• Format-on-save timing matters - let AI finish first
• Pre-commit hooks centralize formatting

When NOT to use this:

• Team has existing Prettier config - match theirs first
• Working in highly opinionated framework (Next.js has defaults)
• Contributing to open source - use project's existing config

Limitation: AI models evolve. This config works for GPT-4/Claude/Copilot as of Feb 2026.

Alternative: Per-AI Configuration

If you use multiple AI tools with different formatting preferences:

GitHub Copilot

Add to .vscode/settings.json:

{
  "github.copilot.advanced": {
    "formatOnAccept": false
  }
}

Cursor

{
  "cursor.formatting.disableAutoFormat": true,
  "cursor.formatting.useEditorConfig": true
}

Codeium

{
  "codeium.enableConfig": true,
  "codeium.formatting.prettier": true
}

Troubleshooting Common Issues

"Prettier keeps adding semicolons"

AI omits them, Prettier adds them:

{
  "semi": false  // Match AI preference
}

Trade-off: Your team might prefer semis. Discuss first.

"Line breaks keep changing"

{
  "printWidth": 120,  // Increase from default 80
  "proseWrap": "never"  // Don't wrap markdown/comments
}

"Works locally, breaks in CI"

# Add to .prettierignore
node_modules/
dist/
build/
.next/
*.min.js

# Ensure consistent line endings
* text=auto eol=lf

Add to .gitattributes to prevent Windows/Mac conflicts.

The Nuclear Option: Disable Prettier Temporarily

If you're in a rapid prototyping phase with heavy AI usage:

{
  "editor.formatOnSave": false,
  "prettier.enable": false
}

Run Prettier manually before commits:

npx prettier --write .
git add -A
git commit -m "Format: Apply Prettier"

When to use: Hackathons, proof-of-concepts, AI-heavy pair programming sessions.

When NOT to use: Production code, team projects, open source.

Tested with Prettier 4.0.2, VS Code 1.95, GitHub Copilot, Cursor 0.42, Node.js 22.x