Fraser Boag

My full Prettier (.prettierrc) config file

Back to all notes
Dev
8th August '21

If you're reading this you probably already know what Prettier it is, but for the avoidance of doubt: Prettier is an opinionated code formatter with official (or community) support for pretty much every code editor and programming language out there. It's extremely widely used in the development community, especially in teams, to keep code bases adherent to a single standard.

I've been using Prettier for years, originally just through VS Code config (when I was working more on solo projects), but now that I develop more frequently with a team, I always have a .prettierrc config file in my project's root directory. This allows different projects to have different configuration, and allows you to check this file into the project's git repo, ensuring all developers are committing code with the same style.

But enough waffle - here's the .prettierrc file I've landed on and use in every new project. It sets almost every configurable option - some of which are set to the same as Prettier's own defaults, but I like to include them just for clarity and so that I can see at a glance what options I have available to me for tweaking.

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false
}

Naturally this stuff is all really opinionated - you may want to use spaces, you may like trailing semi-colons, and so on - but hopefully this can serve as a nice foundation for anyone new to Prettier to then spin off based on your own preferences.

More notesAll notes

Get in touch  —  fraser.boag@gmail.com
Copyright © Fraser Boag 2013 - 2024. All rights reserved.