Setting Prettier as Default Formatter in VS Code

The Problem

When you install the Prettier extension in VS Code and attempt to format a file, you might encounter a prompt asking whether to use the default formatter or Prettier. If you accidentally choose the default formatter, you'll need to configure VS Code to use Prettier as your primary formatting tool.

VS Code supports multiple formatters for different file types, and setting Prettier as the default ensures consistent code formatting across your projects.

Solutions

Method 1: Using the Right-Click Menu (Easiest)

1. Right-click on any file in your editor
2. Select "Format Document With..." from the context menu
3. From the dropdown, choose "Configure Default Formatter..."
4. Select "Prettier - Code Formatter" from the list

After completing these steps, Prettier will be set as your default formatter for that file type.

Method 2: Using the Command Palette

1. Open the Command Palette with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "Format Document" and select it
3. If prompted, choose "Prettier - Code Formatter"
4. Select "Configure Default Formatter" if you don't see the prompt

Method 3: Through VS Code Settings UI

1. Open Settings by clicking the gear icon in the bottom left and selecting Settings, or using Ctrl+, (Windows/Linux) or Cmd+, (Mac)
2. In the search bar, type "default formatter"
3. Find the "Editor: Default Formatter" setting
4. Select "Prettier - Code Formatter" from the dropdown

TIP

You can also enable "Editor: Format On Save" in the same settings panel to automatically format your files whenever you save them.

Method 4: Manual JSON Configuration (Advanced)

For precise control, you can edit your settings.json file directly:

1. Open the Command Palette with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type "Preferences: Open Settings (JSON)" and select it
3. Add the following configuration:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

WARNING

The extension ID must be exactly "esbenp.prettier-vscode" - not "ebsenp.prettier-vscode" as sometimes mistakenly referenced.

Verifying Your Setup

After configuring Prettier as your default formatter:

1. Right-click on a file and select "Format Document"
2. Check that the formatting changes match Prettier's style
3. Alternatively, use the keyboard shortcut Shift+Alt+F (Windows/Linux) or Shift+Option+F (Mac) to format without saving

Troubleshooting

If Prettier isn't working as expected:

1. Ensure the Prettier extension is installed and enabled
2. Restart VS Code after making configuration changes
3. Check that you don't have conflicting formatter extensions installed
4. Verify there's a .prettierrc configuration file in your project if you need custom formatting rules

INFO

For multi-language projects, you might need to set Prettier as the default formatter for each language individually using the language-specific settings in your settings.json file.