Week 4 - Data structures and loops

Arrays

Loops

Objects

Package managers

Tools (IDE code editing)

Style - Autoformatting

Practice

Assignment

Back to core program

Code formatting with Prettier

https://www.youtube.com/watch?v=__eiQumLOEo

What is Prettier?

Prettier is an opinionated code formatter that automatically formats your code consistently. It enforces a uniform style across your entire codebase, eliminating debates about tabs vs spaces, semicolons, or line length.

// Before: inconsistent formatting
const user={name:"Alice",age:28,city:"Amsterdam"}
function greet(  user  ){
return `Hello, ${user.name}!`
}

// After Prettier: clean and consistent
const user = {
  name: "Alice",
  age: 28,
  city: "Amsterdam",
};

function greet(user) {
  return `Hello, ${user.name}!`;
}

<aside> 💡

Prettier handles formatting so you can focus on logic. No more manually aligning code or arguing about style in code reviews.

</aside>

Installing Prettier

Option 1: VS Code Extension (Recommended)

  1. Open VS Code Extensions (Ctrl+Shift+X or Cmd+Shift+X)
  2. Search for "Prettier - Code formatter"
  3. Click Install
  4. Set as default formatter:

Option 2: npm Package (Project-level)

npm install --save-dev prettier

Add to package.json scripts:

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

Run with: npm run format

<aside> ⌨️

Install the Prettier extension in VS Code right now. You'll use it for the rest of your development career.

</aside>

Format on Save

Enable automatic formatting every time you save a file:

  1. Open VS Code Settings (Ctrl+, or Cmd+,)
  2. Search "format on save"
  3. Check "Editor: Format On Save"

Now whenever you press Ctrl+S (or Cmd+S), Prettier automatically formats your code.

// Type messy code
const data={x:1,y:2,z:3}

// Press Ctrl+S (save)
// Prettier instantly formats it
const data = { x: 1, y: 2, z: 3 };

<aside> 💡

Format on save is addictive. Once you enable it, you'll feel uncomfortable coding without it. It's like having a personal assistant cleaning up after you instantly.

</aside>

Manual Formatting

If format on save is disabled, you can manually format:

Windows/Linux: Shift + Alt + F

Mac: Shift + Option + F

Or right-click → "Format Document"

Configuration

Create a .prettierrc file in your project root to customize Prettier's rules:

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

Common options:

<aside> 💡

Most teams use Prettier's defaults. Don't overthink configuration - consistency matters more than specific rules.

</aside>

Ignoring Files

Create .prettierignore to exclude files from formatting:

node_modules/
package-lock.json
dist/
build/
*.min.js

Similar to .gitignore syntax.

Prettier vs Linters

Prettier = Formatting (spaces, newlines, quotes)

ESLint = Code quality (unused variables, potential bugs)

They work together:

Many teams use both. ESLint can even run Prettier rules with eslint-plugin-prettier.

<aside> 💡

Don't fight with Prettier. If it formats code differently than you expect, trust it. The consistency across your codebase is more valuable than personal preferences.

</aside>

Language Support

Prettier supports many languages beyond JavaScript:

It automatically detects file types and applies appropriate formatting.

Common Issues

Prettier not working?

  1. Check it's set as default formatter (Settings → Default Formatter)
  2. Verify format on save is enabled
  3. Check file type is supported
  4. Look for conflicting formatters

Conflicting with existing code style?

<aside> 💡

</aside>

EditorConfig