Lesson 4 / 25

Prettier Configuration

Set up Prettier formatting options.

Prettier basics

Prettier is opinionated—it enforces a consistent style. Configure it with .prettierrc to set line width, quotes, semicolons, and tabs.

Sample .prettierrc

This configuration enforces 2-space indentation and trailing commas.

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

Output:

Prettier config ready: 2-space indent, 80-char lines, single quotes

Avoid config drift

Commit .prettierrc to version control so all team members use identical formatting rules.

Quick check

Quick check: What does 'printWidth' control in Prettier?

  • Maximum line length before wrapping.
  • Number of spaces per indent.
  • Quote style.
Answer

Maximum line length before wrapping. — 'printWidth' sets the character limit per line (default 80). Longer lines wrap automatically.