The Latest

How to Use Prettier in VSCode to Format Code

byBogdan Sandu
November 17, 2025
Total
0
Shares
0
0
0
0

Summarize this article with:

ChatGPT Claude Perplexity Grok

Messy code slows you down. Inconsistent indentation, mixed quotes, random spacing. It adds up.

Learning how to use Prettier in VSCode fixes this in about five minutes.

Prettier is an opinionated code formatter that automatically formats your JavaScript, TypeScript, HTML, CSS, and JSON files. No more arguing about tabs versus spaces.

You press save. Your code looks perfect.

This guide walks you through installing the Prettier extension, configuring format on save, creating a .prettierrc file, and troubleshooting common issues.

By the end, your editor settings will handle all formatting automatically, letting you focus on writing code instead of fixing it.

How to Use Prettier in VSCode

maxresdefault How to Use Prettier in VSCode to Format Code

Learning how to use Prettier in VSCode gives you automatic code formatting that keeps your JavaScript, TypeScript, HTML, and CSS files consistent.

Developers need this when working on teams, maintaining large projects, or just wanting cleaner source code without manual effort.

This guide covers 7 steps requiring about 5 minutes and basic familiarity with VSCode.

Prerequisites

Before you start, make sure you have these ready:

  • Visual Studio Code version 1.60 or later
  • Node.js 14+ (only if using project-level configuration)
  • 5-10 minutes of time
  • Beginner skill level
  • Windows, macOS, or Linux

You do not need any prior experience with code formatters or linting tools.

Step 1: How Do You Install the Prettier Extension in VSCode?

Open the Extensions sidebar in Visual Studio Code using Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS), search for “Prettier – Code formatter” published by Prettier, then click Install to add the code beautifier to your editor.

Action

  1. Open Extensions: Press Ctrl+Shift+X or click the square icon in the left sidebar
  2. Search: Type “Prettier – Code formatter” in the search box
  3. Verify publisher: Look for “Prettier” as the publisher name (not a third-party fork)
  4. Install: Click the blue Install button
  5. Result: The extension appears in your installed extensions list

Purpose

The Prettier extension is the bridge between the Prettier npm package and your editor.

Without it, VSCode cannot access Prettier’s formatting rules.

Step 2: How Do You Set Prettier as the Default Formatter in VSCode?

Navigate to File > Preferences > Settings (or press Ctrl+,), search for “Default Formatter” in the search bar, then select “esbenp.prettier-vscode” from the dropdown menu to make Prettier handle all code formatting tasks.

Action

  1. Open Settings: File > Preferences > Settings (Ctrl+, on Windows/Linux, Cmd+, on macOS)
  2. Search: Type “Default Formatter” in the settings search bar
  3. Select formatter: Choose “Prettier – Code formatter (esbenp.prettier-vscode)” from the Editor: Default Formatter dropdown
  4. Result: VSCode now uses Prettier for format document commands

Alternative: JSON Configuration

You can also open settings.json in VSCode and add this line directly:

"editor.defaultFormatter": "esbenp.prettier-vscode"

Purpose

VSCode supports multiple formatters.

Setting a default prevents the “Choose a formatter” popup every time you format.

Step 3: How Do You Enable Format on Save in VSCode?

Open Settings (Ctrl+,), search for “Format On Save,” check the box to enable it, and your files will automatically format every time you save using Ctrl+S or Cmd+S.

Action

  1. Open Settings: Ctrl+, (Windows/Linux) or Cmd+, (macOS)
  2. Search: Type “Format On Save” in the search bar
  3. Enable: Check the “Editor: Format On Save” checkbox
  4. Result: Files auto format when you press Ctrl+S

JSON Alternative

Add this to your settings.json:

"editor.formatOnSave": true

Purpose

Manual formatting breaks your workflow.

Format on save keeps your code consistent without extra keystrokes, which matters when you’re deep into front-end development work.

Step 4: How Do You Create a Prettier Configuration File?

