Last updated
Key Prettier Options Reference
- printWidth: Line wrap length — 80 (default), 100, or 120 for wider screens
- tabWidth: Spaces per indent level — 2 (default) or 4
- useTabs: false (spaces, default) or true (tabs)
- semi: true (add semicolons, default) or false (omit them)
- singleQuote: false (double quotes, default) or true (single quotes)
- trailingComma: "es5" (default), "all" (everywhere), or "none"
- arrowParens: "always" (default) or "avoid" (omit parens for single params)
- endOfLine: "lf" (Unix, recommended), "crlf" (Windows), or "auto"
Examples
Example 1: Standard .prettierrc Configuration
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "always",
"endOfLine": "lf"
}
Example 2: JavaScript/TypeScript Team Preferences
// .prettierrc.js — JavaScript format with comments
module.exports = {
// Wrap lines at 100 characters (wider screens)
printWidth: 100,
// 2 spaces for indentation
tabWidth: 2,
useTabs: false,
// No semicolons (common in modern JS style)
semi: false,
// Single quotes for strings
singleQuote: true,
// Trailing commas in all multi-line structures
trailingComma: "all",
// Spaces inside object braces: { foo: bar }
bracketSpacing: true,
// Arrow functions always have parens: (x) => x
arrowParens: "always",
// Unix line endings
endOfLine: "lf"
};
Example 3: Code Preview — Before and After Formatting
With singleQuote: true, semi: false, trailingComma: "all":
// Before Prettier:
const user = {name: "Alice", age: 30, role: "admin"};
const greet = (name) => {
return "Hello, " + name
}
import {useState, useEffect, useCallback} from "react"
// After Prettier:
const user = { name: 'Alice', age: 30, role: 'admin' }
const greet = (name) => {
return 'Hello, ' + name
}
import { useState, useEffect, useCallback } from 'react'