TypeScript with Prettier

✨ What is Prettier?

Prettier is an opinionated code formatter that automatically formats your TypeScript code. It ensures consistent style across your project, saving time and eliminating debates about code formatting standards.


// Before Prettier
const user={name:"John",age:30,email:"[email protected]"};

// After Prettier
const user = {
  name: "John",
  age: 30,
  email: "[email protected]"
};

Key Prettier Features

🎨

Auto Formatting

Formats code on save automatically

// Formats instantly
const sum = (a: number, b: number): number => a + b;

📏

Consistent Style

Same formatting across entire team

// Everyone's code looks the same
interface User {
  name: string;
  age: number;
}

⚙️

Configurable

Customize rules to your preference

{
  "semi": true,
  "singleQuote": true
}

🔌

Editor Integration

Works with VS Code, WebStorm, etc.

// Format on save enabled
// Ctrl+S = formatted code

🔹 Installing Prettier

Install Prettier in your TypeScript project:

# Using npm
npm install --save-dev prettier

# Using yarn
yarn add --dev prettier

# Using pnpm
pnpm add -D prettier

🔹 Basic Configuration

Create a .prettierrc file in your project root:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}

Configuration Options:

semi: Add semicolons at end of statements
singleQuote: Use single quotes instead of double
printWidth: Maximum line length
tabWidth: Spaces per indentation level

🔹 Formatting TypeScript Code

Run Prettier from command line:

# Format all TypeScript files
npx prettier --write "src/**/*.ts"

# Check formatting without changing files
npx prettier --check "src/**/*.ts"

# Format specific file
npx prettier --write src/index.ts

🔹 VS Code Integration

Set up automatic formatting in VS Code:

🔸 Install Extension

Open VS Code Extensions (Ctrl+Shift+X)
Search for "Prettier - Code formatter"
Click Install

🔸 VS Code Settings

Add to .vscode/settings.json :

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

🔹 Prettier with ESLint

Combine Prettier with ESLint for best results:

# Install ESLint integration
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Update .eslintrc.json :

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

🔹 Ignore Files

Create .prettierignore to skip certain files:

# Dependencies
node_modules/

# Build output
dist/
build/

# Generated files
*.min.js
*.bundle.js

# Config files
package-lock.json

🔹 Example: Before and After

See how Prettier transforms messy code:

🔸 Before Prettier

interface Product{id:number;name:string;price:number;}
const products:Product[]=[{id:1,name:"Laptop",price:999},{id:2,name:"Mouse",price:25}];
function getProduct(id:number):Product|undefined{return products.find(p=>p.id===id);}

🔸 After Prettier

interface Product {
  id: number;
  name: string;
  price: number;
}

const products: Product[] = [
  { id: 1, name: 'Laptop', price: 999 },
  { id: 2, name: 'Mouse', price: 25 },
];

function getProduct(id: number): Product | undefined {
  return products.find((p) => p.id === id);
}

🔹 Package.json Scripts

Add formatting scripts to your project:

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "eslint . --ext .ts,.tsx --fix"
  }
}