Prettier Configuration File

Prettier is an opinionated code formatter with a deliberate design philosophy: instead of providing hundreds of style options that teams debate endlessly, it provides a small set of options and formats your code in the only way that's consistent with those options. The result is that code style debates end permanently — the formatter decides, everyone accepts the output, and team energy goes to solving actual problems. This example shows a configuration that covers all of Prettier's most commonly configured options. printWidth: 100 is the line length threshold at which Prettier attempts to wrap. Note that this is a soft limit — Prettier won't break a string or a template literal just to meet it, but it uses this as a guide for wrapping function arguments, object properties, and array items. 80 is the classic terminal width default; 100 and 120 are common choices for modern wide monitors. The quote-related options deserve explanation as a group: singleQuote: true makes Prettier use single quotes for JavaScript strings (except when the string contains single quotes, where double quotes are used automatically). jsxSingleQuote: false keeps JSX attribute strings using double quotes, matching the HTML convention that most JSX developers prefer. quoteProps: "as-needed" only adds quotes around object property keys when they're required (e.g., {'my-key': value} but not {myKey: value}). trailingComma: "all" adds trailing commas after the last item in all multi-line structures — function parameters, arrays, objects. This is controversial (it violates JSON syntax, which is why the overrides section sets trailingComma: "none" for JSON files) but has a strong practical benefit: when you add a new property to an object, the git diff shows only the new line rather than the new line plus a comma change on the previous line. This makes diffs cleaner and easier to review. arrowParens: "always" adds parentheses around single arrow function parameters: (x) => x rather than x => x. The consistent presence of parentheses makes it easier to add TypeScript type annotations ((x: number) => x) without changing the function signature structure. The overrides section demonstrates per-file-type configuration: Markdown files use proseWrap: "always" (wrap prose at printWidth) and a narrower 80-character width to keep documentation readable in all contexts. JSON files disable trailing commas since JSON doesn't allow them. Integration with ESLint: install eslint-config-prettier to disable all ESLint rules that would conflict with Prettier's formatting decisions. This prevents the situation where ESLint and Prettier fight each other — Prettier formats the code one way and ESLint immediately flags it as wrong. Tips: add a format check to CI (prettier --check .) that fails if any files aren't formatted. This prevents "just needs formatting" review comments and ensures the codebase stays consistently formatted even when developers forget to run Prettier locally.

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "overrides": [
    {
      "files": "*.md",
      "options": { "proseWrap": "always", "printWidth": 80 }
    },
    {
      "files": "*.json",
      "options": { "trailingComma": "none" }
    }
  ]
}