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 directory.
{
"semi": false,
"useTabs": false,
"tabWidth": 2,
"arrowParens": "avoid",
"endOfLine": "lf",
"printWidth": 120,
"trailingComma": "none"
}Every settings is intended to make my code easier to read in blog posts. 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 articles, though, fewer punctuation marks mean less visual noise.
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 an article.
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 read.
Line endings
"endOfLine": "lf" normalizes line endings to LF. This doesn't affect how code appears in a 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 a single line aren't broken up too early.
Trailing commas
"trailingComma": "none" removes trailing commas. I prefer less punctuation in my code (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 the gitignore syntax:
# Shared documentation
docs/shared/
Conclusion
These settings aren't a universal style guide. They are my simple way of reducing visual noise and making the code examples on my 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
- Refocused the article on readable blog code, clarified semicolon handling, and explained all configuration options.
- Added a section about ignoring files and directories.
- Added the
"trailingComma": "none"setting. - Initial article.