Prettier Config Template

Description

A Prettier configuration file that enforces consistent formatting across your codebase. Includes sensible defaults, plugin support, and per-file overrides for different file types.

Features

• Single quotes and trailing commas for cleaner diffs
• 100-char print width — a reasonable balance for modern screens
• Per-file overrides for JSON, Markdown, and YAML
• Plugin support for Tailwind CSS and import sorting

The Config

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "bracketSameLine": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "embeddedLanguageFormatting": "auto",
  "singleAttributePerLine": false,
  "plugins": [
    "prettier-plugin-tailwindcss",
    "@ianvs/prettier-plugin-sort-imports"
  ],
  "importOrder": [
    "^node:",
    "",
    "^@?\\w",
    "",
    "^@/",
    "",
    "^\\.\\.?/"
  ],
  "overrides": [
    {
      "files": "*.md",
      "options": {
        "printWidth": 80,
        "proseWrap": "always"
      }
    },
    {
      "files": ["*.json", "*.jsonc"],
      "options": {
        "printWidth": 80,
        "trailingComma": "none"
      }
    },
    {
      "files": "*.yml",
      "options": {
        "singleQuote": false,
        "printWidth": 120
      }
    }
  ]
}

Ignore File

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

Installation

npm install -D prettier prettier-plugin-tailwindcss @ianvs/prettier-plugin-sort-imports

Usage

# Format all files
npx prettier --write .

# Check formatting (CI)
npx prettier --check .

# Add to package.json
# "scripts": {
#   "format": "prettier --write .",
#   "format:check": "prettier --check ."
# }