prettier-pretty-check

A drop-in replacement for Prettier that provides beautiful, clickable error output when running --check.

Why?

Prettier's default --check output is... not great:

Checking formatting...
[warn] src/index.js
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

This tool gives you clickable links and clear descriptions:

❌ Prettier check failed

src/index.js:12:5: error: Add 2 spaces of indentation (prettier/indent)
src/index.js:45:80: error: Line exceeds print width (prettier/line-length)
src/index.js:67:1: error: Line needs to be added (prettier/insert)
src/components/App.tsx:23:15: error: Fix spacing around brackets (prettier/spacing)

✖ 4 formatting errors

Run prettier --write to fix automatically

• Clickable links - file:line:col format works in VS Code, terminals, and most editors
• Standard format - Compatible with GitHub Actions problem matchers
• Rule names - (prettier/indent), (prettier/spacing), etc. for easy filtering

Features

• Clickable file links: file:line:col format - click to jump directly to the issue
• Color-coded categories: Instantly see what type of issue it is
  • Indent - Indentation problems (shows exact space count)
  • Spacing - Bracket/brace spacing
  • Line too long - Exceeds print width
  • Semicolon - Missing or extra semicolons
  • Quotes - Wrong quote style
  • Comma - Trailing comma issues
  • Insert / Delete - Lines to add or remove
  • Format - General formatting
• Actionable descriptions: Clear message explaining what to fix
• Fix command: Shows how to auto-fix at the end

Installation

npm install prettier-pretty-check --save-dev
# or
bun add prettier-pretty-check --dev

Usage

Use it exactly like Prettier - it's a transparent wrapper that passes all arguments through:

# Check files (enhanced output)
npx prettier-pretty-check --check "src/**/*.{js,ts}"

# Format files (passes through to Prettier unchanged)
npx prettier-pretty-check --write "src/**/*.{js,ts}"

In package.json

{
  "scripts": {
    "format": "prettier-pretty-check --write \"src/**/*.{js,ts}\"",
    "format:check": "prettier-pretty-check --check \"src/**/*.{js,ts}\""
  }
}

With plugins

All Prettier options and plugins work as expected:

npx prettier-pretty-check --check "**/*.java" --plugin=prettier-plugin-java

GitHub Actions

The output format is compatible with GitHub Actions problem matchers. Add this to your workflow:

- name: Add Prettier matcher
  run: echo "::add-matcher::node_modules/prettier-pretty-check/problem-matcher.json"

- name: Check formatting
  run: npx prettier-pretty-check --check "src/**/*.{js,ts}"

This will show formatting errors as annotations directly on your PR.

How it works

1. When --check is not present: passes everything through to Prettier unchanged
2. When --check is present:
   • Runs Prettier with --list-different to find unformatted files
   • For each file, compares original vs formatted output
   • Parses the diff to extract meaningful diagnostics
   • Outputs in standard file:line:col: error: message (rule) format

Requirements

• Node.js 18+
• Prettier must be installed in your project

License

MIT