Prettier with TS
Prettier is an opinionated formatter. You stop arguing about commas, line breaks, and quote style — Prettier picks for you and reformats on save.
Install
SHELL
pnpm add -D prettier
Configure
.prettierrc.json
{
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100,
"tabWidth": 2,
"arrowParens": "always"
}
Ignore
.prettierignore
dist build coverage node_modules *.min.js
Scripts
package.json
{
"scripts": {
"format": "prettier --write .",
"format:check":"prettier --check ."
}
}
Run it on save
| Editor | How |
|---|---|
| VS Code | Install "Prettier" extension; set "Format on Save" to true. |
| WebStorm | Settings → Tools → Prettier → "On 'Reformat Code'" + "On save". |
| Neovim | conform.nvim or nvim-lspconfig with prettier as formatter. |
Prettier + ESLint — don't fight
Some ESLint rules duplicate Prettier (max-line-length, quotes, indent). Disable them — Prettier wins:
SHELL
pnpm add -D eslint-config-prettier
eslint.config.js
import prettier from 'eslint-config-prettier';
export default [
// ... your other configs ...
prettier, // last — turns off stylistic ESLint rules that overlap
];
Pre-commit hook
SHELL
pnpm add -D husky lint-staged npx husky init echo "npx lint-staged" > .husky/pre-commit
package.json
{
"lint-staged": {
"*.{ts,tsx,js,jsx}": ["prettier --write", "eslint --fix"]
}
}
Tip: The whole team should commit to "Prettier formats, ESLint lints, neither overlaps". Once everyone has format-on-save, you'll never argue about commas again.
Example
Example
// pnpm add -D prettier
// .prettierrc.json
// { "semi": true, "singleQuote": true, "trailingComma": "all" }
//
// Most teams: Prettier formats, ESLint lints, neither overlaps.
console.log('Prettier ends formatting debates');
Try it Yourself »
Exercise
Package that turns off ESLint rules overlapping Prettier.
Hyphenated; 22 chars.
Discussion
Loading…