Create a file named .prettierrc in your project root directory, add your formatting rules as JSON key-value pairs, and Prettier will apply these settings to every file in that project.

Action

  1. Create file: New file in project root named “.prettierrc”
  2. Add configuration:

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

  1. Save file: Ctrl+S
  2. Result: Prettier uses these rules for all files in the project

Purpose

A configuration file ensures every developer on your team uses identical formatting rules.

Commit it to source control so your entire codebase stays consistent.

Step 5: How Do You Exclude Files from Prettier Formatting?

Create a .prettierignore file in your project root, list the files and folders you want Prettier to skip (one per line), and those paths will be excluded from all formatting operations.

Action

  1. Create file: New file in project root named “.prettierignore”
  2. Add paths to ignore:

` nodemodules dist build .min.js .min.css coverage `

  1. Save file: Ctrl+S
  2. Result: Prettier skips these files and folders

Purpose

Minified files, build outputs, and third-party code should not be formatted.

The ignore file prevents accidental changes to files you do not control.

Step 6: How Do You Format a Single File with Prettier in VSCode?

Open the file you want to format, press Shift+Alt+F (Windows/Linux) or Shift+Option+F (macOS), and Prettier instantly applies your formatting rules to the entire document.

Action

  • Keyboard shortcut: Shift+Alt+F (Windows/Linux) or Shift+Option+F (macOS)
  • Command Palette: Ctrl+Shift+P > type “Format Document” > press Enter
  • Right-click menu: Right-click in editor > “Format Document”
  • Result: Code reformats according to Prettier settings

Purpose

Sometimes you need to format code in VSCode without saving the file first.

The keyboard shortcut gives you that control.

Step 7: How Do You Format All Files in a Project with Prettier?

Open terminal in VSCode (Ctrl+), run the command npx prettier --write ., and Prettier formats every supported file in your project directory at once.

Action

  1. Open terminal: Ctrl+ or View > Terminal
  2. Run command: npx prettier –write .
  3. For specific file types: npx prettier –write “/.js”
  4. Result: Terminal shows list of formatted files

Purpose

Useful when adding Prettier to an existing project or after code refactoring.

Formats hundreds of files in seconds.

Verification

Confirm Prettier is working correctly with these checks:

  • Test formatting: Open any JavaScript file, add inconsistent spacing, press Ctrl+S; code should reformat
  • Check status bar: Look for “Prettier” in the bottom right corner of VSCode
  • Verify config detection: Click “Prettier” in status bar; it should show your .prettierrc path
  • Test ignore file: Open a file in nodemodules; formatting should not apply

Troubleshooting

Prettier Not Formatting on Save

Issue: Files do not format when you press Ctrl+S.

Solution:

  1. Check Settings > Editor: Format On Save is enabled
  2. Verify Settings > Editor: Default Formatter shows “esbenp.prettier-vscode”
  3. Reload VSCode: Ctrl+Shift+P > “Developer: Reload Window”

Prettier Conflicts with ESLint

Issue: ESLint and Prettier fight over formatting rules.

Solution:

  1. Install eslint-config-prettier: npm install –save-dev eslint-config-prettier
  2. Add “prettier” to your ESLint extends array (must be last)
  3. This disables ESLint rules that conflict with Prettier

Configuration File Not Detected

Issue: Prettier ignores your .prettierrc settings.

Solution:

  1. Confirm .prettierrc is in the project root (same folder as package.json)
  2. Check for JSON syntax errors in your config file
  3. Reload VSCode: Ctrl+Shift+P > “Developer: Reload Window”

Specific Language Not Formatting

Issue: Prettier works for JavaScript but not HTML or CSS.

Solution: Add language-specific settings to your settings.json:

` "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } `

Configuration Options Reference

