How to use it
- Set the line width and indentation.
- Choose quotes, semicolons and trailing commas — the options that change the look of code most.
- Adjust the rest if you need to, for example Windows line endings or Markdown wrapping.
- Copy the result into
.prettierrcin the project root and runnpx prettier . --write.
How it works
Each control is one Prettier option; its name is in brackets in the label. The output is JSON. With “only options that differ” ticked, every value equal to the Prettier 3 default is left out, so a future default change applies to settings you did not choose on purpose.
| Option | Default | Effect |
|---|---|---|
| printWidth | 80 | Line width Prettier wraps at |
| tabWidth / useTabs | 2 / false | Indentation |
| semi | true | Semicolons at statement ends |
| singleQuote | false | ’ instead of “ in JavaScript |
| trailingComma | all | Commas after the last item in lists |
| arrowParens | always | (x) => x or x => x |
Example
The form starts with line width 100 and single quotes, everything else at the defaults. The result is:
{
"printWidth": 100,
"singleQuote": true
}Untick the last option and the file lists all 13 options with their values.
Tips
- Commit
.prettierrcand add a.prettierignorefor generated files. - Turn on “format on save” in your editor so files are formatted as you work.
- With ESLint, add eslint-config-prettier so ESLint does not report formatting that Prettier handles.