🚀 Setting Up Prettier + Husky + Lint-Staged for a Clean MERN Stack Workflow

If you’re working on a MERN stack project (MongoDB, Express, React, Node), you’ve probably noticed how inconsistent code formatting can get — especially when multiple developers are involved.
That’s where Prettier, Husky, and lint-staged come to the rescue 💪

This guide walks you step-by-step through setting up a professional Prettier workflow for a MERN project that ensures:

• Clean and consistent code formatting
• Automatic formatting on every save (VS Code)
• Auto-formatting before every commit (no more ugly code in Git)

⚙️ Why Use These Tools?

🧩 Step 1: Install Prettier

In the root of your MERN project (or inside both client and server folders if they’re separate), run:

bash
npm install --save-dev prettier

📜 Step 2: Create .prettierrc Configuration File

At the root of your project, create a file named .prettierrc:

json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "printWidth": 100,
  "endOfLine": "auto"
}

You can tweak it to your preferences — for example, turn off semicolons or switch to double quotes.

🚫 Step 3: Create .prettierignore

Tell Prettier which files to skip:

node_modules
build
dist
coverage
.env
package-lock.json

🧠 Step 4: Add Prettier Scripts

In your package.json, add these helper scripts:

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

Run them manually with:

bash
npm run format

🧰 Step 5: Integrate Prettier with VS Code

If you use VS Code (and you should 😎):

1. Install the Prettier – Code Formatter extension
2. Add a workspace config file:

.vscode/settings.json

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

Now your code formats automatically every time you save.

🦾 Step 6: Setup Husky (v9+)

Install Husky and lint-staged:

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

Initialize Husky (this creates a .husky folder):

bash
npx husky init

This also adds a "prepare": "husky" script to your package.json.

🪝 Step 7: Create a Pre-Commit Hook (Husky v9 Syntax)

The old command npx husky add is deprecated, so use this new way:

bash
echo "npx lint-staged" > .husky/pre-commit
chmod +x .husky/pre-commit

This tells Husky to run lint-staged before every commit.

🧹 Step 8: Configure lint-staged

Inside your package.json, add this configuration:

json
"lint-staged": {
  "*.{js,jsx,ts,tsx,json,css,md}": ["prettier --write"]
}

Now, whenever you commit, only your staged files will be formatted — fast and efficient.

🚀 Step 9: Test the Setup

Try it out:

bash
git add .
git commit -m "test: husky and prettier setup"

You should see Husky trigger and Prettier format your files before the commit completes.

🧩 Optional — Combine ESLint + Prettier

If you also use ESLint, install:

bash
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Then extend your .eslintrc like this:

json
{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Now ESLint will catch Prettier issues too.

📁 Final Folder Structure Example

mitaa-alumni-connect-donate/
│
├── client/
│   ├── src/
│   ├── package.json
│
├── server/
│   ├── src/
│   ├── package.json
│
├── .husky/
│   └── pre-commit
│
├── .vscode/
│   └── settings.json
│
├── .prettierrc
├── .prettierignore
├── package.json
└── README.md

🏁 Conclusion

With this setup:

• Every file stays clean and consistent
• VS Code formats on save automatically
• Husky prevents unformatted code from being committed

This setup might seem like a small improvement, but it’s a big quality-of-life upgrade for any serious MERN developer. Once you use it, you’ll never want to go back to manually fixing indentation again 🚀

💡 Bonus Tip:

You can reuse this exact setup across all your Node or React projects — just copy your .prettierrc, .husky/, and .vscode/ folders into new repos and you’re good to go.