What Is Prettier? The Complete Guide for AI-Assisted Developers

Why AI Coders Need to Know This

AI coding tools generate code in different styles depending on context, examples in the codebase, and the specific model being used. Within a single session you can end up with:

• Some files using single quotes, others double quotes
• Some functions with semicolons, others without
• Inconsistent indentation (2 spaces vs 4 vs tabs)
• Some objects with trailing commas, others without
• Long lines that extend past the edge of the screen

Prettier fixes all of this with a single command. More importantly, if you configure it to format on save in VS Code, it fixes everything automatically the moment you save a file — you never see the inconsistency.

For a solo vibe coder, Prettier reduces cognitive noise. For a team, it eliminates entire categories of code review comments about style. The official Prettier tagline is accurate: "An opinionated code formatter that removes style debates."

Setup in 5 Minutes

# Install
npm install --save-dev prettier

# Create a config file
echo '{}' > .prettierrc

# Create an ignore file (like .gitignore)
echo ".next/
node_modules/
dist/
build/" > .prettierignore

# Format everything
npx prettier --write .

That is the minimum viable Prettier setup. The empty {} config uses all defaults. Run it once and every file in your project gets reformatted consistently.

Configuration

Prettier is deliberately limited in what you can configure — this is intentional. The most common .prettierrc for JavaScript/TypeScript projects:

{
  "semi": true,           // Require semicolons (default: true)
  "singleQuote": true,    // Use single quotes (default: false)
  "tabWidth": 2,          // 2-space indentation (default: 2)
  "trailingComma": "es5", // Trailing commas where valid in ES5
  "printWidth": 100,      // Line wrap at 100 chars (default: 80)
  "arrowParens": "always" // Always wrap arrow fn params in parens
}

Most teams use something close to this. The key decisions are single vs. double quotes and whether to use semicolons. Both are fine — pick one and be consistent. Prettier enforces whichever you choose.

Format on save in VS Code

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

With this config, every file saves formatted automatically. You paste AI-generated code, save, and it instantly matches your project's style.

Package.json scripts

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

format:check is for CI — it exits with an error code if any file does not match Prettier's format, blocking unformatted code from being merged.

Prettier and ESLint Together

ESLint has some formatting rules that conflict with Prettier. The fix is eslint-config-prettier, which turns off all ESLint rules that Prettier handles:

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

// eslint.config.js — add prettier at the end to disable conflicting rules
import prettier from 'eslint-config-prettier';

export default [
  // ... your other ESLint config ...
  prettier  // Must be last — disables conflicting rules
];

After this: ESLint handles code quality, Prettier handles formatting. No conflicts.

What Prettier Formats

const user={name:"Chuck",
  email:"chuck@example.com",
  role:'admin'
}
const greet=(user)=>{
return `Hello ${user.name}`}

const user = {
  name: 'Chuck',
  email: 'chuck@example.com',
  role: 'admin',
};
const greet = (user) => {
  return `Hello ${user.name}`;
};

Same code, fully reformatted. Consistent spacing, consistent quotes, trailing commas, proper indentation. This transformation happens on every save.

What to Learn Next

• What Is ESLint? — Prettier's partner for code quality rules.
• VS Code for AI Coders — Full editor setup including Prettier integration.
• What Is Git? — Add Prettier to pre-commit hooks with lint-staged.

FAQ