What does printWidth actually control?

printWidth is the line length Prettier tries to stay under, defaulting to 80. It is a target, not a hard limit — Prettier will exceed it when breaking a line would be worse, such as inside a long string. Many teams set it to 100 or 120.

Should I use semicolons or not?

It is a style preference. The semi default is true, which adds semicolons. Setting it to false removes them and relies on automatic semicolon insertion, which is safe for almost all code Prettier produces. Pick one and apply it project-wide.

What are the trailingComma options?

all adds trailing commas everywhere possible including function arguments, es5 adds them only where ES5 allows (arrays and objects), and none adds none. all is the modern default because it produces cleaner git diffs when you add a line.

What does arrowParens do?

always wraps single arrow-function parameters in parentheses, like (x) => x, while avoid omits them, like x => x. always is the default and keeps things consistent when you later add a second parameter or a type annotation.

Does Prettier replace ESLint?

No. Prettier handles formatting — whitespace, quotes, line breaks — while ESLint handles code-quality rules like unused variables and equality checks. They are complementary; run both, and use eslint-config-prettier so they do not fight over style.

.prettierrc Builder — Gera Tools

Build a .prettierrc that matches your team’s style

Prettier is an opinionated formatter, but it still exposes a handful of options that teams disagree on — line width, quotes, semicolons, trailing commas. A .prettierrc file pins those choices so every contributor’s editor formats identically. This builder lets you set each option and shows a live preview of how a sample snippet reformats, then emits clean JSON.

How it works

Prettier reformats code by parsing it into an abstract syntax tree and re-printing it, discarding your original whitespace entirely. Your .prettierrc only tweaks the printer’s decisions. The most impactful option is printWidth: Prettier tries to keep each line under that width and breaks long expressions onto multiple lines when they would exceed it. A typical config looks like:

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "arrowParens": "always"
}

trailingComma: "all" is preferred today because adding a new line to an array or argument list touches only that one line in git, instead of also editing the previous line to add a comma. The live preview in this tool runs the same decisions Prettier would make on a small sample so you can sanity-check before committing.

Tips and notes

Wider printWidth (100–120) reduces awkward line breaks on modern displays; 80 remains the conservative default.
Pair Prettier with eslint-config-prettier so ESLint stops reporting formatting issues Prettier already handles.
Add a .prettierignore for build output and vendored files so Prettier does not rewrite generated code.
Run prettier --write . once to reformat the whole repo, then commit that as a single “apply prettier” change so future diffs stay clean.

.prettierrc Builder

Email me this result

Build a .prettierrc that matches your team’s style

How it works

Tips and notes