Prettier Best Practices Every Developer Should Know in 2024

Introduction

Prettier has become one of the most popular code formatters in the JavaScript ecosystem, and for good reason. It takes the debate out of code style by enforcing a single, consistent output across your entire project. If you have ever spent five minutes in a pull request arguing about whether to use tabs or spaces, you already know the value Prettier brings.

However, getting the most out of Prettier requires more than just running npx prettier --write on your codebase. Proper configuration, editor integration, and team workflows make the difference between a smooth experience and constant friction.

Basic Setup and Configuration

The fastest way to get started is with a one-liner:

npm install --save-dev prettier
npx prettier --write .

This formats every supported file in your project instantly. After that, create a configuration file at the root of your project. You can use .prettierrc, .prettierrc.json, .prettierrc.yml, or even add a prettier key directly in your package.json.

Here is a sensible starting configuration for most projects:

{
semi: true,
trailingComma: es5,
singleQuote: true,
printWidth: 80,
tabWidth: 2
}

This combination gives you semicolons, trailing commas where valid, single quotes, and a standard 80-character line width. These settings match the style of many popular open-source projects.

For projects that already use ESLint, consider eslint-config-prettier to disable rules that conflict with Prettier. This is critical because ESLint and Prettier have overlapping responsibilities, and without this config, you may see contradictory error messages.

Editor Integration

No developer wants to run Prettier manually after every edit. The real power comes from automatic formatting in your editor.

For VS Code users, install the official Prettier - Code formatter extension. Then add these settings to your .vscode/settings.json:

{
editor.formatOnSave: true,
editor.defaultFormatter: esbenp.prettier-vscode,
editor.formatOnPaste: true,
editor.formatOnType: false
}

Setting formatOnPaste to true is a hidden gem. It automatically formats code you paste from documentation or other files, which is a common source of formatting inconsistencies.

Neovim users can rely on the nvim-prettier plugin combined with null-ls for format-on-save behavior. JetBrains IDEs have built-in Prettier support in their latest versions. The key principle is the same across all editors: format on save, not on every keystroke. Formatting on every character typed creates a jarring experience and can cause cursor position jumps that break flow.

TypeScript and JSX Considerations

TypeScript projects benefit from a few additional settings beyond the basic configuration. The semi option should be set to true because TypeScript syntax looks cleaner with semicolons. The singleQuote option helps distinguish string literals from template literals visually.

JSX code often causes formatting headaches. By default, Prettier wraps JSX attributes onto separate lines, which can make components hard to read. Add bracketSameLine: true to your config if you prefer the closing bracket on the same line as the last attribute.

For React projects, the jsxBracketSameLine option was removed in Prettier 2.0. Instead, use the bracketSameLine setting and configure your printWidth appropriately. A printWidth of 80 works well for most codebases.

There will be times when Prettier formats something in a way you genuinely disagree with. In those cases, use the // prettier-ignore comment above the offending block. Use this sparingly, as it defeats the purpose of consistent formatting. A better approach is to submit a feature request or pull request to Prettier with a minimal reproduction case.

Git Hooks and Team Workflows

The most important workflow practice is integrating Prettier into your Git commit process. Without this step, formatting errors reach the shared repository and cause unnecessary noise in version control history.

Use Husky and lint-staged to run Prettier only on staged files:

Install the packages:
npm install --save-dev husky lint-staged

Add to package.json:
{
husky: {
hooks: {
pre-commit: lint-staged
}
},
lint-staged: {
"*.{js,ts,jsx,tsx,json,css,md}": [
prettier --write
]
}
}

Run npx husky install to activate the hooks. This configuration ensures that only files you are about to commit get formatted, which keeps the operation fast. Formatting an entire codebase on every commit would be prohibitively slow on large projects.

For continuous integration, add a CI step that runs npx prettier --check . and fails the build if any files are not properly formatted. This acts as a safety net for team members who may have missed their editor configuration or are working outside their primary development environment.

Best Practices Summary

Here is a quick comparison of the most common configuration choices:

Keep your configuration minimal. Prettier ships with well-reasoned defaults, and every additional option is a decision your team must maintain. Only override defaults when you have a concrete reason.

Never mix Prettier with another formatter. Using two formatters that compete for the same files creates an endless cycle of reformatting and defeats the entire purpose. If ESLint is doing formatting work, disable those rules immediately and let Prettier handle it.

Commit your .prettierrc file and editor settings to version control. Every team member should use identical configuration. When one developer has different settings than another, merge conflicts multiply and the consistency benefit disappears entirely.

Conclusion

Prettier removes a significant source of friction from software development. The tool works best when you treat it as a non-negotiable part of your workflow rather than an optional enhancement. Configure it once, integrate it into your editor and Git hooks, and stop discussing brace style in code reviews.

The greatest benefit of Prettier is not just consistent code. It is the mental bandwidth you reclaim when you stop worrying about formatting and focus on the actual logic of your application. Start with the basic configuration above, add your team-specific adjustments, and let the tool handle the rest.

Disclaimer: This article was generated with AI assistance. While we strive for accuracy, please verify specific features and pricing on the official website before making decisions.