← Back to code-quality tools

Prettier

Code QualityFormatterJavaScriptTypeScriptDevOpsAuto-formattingZero Configuration

DevOps Tool

Prettier

Overview

Prettier is a multi-language code formatter that automatically applies consistent code style, eliminating style discussions in code reviews. As an "Opinionated Code Formatter", it simplifies code style unification in team development through its "zero configuration" philosophy. Supporting multiple languages including JavaScript, TypeScript, CSS, HTML, JSON, and Markdown, it integrates naturally into development workflows through editor and CI integrations.

Details

Prettier was developed by Facebook in 2017 with the concept of "ending all debates about code formatting." Unlike traditional code formatters, it adopts an "opinionated" approach that intentionally minimizes configuration options and forcibly applies consistent code style.

Key Features

  • Zero Configuration Philosophy: Immediately usable without configuration, eliminating debates
  • Multi-language Support: JavaScript, TypeScript, CSS, HTML, JSON, Markdown, YAML, etc.
  • Editor Integration: Official plugins for VS Code, IntelliJ IDEA, Vim, Emacs, etc.
  • Advanced Syntax Parsing: High-quality formatting through AST-based analysis
  • Complete Idempotency: Same results with multiple executions, stable formatting
  • Git Hooks Integration: Automatic formatting through pre-commit hooks
  • CI/CD Integration: Automated checking and fixing in GitHub Actions, GitLab CI, etc.
  • Plugin Ecosystem: Dedicated plugins for Tailwind CSS, Solidity, etc.

As of 2025, it's standardly adopted in major projects like React, Vue.js, Angular, and Next.js, promoting a "convention over configuration" development culture.

Pros and Cons

Pros

  • Zero configuration enables immediate code style unification across teams
  • Completely eliminates formatting discussions in code reviews
  • Real-time auto-formatting through editor integration improves development efficiency
  • Multi-language support unifies formatting for multiple technologies with a single tool
  • Git Hooks integration provides automatic quality assurance on commit
  • Advanced AST analysis delivers optimal formatting that understands code meaning
  • Rich editor/IDE integration provides seamless development experience
  • Plugin ecosystem supports special languages and frameworks

Cons

  • Limited customization capabilities (intentional constraint but lacks flexibility)
  • Risk of massive changes when applying to large legacy codebases
  • Potential divergence from existing personal/team coding habits
  • Format quality limitations in some languages (special syntax, etc.)
  • Possible configuration complexity due to plugin dependencies
  • Performance: execution time with large numbers of files
  • No complete control: difficult to disable formatting for specific locations
  • Format specification changes between versions causing diffs

Reference Links

Code Examples

Installation and Basic Setup

# Install Prettier (project local recommended)
npm install --save-dev prettier

# Global installation (for personal development)
npm install -g prettier

# Use immediately without configuration files
npx prettier --write src/

# Create basic configuration file (optional)
echo '{"semi": false, "singleQuote": true}' > .prettierrc.json

# Add scripts to package.json
npm pkg set scripts.format="prettier --write ."
npm pkg set scripts.format:check="prettier --check ."

Basic Configuration Files

# .prettierrc.json (JSON format)
{
  "printWidth": 80,           # Maximum line length
  "tabWidth": 2,              # Indentation width
  "useTabs": false,           # Use tabs (false = spaces)
  "semi": true,               # Semicolons
  "singleQuote": false,       # Quotes (false=double, true=single)
  "quoteProps": "as-needed",  # Object property quotes
  "trailingComma": "es5",     # Trailing commas (es5|all|none)
  "bracketSpacing": true,     # Spaces inside brackets
  "bracketSameLine": false,   # JSX closing bracket on same line
  "arrowParens": "always",    # Arrow function parentheses (always|avoid)
  "endOfLine": "lf"           # Line ending (lf|crlf|cr|auto)
}

# .prettierrc.yml (YAML format)
printWidth: 80
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
quoteProps: "as-needed"
trailingComma: "es5"
bracketSpacing: true
bracketSameLine: false
arrowParens: "always"
endOfLine: "lf"

