My Prettier Settings - KeesTalksTech

I use Prettier to format code in Visual Studio Code before publishing it on this blog. Prettier formats CSS, HTML, JavaScript, and TypeScript. Consistent formatting reduces visual noise and makes code examples easier to read.

Most of my projects contain the following .prettierrc file in their root. These settings are the choices I use to keep published code readable:

{
  "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

With "semi": false, Prettier omits semicolons where JavaScript's automatic semicolon insertion makes that safe. It still adds a leading semicolon when one is needed to prevent two lines from being interpreted as a single statement.

I'm originally a C# developer, so typing a ; comes naturally to me. For blog examples, though, fewer punctuation marks mean less visual noise. I'll let Prettier remove them (less is more).

Tabs or spaces?

I'm a big tab fan, but spaces look better in my blog posts. Sorry. "useTabs": false tells Prettier to use spaces for indentation.

With "tabWidth": 2, each indentation level uses two spaces. This keeps nested examples compact, so more code fits comfortably within the width of a blog post.

Arrow function parentheses

The name arrowParens wasn't immediately obvious to me. It controls the parentheses around a single simple parameter of an arrow function. Setting it to "avoid" removes those parentheses when possible:

let array = [1, 2, 3]

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

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

It is a small difference, but removing optional parentheses makes simple callbacks a little easier to scan.

Line endings

"endOfLine": "lf" normalizes line endings to LF. This doesn't affect how code appears in a blog post. It simply keeps files consistent across operating systems and avoids line-ending-only diffs.

Print width

"printWidth": 120 tells Prettier to try wrapping lines after 120 characters. This is wider than Prettier's default of 80, so expressions that are easier to understand on one line aren't broken up too early.

Trailing commas

"trailingComma": "none" removes trailing commas. I prefer less punctuation in blog examples, although trailing commas can produce smaller diffs when lines are added.

Ignore directories

Not every file in a project needs to be formatted for publication. We can ignore files and directories by adding a .prettierignore file to our project. It uses Gitignore syntax:

# Shared documentation
docs/shared/

Conclusion

These settings aren't a universal style guide. They are my way of reducing visual noise and making the code examples on this blog easier to read. If a setting helps readers focus on what the code does rather than how it is formatted, it probably belongs in this file.

Changelog

2026-07-19 Refocused the article on readable blog code, clarified semicolon handling, and explained all configuration options.
2025-02-09 Added a section about ignoring files and directories.
2022-10-25 Added the "trailingComma": "none" setting.
2022-10-24 Initial article.