Fix ESLint and Prettier Conflicts in Claude Code Projects

The Problem

Claude Code writes code that passes Prettier formatting but fails ESLint, or vice versa. You see conflicting errors like:

error  Replace `     ` with `    `  prettier/prettier
error  Expected indentation of 4 spaces but found 2  indent

This creates an endless loop of fixes.

Quick Fix

Install eslint-config-prettier to disable all ESLint rules that conflict with Prettier:

npm install --save-dev eslint-config-prettier

Add it as the last item in your ESLint extends array:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

What Is Happening

ESLint and Prettier both have opinions about code formatting. ESLint has rules like indent, semi, quotes, and max-len that control formatting. Prettier also controls these same aspects. When both tools run, they produce contradictory requirements.

The solution is to let Prettier handle all formatting and let ESLint handle only code quality rules (unused variables, type errors, potential bugs).

Step-by-Step Fix

Step 1: Install the compatibility package

npm install --save-dev eslint-config-prettier

Step 2: Update ESLint configuration

For flat config (eslint.config.js) - ESLint 9+:

import eslintConfigPrettier from 'eslint-config-prettier';
import tseslint from 'typescript-eslint';

export default [
  ...tseslint.configs.recommended,
  eslintConfigPrettier, // Must be last
  {
    rules: {
      'no-console': 'warn',
      '@typescript-eslint/no-unused-vars': 'error',
    },
  },
];

Step 3: Configure Prettier

Create or update .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "endOfLine": "lf"
}

Step 4: Set up format-on-save

Configure VS Code:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Step 5: Add a pre-commit hook

npm install --save-dev husky lint-staged
npx husky init

Configure lint-staged in package.json:

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": ["prettier --write", "eslint --fix --max-warnings 0"],
    "*.{json,md,css}": ["prettier --write"]
  }
}

Verify the Fix

# Format with Prettier
npx prettier --write "src/**/*.{ts,tsx}"

# Lint with ESLint (should report zero formatting issues)
npx eslint "src/**/*.{ts,tsx}"

Prevention

Keep formatting and linting concerns separate. Prettier owns formatting (whitespace, semicolons, quotes). ESLint owns code quality (unused variables, unreachable code, type safety). Never add formatting rules to ESLint when Prettier is in the project.