# File-specific settings
overrides:
  - files: "*.test.js"
    options:
      semi: true
  - files: 
      - "*.html"
      - "legacy/**/*.js"
    options:
      tabWidth: 4

// prettier.config.js (JavaScript format)
/**
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
const config = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: "as-needed",
  trailingComma: "all",
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: "avoid",
  endOfLine: "lf",
  
  // Plugin configuration
  plugins: [
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss",
  ],
  
  // Language-specific settings
  overrides: [
    {
      files: "*.json",
      options: {
        printWidth: 120,
      },
    },
    {
      files: "*.md",
      options: {
        proseWrap: "always",
        printWidth: 80,
      },
    },
  ],
};

export default config;

Command Line Execution Patterns

# Basic format execution
npx prettier --write src/

# Format specific file
npx prettier --write src/index.js

# Multiple pattern specification
npx prettier --write "src/**/*.{js,ts,tsx,json,css,md}"

# Check formatting (no changes)
npx prettier --check src/

# Specify configuration file
npx prettier --write src/ --config ./custom-prettier.config.js

# Specify specific options
npx prettier --write src/ --single-quote --trailing-comma all

# Ignore unknown files
npx prettier --write "**/*" --ignore-unknown

# Show only file differences
npx prettier --list-different src/

# Use cache (speed up)
npx prettier --write src/ --cache

# Search configuration files
npx prettier --find-config-path src/index.js

# Detailed log output
npx prettier --write src/ --loglevel debug

# Check target files
npx prettier --write src/ --list-different

Editor Integration Setup

VS Code Configuration

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  
  // Language-specific settings
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.wordWrap": "on"
  },
  
  // Prettier-specific settings
  "prettier.requireConfig": true,     // Require configuration file
  "prettier.useEditorConfig": false,  // EditorConfig integration
  "prettier.ignorePath": ".prettierignore"
}

IntelliJ IDEA Configuration

// After installing Prettier plugin
// Settings → Languages & Frameworks → JavaScript → Prettier

// Run on save for files: *.{js,ts,jsx,tsx,css,scss,json,md}
// Node interpreter: Project Node
// Prettier package: node_modules/prettier

Git Hooks Integration

# Install husky
npm install --save-dev husky lint-staged

# Initialize husky
npx husky init

# Create pre-commit hook
echo 'npx lint-staged' > .husky/pre-commit

# Configure lint-staged (package.json)
npm pkg set lint-staged.*.{js,ts,tsx,css,md}="prettier --write"

# Or configure in separate file
# .lintstagedrc.json
{
  "*.{js,ts,tsx,json,css,md}": [
    "prettier --write"
  ],
  "*.{js,ts,tsx}": [
    "eslint --fix"
  ]
}

CI/CD Integration Example

# .github/workflows/format-check.yml
name: Format Check

on: [push, pull_request]

jobs:
  format-check:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v4
    
    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '20'
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Check Prettier formatting
      run: npx prettier --check .
    
    - name: Comment PR if formatting issues found
      if: failure() && github.event_name == 'pull_request'
      uses: actions/github-script@v7
      with:
        script: |
          github.rest.issues.createComment({
            issue_number: context.issue.number,
            owner: context.repo.owner,
            repo: context.repo.repo,
            body: '❌ Code formatting issues detected. Please run `npm run format` to fix.'
          });

# Auto-fix version (using autofix.ci)
name: Auto-format
on:
  pull_request:
  push:
    
jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: |
          npm ci
          npx prettier . --write
      - uses: autofix-ci/action@v1
        with:
          commit-message: "Apply Prettier formatting"

Plugin Usage Examples

// prettier.config.js - Plugin integration example
import organizeImports from "prettier-plugin-organize-imports";
import tailwindcss from "prettier-plugin-tailwindcss";
import sortImports from "@trivago/prettier-plugin-sort-imports";

export default {
  plugins: [
    organizeImports,    // Auto-organize imports
    sortImports,        // Sort imports
    tailwindcss,        // Sort Tailwind CSS classes
  ],
  
  // @trivago/prettier-plugin-sort-imports configuration
  importOrder: [
    "^react$",
    "^next",
    "^@?\\w",
    "^[./]"
  ],
  importOrderSeparation: true,
  importOrderSortSpecifiers: true,
  
  // Basic configuration
  singleQuote: true,
  trailingComma: "all",
  printWidth: 100,
};

