Setting up Prettier in VS Code

🎯 Purpose of This Note

A quick overview of a recommended VS Code extension setup, followed by a step-by-step guide to installing and configuring Prettier — a code formatter that will be used throughout the rest of the course.

🧩 VS Code Extensions Overview

📦 Below are the extensions mentioned, with brief explanations of what each does:

🚦 TODO Highlight in Action

• 🌈 This extension colors specific keywords written in code comments:

• ✅ TODO → highlighted in green.

• 🐞 BUG → highlighted in red.

• 🔧 FIXME → highlighted in another distinct color.

• 📍 These highlighted lines also show up as colored markers in the scrollbar, making it easy to spot important notes across a long file at a glance.

⚙️ Setting Up Prettier

🤔 What Prettier Does

• ✨ Automatically formats your code (JavaScript, CSS, HTML, etc.) to a consistent, opinionated style.

• 🧹 Handles indentation, quote style, line breaks, semicolons, etc. — no manual formatting needed.

• 🤝 Intentionally has few config options — a feature, not a limitation, since it keeps formatting consistent and out of debate, especially on teams.

📥  Step 1: Install the Prettier Extension

• 🔍 Search for "Prettier" in the VS Code Extensions panel and click Install.

💾  Step 2: Enable "Format on Save"

1. ⚙️ Open VS Code Settings.

2. 🔎 Search for: Format on Save.

3. ✅ Enable the checkbox.

• 💾 Now, every time you save a file, Prettier will automatically reformat it according to its rules.

📄 Step 3: Create a Prettier Configuration File

• 📂 Instead of configuring Prettier through VS Code's settings UI, create a dedicated config file in your project's root folder:

.prettierrc

🤔 Why Use a Config File Instead of VS Code Settings?

• Settings inside a .prettierrc file are project-specific and can travel with the codebase.

• This makes it easy to:

  • 📁 Use different formatting rules across different projects.

  • 👥 Ensure all developers on a team use the exact same formatting rules (very useful for collaborative projects).

📝 Example Configuration

{
  "singleQuote": true
}

• "singleQuote": true tells Prettier to convert all double quotes (") to single quotes (') throughout your code.

• The default value for singleQuote is false (meaning Prettier normally prefers double quotes unless told otherwise).

🧪 Step 4: Testing Prettier in Action

After saving .prettierrc, save any JavaScript file (e.g., index.js) and watch for:

1. 🔤 Quotes converted — double quotes automatically switch to single.

2. 🧹 Extra blank lines collapsed — Prettier allows only one blank line between code blocks.

   • ⚠️ Not configurable — one of the few restrictive parts of an otherwise well-liked tool.

3. 📏 Long lines wrapped — lines past a character limit get intelligently broken up.

4. 📝 Semicolons added back — delete them and save, Prettier restores them.

⚙️ Step 5: More Prettier Options

Search "Prettier" to see its full option list on the official site (described as an "opinionated code formatter" with intentionally few settings), including:

🎯 Key Takeaways

🎉 Wrap-Up

• 🎊 This Notes concludes the Node Farm project and the introductory Node.js section.

• 🚀 From this point forward in the course, all code will be automatically formatted using this Prettier + .prettierrc (singleQuote: true) setup with Format on Save enabled.