Prettier Setup for Code Formatting

Setting Up Prettier for Code Formatting

Prettier is a formatter, not a linter. It doesn't search for errors — it rewrites code in a unified style. Key feature: it cannot be configured on how to format — only on line width, quotes, and a few other parameters. Style debates stop automatically.

Installation

npm install --save-dev prettier

For integration with ESLint (so they don't conflict):

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

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

"endOfLine": "lf" — critical when working with Windows and macOS developers. Otherwise, git diff shows changes in every line of the file.

.prettierignore

node_modules/
dist/
build/
.next/
coverage/
*.min.js
*.min.css
package-lock.json
yarn.lock
pnpm-lock.yaml

scripts in package.json

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,json,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css,json,md}\""
  }
}

--check for CI — exits with a non-zero code if there are unformatted files.

ESLint Integration

Add eslint-config-prettier last in eslint.config.mjs — it disables all ESLint rules that conflict with Prettier:

import prettier from 'eslint-config-prettier';

export default [
  // ... other configs
  prettier,  // must be last
];

No need to install eslint-plugin-prettier — it runs Prettier as an ESLint rule and slows down linting. Better to run them separately.

Prettier for Different File Types

Prettier supports different parsers. Use overrides to set different options for different files:

{
  "semi": true,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "printWidth": 80
      }
    },
    {
      "files": "*.md",
      "options": {
        "proseWrap": "always",
        "printWidth": 80
      }
    },
    {
      "files": "*.{yaml,yml}",
      "options": {
        "tabWidth": 2,
        "singleQuote": false
      }
    }
  ]
}

Prettier API for Custom Scripts

import prettier from 'prettier';
import fs from 'node:fs/promises';

async function formatFile(filepath: string) {
  const content = await fs.readFile(filepath, 'utf8');
  const config = await prettier.resolveConfig(filepath);

  const formatted = await prettier.format(content, {
    ...config,
    filepath, // to determine parser by extension
  });

  if (formatted !== content) {
    await fs.writeFile(filepath, formatted);
    console.log(`Formatted: ${filepath}`);
  }
}

VS Code

.vscode/settings.json:

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

.vscode/extensions.json — recommendations for the team:

{
  "recommendations": ["esbenp.prettier-vscode"]
}

Timeline

Adding Prettier to an existing project: 30–60 minutes for setup. Additionally 1–4 hours for initial formatting of the entire codebase and resolving conflicts with ESLint rules.