Prettier & Biome Config Cheat Sheet
Quick reference guide for Prettier & Biome: Configuration rules, CLI commands, formatting options, and ignore files.
Editors & Tools
prettier
biome
linter
Prettier and Biome are automated code formatters that enforce consistent code style across JavaScript, TypeScript, JSON, HTML, and CSS files.
Prettier Configuration (`.prettierrc`)
json
{
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"useTabs": false,
"trailingComma": "all",
"printWidth": 100,
"arrowParens": "always",
"endOfLine": "lf"
}
Biome Configuration (`biome.json`)
Biome is a high-performance, Rust-based toolchain that formats and lints code in milliseconds.
json
{
"$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 100
},
"javascript": {
"formatter": {
"quoteStyle": "double",
"semicolons": "always"
}
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
}
}
CLI Commands Comparison
Table
| Tool | Action | Command Syntax |
|---|---|---|
| Prettier | Check formatting status | npx prettier --check . |
| Prettier | Format files in-place | npx prettier --write . |
| Biome | Format & lint files in-place | npx @biomejs/biome check --write . |
| Biome | Format only (skip linter) | npx @biomejs/biome format --write . |
Common Pitfalls & Tips
[!WARNING] Running both ESLint formatting rules and Prettier/Biome formatting rules simultaneously can cause infinite loop formatting conflicts! Use
eslint-config-prettierto disable conflicting ESLint rules.
[!TIP] Use
.prettierignoreorbiome.jsonfiles.ignoreto exclude build artifacts (dist/,.next/,node_modules/) from formatting tasks.