Advanced Configuration and Customization

// .prettierrc.js - Enterprise-level configuration example
module.exports = {
  // Basic format settings
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: "as-needed",
  trailingComma: "all",
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: "avoid",
  endOfLine: "lf",
  
  // HTML/JSX settings
  htmlWhitespaceSensitivity: "css",
  singleAttributePerLine: false,
  
  // Plugins
  plugins: [
    require.resolve("prettier-plugin-organize-imports"),
    require.resolve("prettier-plugin-packagejson"),
    require.resolve("@prettier/plugin-xml"),
  ],
  
  // File type settings
  overrides: [
    // JavaScript/TypeScript
    {
      files: ["*.js", "*.jsx", "*.ts", "*.tsx"],
      options: {
        printWidth: 100,
        singleQuote: true,
        trailingComma: "all",
      },
    },
    
    // JSON
    {
      files: ["*.json", "*.jsonc"],
      options: {
        printWidth: 120,
        tabWidth: 2,
      },
    },
    
    // Markdown
    {
      files: ["*.md", "*.mdx"],
      options: {
        printWidth: 80,
        proseWrap: "always",
        tabWidth: 2,
      },
    },
    
    // CSS/SCSS
    {
      files: ["*.css", "*.scss", "*.less"],
      options: {
        printWidth: 120,
        singleQuote: false,
      },
    },
    
    // YAML
    {
      files: ["*.yml", "*.yaml"],
      options: {
        tabWidth: 2,
        singleQuote: false,
      },
    },
    
    // Package files
    {
      files: ["package.json"],
      options: {
        printWidth: 120,
        tabWidth: 2,
      },
    },
    
    // Configuration files
    {
      files: [
        ".prettierrc",
        ".prettierrc.json",
        ".eslintrc.json",
        "tsconfig.json",
      ],
      options: {
        printWidth: 120,
        tabWidth: 2,
      },
    },
  ],
};

Ignore File Configuration

# .prettierignore
# Build output
dist/
build/
out/
.next/
.nuxt/

# Dependencies
node_modules/
vendor/

# Log files
*.log
logs/

# Temporary files
.tmp/
.cache/

# Auto-generated files
*.min.js
*.min.css
bundle.js
*.generated.*

# Documentation
CHANGELOG.md
README.md

# Specific directories
legacy/
third-party/

# Specific file formats
*.svg
*.png
*.jpg
*.ico

# Package files (when auto-generated)
package-lock.json
yarn.lock
pnpm-lock.yaml

# Environment configuration
.env*

ESLint Integration Configuration

// eslint.config.js - Prettier + ESLint integration
import prettier from "eslint-plugin-prettier";
import prettierConfig from "eslint-config-prettier";

export default [
  // Other ESLint configurations...
  
  // Prettier integration
  {
    plugins: {
      prettier,
    },
    rules: {
      "prettier/prettier": "error",
    },
  },
  
  // Disable rules that conflict with Prettier
  prettierConfig,
  
  // Custom Prettier rules
  {
    rules: {
      "prettier/prettier": [
        "error",
        {
          singleQuote: true,
          trailingComma: "all",
          printWidth: 100,
        },
      ],
    },
  },
];

Project-Specific Configuration Examples

// React project configuration
export default {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: "as-needed",
  jsxSingleQuote: true,
  trailingComma: "all",
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: "avoid",
  endOfLine: "lf",
  
  plugins: ["prettier-plugin-organize-imports"],
};

// Node.js project configuration
export default {
  printWidth: 120,
  tabWidth: 4,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: "es5",
  bracketSpacing: true,
  arrowParens: "always",
  endOfLine: "lf",
};

// Vue.js project configuration
export default {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  trailingComma: "all",
  bracketSpacing: true,
  arrowParens: "avoid",
  endOfLine: "lf",
  
  plugins: ["prettier-plugin-organize-imports"],
  
  overrides: [
    {
      files: "*.vue",
      options: {
        parser: "vue",
      },
    },
  ],
};