Guides

Prettier - Opinionated Code Formatter

Prettier - Opinionated Code Formatter
Prettier - Opinionated Code Formatter

What is Prettier?

Prettier is an opinionated code formatter that formats your code on save. The need to discuss style in code review is typically a thing at large companies, but I have carried the same prettier config with me for years. I think that having a style guide for your code is important because it improves legibility of your code and ensures that your code is consistent. In the root of your folder add the following config and your code will magically format on save, you must name the file prettierrc.json.

I am sure that someone is going to have some opinions about this config, feel free to let me know how much you love it or hate it on my contact page!

Config

1{
2  "plugins": ["prettier-plugin-tailwindcss"],
3  "arrowParens": "always",
4  "bracketSpacing": true,
5  "jsxSingleQuote": true,
6  "printWidth": 120,
7  "semi": true,
8  "singleQuote": true,
9  "trailingComma": "none",
10  "tabWidth": 2,
11  "useTabs": false,
12  "endOfLine": "auto",
13  "proseWrap": "always",
14  "overrides": [
15    {
16      "files": ["*.md", "*.mdx"],
17      "options": {
18        "printWidth": 80
19      }
20    }
21  ]
22}

Explanation

The one line that can be removed depending on the project that you're in is plugins. The plugins just ensures that certain prettier plugins are recognized; in this case it is the prettier-plugin-tailwindcss which ensures that tailwind classes are sorted in the order that they are defined in the tailwind config. This is a nice touch, but not necessary for all projects. If you don't use tailwind, you can remove this line.

  • Arrow Parens: This option controls the printing of parentheses around a sole arrow function parameter. It can be set to always or avoid. The default value is always.
  • Bracket Spacing: This option controls the printing of spaces between brackets in object literals. It can be set to true or false. The default value is true.
  • JSX Single Quote: This option controls the printing of single quotes in JSX attributes. It can be set to true or false. The default value is false. I prefer single quotes to double quotes always.
  • Print Width: This option controls the maximum line length that Prettier will wrap code to. The default value is 80.
  • Semi: This option controls the printing of semicolons at the end of statements. It can be set to true or false. The default value is true.
  • Single Quote: This option controls the printing of single quotes in strings. It can be set to true or false. The default value is false.
  • Trailing Comma: This option controls the printing of trailing commas in object literals, array literals, and function parameters. It can be set to none, es5, or all. The default value is es5.
  • Tab Width: This option controls the number of spaces per indentation level. The default value is 2.
  • Use Tabs: This option controls the printing of tabs instead of spaces. It can be set to true or false. The default value is false.
  • End Of Line: This option controls the printing of end of line characters. It can be set to auto, lf, crlf, or cr. The default value is auto.
  • Prose Wrap: This option controls the printing of markdown text. It can be set to always, never, or preserve. The default value is preserve.
  • Overrides: This option allows you to specify different options for different files. In this case, it is used to set the printWidth option to 80 for markdown files. This is useful because markdown files are typically more readable with a smaller print width.
Back To Top