Common Prettier settings you can add to your .prettierrc file:

  • printWidth: 80 (maximum line length before wrapping)
  • tabWidth: 2 (spaces per indentation level)
  • useTabs: false (spaces instead of tabs)
  • semi: true (add semicolons at end of statements)
  • singleQuote: false (use double quotes for strings)
  • trailingComma: “es5” (trailing commas where valid in ES5)
  • bracketSpacing: true (spaces between brackets in object literals)
  • arrowParens: “always” (parentheses around single arrow function parameter)

Prettier supports JavaScript, TypeScript, JSON, HTML, CSS, Markdown, YAML, GraphQL, and PHP out of the box.

Related Processes

Now that you have auto format working, explore these related VSCode guides:

Consistent code formatting is a core part of any software development best practices workflow.

Pair Prettier with continuous integration to enforce formatting across your entire team.

FAQ on How To Use Prettier In Vscode

How do I install Prettier in VSCode?

Press Ctrl+Shift+X to open the Extensions sidebar, search for “Prettier – Code formatter,” and click Install. The extension publisher should be “Prettier.” Takes about 30 seconds. No npm install required for basic code formatting.

Why is Prettier not formatting on save?

Check two settings: Editor: Format On Save must be enabled, and Editor: Default Formatter must show “esbenp.prettier-vscode.” If both are correct, reload VSCode with Ctrl+Shift+P > “Developer: Reload Window” to reset the extension.

How do I set Prettier as the default formatter?

Open Settings (Ctrl+,), search “Default Formatter,” select “Prettier – Code formatter” from the dropdown. Alternatively, add “editor.defaultFormatter”: “esbenp.prettier-vscode” directly to your settings.json file for workspace-level control.

What is a .prettierrc file?

A .prettierrc is a configuration file that defines your formatting rules. Place it in your project root. It accepts JSON format with options like tabWidth, semi, singleQuote, and trailingComma. Your entire team shares identical code style.

How do I format a single file with Prettier?

Use the keyboard shortcut Shift+Alt+F on Windows/Linux or Shift+Option+F on macOS. You can also right-click in the editor and select “Format Document” or use the Command Palette with Ctrl+Shift+P.

Can Prettier format HTML and CSS?

Yes. Prettier supports JavaScript, TypeScript, JSON, HTML, CSS, Markdown, YAML, GraphQL, and PHP. Add language-specific settings in your settings.json if a particular language does not format automatically after installation.

How do I fix Prettier and ESLint conflicts?

Install eslint-config-prettier with npm install –save-dev eslint-config-prettier. Add "prettier" as the last item in your ESLint extends array. This disables ESLint formatting rules that conflict with Prettier rules.

What keyboard shortcut formats code with Prettier?

Shift+Alt+F on Windows and Linux. Shift+Option+F on macOS. These shortcuts trigger “Format Document” which uses your default formatter. Enable format on save (Ctrl+S) for automatic formatting without extra keystrokes.

How do I ignore files from Prettier formatting?

Create a .prettierignore file in your project root. Add paths like nodemodules, dist, build, and .min.js on separate lines. Prettier skips these files during both manual formatting and CLI operations.

Does Prettier work with TypeScript?

Yes. Prettier formats TypeScript files (.ts and .tsx) without additional configuration. It handles type annotations, interfaces, generics, and all TypeScript-specific syntax. Works identically to JavaScript formatting with full auto format support.

Conclusion

You now know how to use Prettier in VSCode to automate your code formatting workflow.

The setup takes minutes. The time saved adds up to hours.

Install the extension, set your default formatter, enable format on save, and create a .prettierrc for your project. That covers 90% of what most developers need.

Consistent code style* matters more than people think. It reduces friction during the code review process and keeps your workspace settings predictable across machines.

Add your configuration to version control. Your entire team benefits from identical indentation settings and formatting rules.

Prettier handles the tedious stuff. You focus on building.

50218a090dd169a5399b03ee399b27df17d94bb940d98ae3f8daff6c978743c5?s=250&d=mm&r=g How to Use Prettier in VSCode to Format Code
Latest posts by Bogdan Sandu (see all)
Share
Tweet
Share
Share
Related Posts