JavaScript Tooling

Prettier

Opinionated code formatter for beautiful, consistent code

Find videos you like?

Save to resource drawer for future reference!

What is Prettier?

Prettier is an opinionated code formatter that automatically formats your code to a consistent style. It supports JavaScript, TypeScript, CSS, HTML, JSON, and more. No configuration debates—just save and it formats!

Auto Format

Formats code on save automatically

Consistent Style

Same formatting across entire team

Multi-Language

JS, TS, CSS, HTML, JSON, and more

Prettier vs ESLint

Different tools, complementary purposes

Prettier (Formatting)

•Handles code style (spaces, quotes, etc.)
•Automatically formats on save
•Opinionated (few config options)
•Enforces consistent formatting

ESLint (Code Quality)

•Finds bugs and code issues
•Shows errors and warnings
•Highly configurable
•Enforces best practices

Use Both Together!

Prettier handles formatting, ESLint handles code quality. They work perfectly together and complement each other.

Example 1: Installing Prettier

Quick setup guide

# Install Prettier
npm install --save-dev prettier

# Create config file
echo {}> .prettierrc.json

# Format all files
npx prettier --write .

# Format specific files
npx prettier --write src/**/*.js

# Check if files are formatted
npx prettier --check .

# Add to package.json
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Example 2: Prettier Configuration

.prettierrc.json or .prettierrc.js

// .prettierrc.json
{
  "semi": true,              // Add semicolons
  "trailingComma": "es5",    // Trailing commas where valid in ES5
  "singleQuote": true,       // Use single quotes
  "printWidth": 80,          // Wrap lines at 80 characters
  "tabWidth": 2,             // 2 spaces per indentation
  "useTabs": false,          // Use spaces, not tabs
  "arrowParens": "always",   // Always parentheses around arrow function args
  "bracketSpacing": true,    // Spaces inside object literals
  "endOfLine": "lf"          // Unix line endings
}

// .prettierrc.js (with comments)
module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  arrowParens: 'always',
  bracketSpacing: true,
  endOfLine: 'lf',
  
  // Override for specific files
  overrides: [
    {
      files: '*.json',
      options: {
        printWidth: 120
      }
    }
  ]
};

Example 3: Prettier in Action

Before and after formatting

Before (Messy)

// Inconsistent formatting
function foo(  x,y,z  ){
const obj={name:"John",age:30,city:"NYC"}
  if(x>10){return y*2}
      else{
return z
}
}

const users=[{id:1,name:"Alice"},{id:2,name:"Bob"}]

const result=users.map(user=>{
return{
...user,
active:true
}
})

After (Prettier)

// Consistently formatted
function foo(x, y, z) {
  const obj = { name: 'John', age: 30, city: 'NYC' };
  if (x > 10) {
    return y * 2;
  } else {
    return z;
  }
}

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

const result = users.map((user) => {
  return {
    ...user,
    active: true,
  };
});

Example 4: Ignoring Files

.prettierignore file

# .prettierignore
# Similar to .gitignore

# Dependencies
node_modules/
bower_components/

# Build output
dist/
build/
*.min.js
*.bundle.js

# Package manager lock files
package-lock.json
yarn.lock

# Generated files
coverage/
.next/
.nuxt/

# Markdown (if you want to preserve formatting)
*.md

# Specific files
public/vendor/
legacy-code/

VS Code Integration

Format on save automatically

1. Install Extension

Install "Prettier - Code formatter" extension in VS Code

2. Configure Settings

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

3. Format Code

Keyboard shortcuts:

• Shift + Alt + F - Format document
• Or right-click → "Format Document"
• Automatically formats on save (if enabled)

Example 5: Using Prettier with ESLint

Perfect harmony

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

# .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'prettier'  // Disables ESLint rules that conflict with Prettier
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',  // Show Prettier errors as ESLint errors
    // Other ESLint rules...
  }
};

# Now ESLint and Prettier work together!
# ESLint = code quality
# Prettier = formatting

# Run both
npm run lint
npm run format

Prettier Best Practices

Get the most out of Prettier

✅ Do

• Enable format on save in editor
• Use default config (opinionated is good!)
• Share config with team (.prettierrc)
• Add Prettier to pre-commit hooks
• Run Prettier in CI pipeline
• Integrate with ESLint
• Format all files initially
• Keep Prettier updated

❌ Don't

• Fight Prettier's opinions
• Over-configure (keep it simple)
• Mix formatted and unformatted code
• Skip Prettier in CI
• Disable for "just this file"
• Have different configs per developer
• Manually format code
• Ignore Prettier errors

Key Takeaways

✨

Auto Formatter

Formats code on save
No manual formatting needed

🎨

Opinionated

Few config options
Consistent by design

🤝

Works with ESLint

Formatting + quality
Perfect combination

🌐

Multi-Language

JS, TS, CSS, HTML, JSON
One tool for all

End Format Wars

Prettier eliminates code style debates. Everyone's code looks the same. Save time arguing about tabs vs spaces—let Prettier decide!

Previous Topic

ESLint

Linting and code quality enforcement.

Next Topic

XSS Prevention

Cross-site scripting attacks and mitigation.

Ask a Question

Have a question about Prettier? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Tooling

Prettier

Opinionated code formatter for beautiful, consistent code

Find videos you like?

Save to resource drawer for future reference!

What is Prettier?

Auto Format

Formats code on save automatically

Consistent Style

Same formatting across entire team

Multi-Language

JS, TS, CSS, HTML, JSON, and more

