TechLog
Back to Blog

How to Write .prettierrc — Unify Your Code Style in One Step

(edited: March 20, 2026)
tip

What is Prettier?

A code formatter. It automatically fixes indentation, quotes, semicolons, and more when you save. No more team arguments about single vs double quotes.

Installation

Bash
# npm
npm install -D prettier

# pnpm
pnpm add -D prettier

# yarn
yarn add -D prettier

Basic .prettierrc Structure

Create a .prettierrc file at the project root. JSON is the simplest format.

JSON
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all"
}

Key Options

OptionDefaultDescriptionExample
semitrueSemicolons at end of statementstrue → const a = 1;
singleQuotefalseUse single quotestrue → 'hello'
tabWidth2Spaces per indent level4 → 4-space indent
printWidth80Max line length120 → allow longer lines
trailingComma"all"Trailing commas"all" → [1, 2, 3,]
useTabsfalseUse tabs instead of spacestrue → tabs
bracketSpacingtrueSpaces inside object bracestrue → { a: 1 }
arrowParens"always"Arrow function parens"avoid" → x => x
endOfLine"lf"Line ending character"auto" → match OS

Want Import Sorting Too?

Prettier doesn't touch import order by default. Add a plugin for that.

Bash
pnpm add -D @trivago/prettier-plugin-sort-imports
JSON
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all",
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "^react",
    "^@tauri-apps/(.*)$",
    "^@/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}
  • importOrder — Define group order using regex patterns
  • importOrderSeparation — Add blank lines between groups
  • importOrderSortSpecifiers — Sort { a, b, c } alphabetically within imports

VS Code Integration

  1. Install extension: esbenp.prettier-vscode
  2. Add to settings.json:
JSON
{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Warning: source.organizeImports and the Prettier import sorting plugin will conflict if both are enabled. If you use the plugin, set "source.organizeImports": "never".

Format via CLI

Bash
# Format everything
npx prettier --write .

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

# Check only (no changes)
npx prettier --check .

.prettierignore

Exclude files and folders from formatting with .prettierignore.

TEXT
dist
node_modules
src-tauri/target
*.min.js

Supported File Types

JavaScript, TypeScript, JSX, TSX, CSS, SCSS, HTML, JSON, Markdown, YAML, and more. Rust is not supported — use cargo fmt for Rust.

Summary

  1. pnpm add -D prettier
  2. Create .prettierrc
  3. Enable formatOnSave in VS Code
  4. Run npx prettier --write . to format existing code
  5. Done. No more code style debates.

Comments