What is Prettier?
Prettier is an opinionated code formatter. It parses your code and rewrites it with consistent formatting rules. It eliminates style discussions in the team: no endless configuration, it just works.
Installation
npm install --save-dev prettier
Minimal configuration
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 100
}
ESLint integration
Use eslint-config-prettier to disable ESLint rules that conflict with Prettier. ESLint handles logic, Prettier handles formatting.
npm install --save-dev eslint-config-prettier
{
"extends": ["eslint:recommended", "prettier"]
}
Auto-formatting with Husky
npm install --save-dev lint-staged
{
"lint-staged": {
"*.{js,ts,tsx,json,css,md}": ["prettier --write", "eslint --fix"]
}
}
Prettier in CI
Add a CI step that checks formatting:
npx prettier --check .
Want consistent formatting in your team? At Vynta we configure code quality tools.