Prettier vs ESLint

Different tools, complementary purposes

Prettier (Formatting)

•Handles code style (spaces, quotes, etc.)
•Automatically formats on save
•Opinionated (few config options)
•Enforces consistent formatting

ESLint (Code Quality)

•Finds bugs and code issues
•Shows errors and warnings
•Highly configurable
•Enforces best practices

Use Both Together!

Prettier handles formatting, ESLint handles code quality. They work perfectly together and complement each other.

Example 1: Installing Prettier

Quick setup guide

# Install Prettier
npm install --save-dev prettier

# Create config file
echo {}> .prettierrc.json

# Format all files
npx prettier --write .

# Format specific files
npx prettier --write src/**/*.js

# Check if files are formatted
npx prettier --check .

# Add to package.json
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Example 2: Prettier Configuration

.prettierrc.json or .prettierrc.js

// .prettierrc.json
{
  "semi": true,              // Add semicolons
  "trailingComma": "es5",    // Trailing commas where valid in ES5
  "singleQuote": true,       // Use single quotes
  "printWidth": 80,          // Wrap lines at 80 characters
  "tabWidth": 2,             // 2 spaces per indentation
  "useTabs": false,          // Use spaces, not tabs
  "arrowParens": "always",   // Always parentheses around arrow function args
  "bracketSpacing": true,    // Spaces inside object literals
  "endOfLine": "lf"          // Unix line endings
}

// .prettierrc.js (with comments)
module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  arrowParens: 'always',
  bracketSpacing: true,
  endOfLine: 'lf',
  
  // Override for specific files
  overrides: [
    {
      files: '*.json',
      options: {
        printWidth: 120
      }
    }
  ]
};

Example 3: Prettier in Action

Before and after formatting

Before (Messy)

// Inconsistent formatting
function foo(  x,y,z  ){
const obj={name:"John",age:30,city:"NYC"}
  if(x>10){return y*2}
      else{
return z
}
}

const users=[{id:1,name:"Alice"},{id:2,name:"Bob"}]

const result=users.map(user=>{
return{
...user,
active:true
}
})

After (Prettier)

// Consistently formatted
function foo(x, y, z) {
  const obj = { name: 'John', age: 30, city: 'NYC' };
  if (x > 10) {
    return y * 2;
  } else {
    return z;
  }
}

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

const result = users.map((user) => {
  return {
    ...user,
    active: true,
  };
});

Example 4: Ignoring Files

.prettierignore file

# .prettierignore
# Similar to .gitignore

# Dependencies
node_modules/
bower_components/

# Build output
dist/
build/
*.min.js
*.bundle.js

# Package manager lock files
package-lock.json
yarn.lock

# Generated files
coverage/
.next/
.nuxt/

# Markdown (if you want to preserve formatting)
*.md

# Specific files
public/vendor/
legacy-code/

VS Code Integration

Format on save automatically

1. Install Extension

Install "Prettier - Code formatter" extension in VS Code

2. Configure Settings

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

3. Format Code

Keyboard shortcuts:

• Shift + Alt + F - Format document
• Or right-click → "Format Document"
• Automatically formats on save (if enabled)

Example 5: Using Prettier with ESLint

Perfect harmony

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

# .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'prettier'  // Disables ESLint rules that conflict with Prettier
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',  // Show Prettier errors as ESLint errors
    // Other ESLint rules...
  }
};

# Now ESLint and Prettier work together!
# ESLint = code quality
# Prettier = formatting

# Run both
npm run lint
npm run format

Prettier Best Practices

Get the most out of Prettier

✅ Do

• Enable format on save in editor
• Use default config (opinionated is good!)
• Share config with team (.prettierrc)
• Add Prettier to pre-commit hooks
• Run Prettier in CI pipeline
• Integrate with ESLint
• Format all files initially
• Keep Prettier updated

❌ Don't

• Fight Prettier's opinions
• Over-configure (keep it simple)
• Mix formatted and unformatted code
• Skip Prettier in CI
• Disable for "just this file"
• Have different configs per developer
• Manually format code
• Ignore Prettier errors

Key Takeaways

✨

Auto Formatter

Formats code on save
No manual formatting needed

🎨

Opinionated

Few config options
Consistent by design

🤝

Works with ESLint

Formatting + quality
Perfect combination

🌐

Multi-Language

JS, TS, CSS, HTML, JSON
One tool for all

End Format Wars

Prettier eliminates code style debates. Everyone's code looks the same. Save time arguing about tabs vs spaces—let Prettier decide!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

ESLint

XSS Prevention

JavaScript Code Editor

Building Your Learning Module...

Prettier

What is Prettier?

Auto Format

Consistent Style

Multi-Language

Prettier (Formatting)

ESLint (Code Quality)

Use Both Together!

Before (Messy)

After (Prettier)

1. Install Extension

2. Configure Settings

3. Format Code

✅ Do

❌ Don't

Key Takeaways

Auto Formatter

Opinionated

Works with ESLint

Multi-Language

End Format Wars

ESLint

XSS Prevention

JavaScript Code Editor

Prettier

What is Prettier?

Auto Format

Consistent Style

Multi-Language

Prettier (Formatting)

ESLint (Code Quality)

Use Both Together!

Before (Messy)

After (Prettier)

1. Install Extension

2. Configure Settings

3. Format Code

✅ Do

❌ Don't

Key Takeaways

Auto Formatter

Opinionated

Works with ESLint

Multi-Language

End Format Wars