🔧 How to Configure Prettier in VS Code

When writing code, formatting often becomes inconsistent and messy. That’s why most developers use Prettier, a powerful code formatter that keeps your code clean and uniform. In this guide, you’ll learn how to configure Prettier in Visual Studio Code (VS Code) step by step.

✅ Step 1: Install Prettier Extension

1. Open VS Code.
2. Go to the Extensions Marketplace (left sidebar).
3. Search for “Prettier - Code formatter”.
4. Click Install.

📸 Screenshot Example:

✅ Step 2: Open VS Code Settings

1. Click on the gear icon ⚙️ in the bottom-left corner.
2. Select Settings from the dropdown menu.

📸 Screenshot Example:

✅ Step 3: Set Prettier as Default Formatter

1. In Settings, search for “format” in the search bar.
2. Under Editor: Default Formatter, choose Prettier - Code formatter.
3. Enable the following options:
   • Format On Save (auto-format on save)
   • Format On Paste (auto-format pasted code)
   • Format On Type (format while typing)

📸 Screenshot Example:

✅ Step 4: Test Prettier

1. Open any code file (JavaScript, TypeScript, HTML, CSS, etc.).
2. Write some messy code (wrong indentation, extra spaces).
3. Save the file (Ctrl + S / Cmd + S).

👉 Your code will automatically be reformatted by Prettier.

🎯 Bonus Tip: Customize with .prettierrc

If you want to define your own formatting rules, create a .prettierrc file in your project root:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

This allows you to control Prettier’s behavior for your project.

🚀 Final Thoughts

Prettier makes coding faster and more consistent by handling formatting automatically. Once set up in VS Code, you can focus on writing logic while Prettier takes care of the style.

👉 With just a few steps, your codebase will always stay clean and professional.