My Prettier Settings

I always use Prettier to reformat my code in Visual Studio Code. Prettier formats CSS, HTML, JavaScript and TypeScript. Formatting helps code to look consistent and thereby more easily to read. In this blog I try to format all code I publish.

Most of my projects contain the following .prettierrc file in their root:

{
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "printWidth": 120,
  "trailingComma": "none"
}

Let's dive into the why!?

To semicolon or not to semicolon

Did you know JavaScript and TypeScript do not need a semicolon? JavaScript will automatically add them for you when the code is processed. I've started to omit them to make the code easier to read on my blogs (less is more).

I'm originally a C# developer, so typing a ; comes naturally to me. I'll let Prettier remove them, to keep my code consistent.

Tabs or spaces?

I'm a big tab fan, but for my blogs spaces just look better: sorry.

ArrowParens!?

I'm not a native English speaker, so I had to google its meaning. It helps to remove the parens )( from the fat arrows:

let array = [1, 2, 3]

let before = array.map((x) => x * 2)

// "arrowParens": "avoid"
let after = array.map(x => x * 2)

Conclusion

I would like my blogs to contain code that's clear and consistant. Any settings that can help to reduce overhead will end up in my file (except for endOfLine 😉).

Changelog

  • Rephrased some of the text.
  • Added "trailingComma": "none" setting.
  • Initial article.
expand_less brightness_auto