You’ve used Prettier a hundred times, but this feature takes it from a simple formatter to a powerful workflow enhancer.

---

Introduction

If you’re a frontend developer, there’s almost no chance you haven’t used Prettier.

It’s the “set it and forget it” code formatter that magically makes your code look clean the moment you hit save.

But here’s the funny part: most developers only use half of what Prettier can do.

They install it.
They enable “Format on Save.”
And that’s it.

But buried inside Prettier is a hidden feature that quietly changes how you collaborate, enforce standards, and manage code at scale, especially across teams.

In fact, it’s one of the reasons top engineering teams like Vercel, Shopify, and Meta use Prettier with complete confidence.

Let’s reveal what it is and how you can use it to instantly level up your development workflow.

---

1. Prettier’s Hidden Power: The “Check Mode”

Most developers know about --write It formats your code automatically:

npx prettier --write .

But very few know about or properly use Prettier’s “Check” mode:

npx prettier --check .

So what’s the difference?

• --write Actually modifies your files (it rewrites them with the correct formatting).
• --check Doesn’t change anything; it just checks if your code is already formatted.

If even one file doesn’t match your Prettier configuration, it exits with a non-zero code.

✅ That means it’s perfect for CI pipelines, Git pre-commit hooks, or code review gates.

---

2. Why “Check Mode” Is a Game-Changer

When you’re working solo, formatting manually with --write might be fine.

But in a team, it gets messy. One person forgets to format, another uses different line endings, and suddenly your PR diff is a formatting nightmare.

Prettier’s check mode prevents that.

It turns Prettier from a background formatter into a code quality gatekeeper.

Here’s what it gives you:

• ✅ Consistent formatting across teams
• 🚫 No accidental unformatted code in commits
• 🧹 Clean, reviewable diffs
• 🧠 Confidence that every file follows the same style

It’s like an automated reviewer that never sleeps.

---

3. How to Use It in Your Workflow

You can use --check in three main places:

A. As a Manual Check

Run this before committing:

npx prettier --check .

It’ll tell you if anything needs formatting.

If you see something like this:

Checking formatting...
src/components/Button.tsx
Code style issues found in the above file(s).

You know Prettier would reformat that file, so you can fix it before committing.

---

B. As a Git Hook (with Husky + Lint-Staged)

This is where it gets powerful.

You can run Prettier automatically on only the files you’re about to commit.

Step 1: Install the tools

npm install --save-dev husky lint-staged prettier

Step 2: Add this to package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx,json,css,html,md}": [
      "prettier --check",
      "prettier --write"
    ]
  }
}

Now, when you try to commit unformatted files, Prettier stops the commit, formats them, and saves your reputation.

---

C. As a CI/CD Step

In your CI pipeline (GitHub Actions, GitLab, Jenkins, etc.), add a check like this:

npx prettier --check .

If a developer pushes unformatted code, the CI build fails, forcing consistency before merge.

Example GitHub Action:

name: Prettier Check
on: [push, pull_request]
jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npx prettier --check .

It’s clean, fast, and catches issues early.

---

4. Bonus: The “List Different” Feature

There’s another secret flag most developers miss:

npx prettier --list-different .

This command outputs only the filenames of files that would be reformatted with no noise.

Perfect for shell scripts or integration with CI logs:

Example output:

src/App.tsx
src/utils/helpers.js

Combine it with other tools like ESLint or code review bots to highlight only unformatted files automatically.

---

5. Why This Feature Is So Overlooked

Most tutorials and VS Code extensions make Prettier look like a passive formatter, something that just runs silently on save.

That’s why many developers never even touch the CLI.

But the CLI is where Prettier really shines, especially for teams that want to enforce formatting as part of a build process or PR workflow.

Once you start using --check or --list-differentYou’ll realize Prettier isn’t just about pretty code; it’s about code consistency as a rule, not a suggestion.

---

6. The Perfect Prettier Workflow (Used by Senior Teams)

Here’s how you can combine everything into one bulletproof setup 👇

1. Create .prettierrc

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

2. Create .prettierignore

node_modules
build
dist
package-lock.json
coverage

3. Add scripts to package.json

"scripts": {
  "format": "prettier --write .",
  "check-format": "prettier --check ."
}

4. Add CI step

- run: npm run check-format

5. Add VS Code integration

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Now you have:

• Instant local formatting (VS Code)
• Pre-commit formatting enforcement (Husky)
• CI-level validation (Check Mode)

That’s the holy trinity of clean code.

---

7. What Most Developers Still Don’t Realize

Using Prettier without --check It’s like having a spell-checker that only corrects your document, not one that tells you there’s a typo before you publish.

“Check mode” is that silent reviewer who says:

“Hey, something doesn’t match the standard. Fix it before anyone else sees it.”

It’s subtle, invisible, and unbelievably effective.

That’s why teams that scale use it as part of their automated quality gate, not just a personal preference.

---

8. Bonus Pro Tip: Combine with ESLint Fix

Here’s how senior developers make it bulletproof:

npx eslint . --fix && npx prettier --check .

This first auto-fixes any logic/style errors with ESLint, then ensures all files are Prettier-compliant without rewriting files unless necessary.

It’s the perfect “fail-fast” safety net.

---

Conclusion

Most developers think Prettier’s job is to make their code look nice.

But the real power of Prettier lies in how it keeps your codebase consistent automatically across every commit, every teammate, every CI build.

The hidden gem --check mode transforms Prettier from a passive beautifier into an active code quality enforcer.

It’s a small switch, but it changes everything.

Because clean code isn’t just written, it’s enforced.

---

Call to Action

Have you ever used it prettier --check in your workflow?
Share your experience (or pain points) in the comments and bookmark this post for your next project setup.