Prettier Standard Configuration

Overview

A Prettier configuration that establishes consistent code formatting across your project. Includes sensible defaults for JavaScript/TypeScript, optional Tailwind CSS class sorting, and import organization. Works alongside ESLint without conflicts.

Configuration

// .prettierrc
{
  // ── Core Formatting ──
  "semi": true,                        // Add semicolons at end of statements
  "singleQuote": false,                // Use double quotes for strings
  "tabWidth": 2,                       // 2 spaces per indentation level
  "useTabs": false,                    // Use spaces instead of tabs
  "trailingComma": "all",             // Trailing commas everywhere (ES5+)
  "printWidth": 80,                    // Line wrap at 80 characters
  "endOfLine": "lf",                   // Unix line endings (LF)
  "bracketSpacing": true,              // Spaces inside object braces: { foo }
  "bracketSameLine": false,            // Put > of multi-line JSX on new line
  "arrowParens": "always",            // Always wrap arrow function params: (x) =>

  // ── JSX / HTML ──
  "jsxSingleQuote": false,            // Double quotes in JSX attributes
  "singleAttributePerLine": false,     // Allow multiple attributes per line
  "htmlWhitespaceSensitivity": "css",  // Follow CSS display for whitespace

  // ── Special Formats ──
  "proseWrap": "preserve",            // Don't wrap markdown prose
  "embeddedLanguageFormatting": "auto", // Format code inside template literals
  "quoteProps": "as-needed",          // Only quote object keys when required

  // ── Plugins ──
  "plugins": [
    "prettier-plugin-tailwindcss"      // Sort Tailwind CSS classes
  ],

  // ── Tailwind Plugin Options ──
  "tailwindFunctions": ["clsx", "cn", "cva"]  // Also sort in utility functions
}

// .prettierignore
node_modules
dist
build
.next
out
coverage
*.min.js
*.min.css
package-lock.json
pnpm-lock.yaml
yarn.lock

// package.json (scripts section)
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Key Options Explained

• semi: true — Adds semicolons. While JavaScript has ASI (Automatic Semicolon Insertion), explicit semicolons prevent edge cases like lines starting with [ or (.
• trailingComma: "all" — Adds trailing commas in arrays, objects, function parameters, and type parameters. Produces cleaner git diffs when adding new items.
• printWidth: 80 — The target line width. Prettier will wrap lines that exceed this. It is a soft limit, not a hard break at exactly 80 characters.
• endOfLine: "lf" — Forces Unix line endings. Prevents mixed line endings in repositories with Windows and Mac contributors.
• arrowParens: "always" — Wraps single arrow function parameters in parentheses: (x) => x. Consistent style and easier to add types or parameters later.
• prettier-plugin-tailwindcss — Automatically sorts Tailwind CSS classes according to the recommended order. Eliminates debates about class ordering.
• tailwindFunctions — Tells the Tailwind plugin to also sort classes inside utility functions like clsx(), cn(), and cva().

Common Modifications

• Single quotes: Set "singleQuote": true if your team prefers 'single' over "double" quotes.
• No semicolons: Set "semi": false for a semicolon-free style (common in Vue.js projects).
• 120 char width: Set "printWidth": 120 for wider monitors and codebases that benefit from longer lines.
• Tab indentation: Set "useTabs": true for tab-based indentation (accessibility benefit for visually impaired developers).
• Import sorting: Add @trivago/prettier-plugin-sort-imports or prettier-plugin-organize-imports for automatic import grouping and ordering.
• Per-file overrides: Add "overrides": [{ "files": "*.md", "options": { "proseWrap": "always" } }] for format-specific settings.
• Editor integration: Add "editor.defaultFormatter": "esbenp.prettier-vscode" and "editor.formatOnSave": true to .vscode/settings.json.