A team of four produces four indentation styles, two quoting conventions and a lasting disagreement about semicolons. Every review turns into a discussion about form rather than substance.
Prettier settles the debate by taking the subject away from everyone: nobody decides on formatting any more, the tool does.
Definition
Prettier is a code formatter: it parses a file, forgets its original layout entirely and rewrites it according to its own rules. The behavior of the program is never modified, only its appearance. Its settings live in a dedicated file or in a key of the package.json.
// prettier.config.js
export default {
semi: true,
singleQuote: true,
printWidth: 100,
trailingComma: 'all',
};
// Before
const cart = {items:2, total:98,
paid : false}
// After
const cart = { items: 2, total: 98, paid: false };Line width is the most structural setting: it decides whether a call fits on one line or spreads across several. The configurable options are deliberately few, to limit the surface available for debate.
What it decides for you
| Setting | Default value |
|---|---|
printWidth | 80 characters |
tabWidth | 2 spaces |
semi | Semicolons added |
singleQuote | Double quotes |
Around twenty settings exist in total, and most of the rendering deliberately stays out of reach. Where a brace sits or how a long expression breaks cannot be set: you accept it, and it saves a considerable amount of time.
The most useful effect shows up in the project history. Stable formatting produces version differences containing only the real modifications, instead of two hundred lines an editor silently reindented.
With ESLint, not against it
The two tools do different jobs: ESLint judges the quality of the code, Prettier its appearance. The confusion comes from ESLint's old formatting rules, which used to clash with the formatter.
The recommended setup turns those style rules off in ESLint and leaves Prettier in sole charge of layout. Each keeps its own ground, and saving a file no longer triggers two contradictory corrections.
Frequently asked questions
How do I apply it to an entire existing project?
The prettier --write . command, launched through npx or a script, reformats every file at once. Make it a change of its own, with no behavior modification alongside: review stays possible, and the history keeps a clean boundary between reformatting and real work.
Can a specific passage escape it?
Yes, with a // prettier-ignore comment placed just before. That helps for a hand-aligned data table, or a matrix whose layout carries meaning. A .prettierignore file excludes whole folders, such as the output of a build.
When should it run?
On save, through your editor, which makes the tool invisible day to day. On a shared project, an extra check before every push guarantees nothing slips through, even from a badly configured machine.