How to fix Prettier Extension not working in VS Code

# Make sure Prettier is selected as your Default formatter

The first thing you should check is that Prettier is selected as your default formatter.

1. Press:

• Ctrl + Shift + P on Windows and Linux
• Command + Shift + P on macOS

2. Type preferences open settings and select Preferences: Open Settings (UI).

3. Type default formatter and in the Editor: Default Formatter, make sure to select Prettier - Code formatter as your default formatter.

Make sure that all checkboxes of languages are checked as shown in the following screenshot.

If you can't find the Settings menu, click on:

1. File -> Preferences -> Settings on Windows and Linux.
2. Code -> Preferences -> Settings on macOS.

# Make sure Format on Save is enabled

Make sure the Format on Save setting is enabled:

1. Press:

• Ctrl + Shift + P on Windows and Linux.
• Command + Shift + P on macOS.

2. Type preferences open settings and select Preferences: Open Settings (UI).

# Click on the prettier icon in the Status Bar

The next thing you should try is to click on the prettier icon in the Status Bar at the bottom right corner of the screen.

When you click on the icon, the OUTPUT tag gets focused.

If there are any issues with your Prettier installation or configuration, they are shown in the OUTPUT tab.

If you can't see the prettier button in the Status Bar, right-click on the Status Bar at the bottom and make sure the Prettier option is ticked.

# Try using the Format Document action

Another thing you should try is to use the Format Document action from the Command Palette:

1. Press:

• Ctrl + Shift + P on Windows and Linux.
• Command + Shift + P on macOS.

2. Type Format Document and select the option.

If you haven't installed a formatter for the specific file, you will get prompted.

# Try setting Prettier as the formatter for the specific file

Another thing you can try is to set Prettier as the formatter for the specific file and all other files with the extension.

1. Open and focus a specific file (e.g. a .js file).

2. Press:

• Ctrl + Shift + P on Windows and Linux
• Command + Shift + P on macOS

3. Type Format Document With and select the option.

4. Click on Configure Default Formatter....

5. Click on Prettier - Code formatter.

# Make sure the Prettier extension is installed and enabled

Make sure the Prettier extension is installed and enabled:

1. Click on Extensions in the left sidebar.

• You can also open the Extensions menu by pressing:
  • Ctrl + Shift + X on Windows or Linux
  • Command + Shift + X on macOS

2. Type Prettier and make sure the extension is installed and enabled.

Also, make sure to install the original Prettier extension that was developed by the Prettier organization.

# Disable the extension and reenable it

The next thing you should try is to disable the extension and reenable it.

Once you click on the extension in the left sidebar:

1. Click on the Disable button to disable the extension.

You might get prompted to reload VS Code after disabling the extension.

2. After you reload VS Code, click on the Enable button to reenable the extension.

# Installing the Prettier module locally

Another thing you can try is to install the prettier module locally.

Open your terminal in your project's root directory (where your package.json file is) and run the following command.

Copied!
# in case you don't have a package.json file yet
npm init -y

npm install prettier -D --save-exact

The command installs the prettier module locally.

If the package is installed locally, the extension will use your project's local version.

Otherwise, the version that is bundled with the extension will be used.

Make sure you also have your other modules installed.

Copied!
# for NPM
npm install

# for YARN
yarn install

# Restart VS Code

Another thing you can try is to restart VS Code:

1. Press:

• Ctrl + Shift + P on Windows and Linux
• Command + Shift + P on macOS

2. Type reload window and select Developer: Reload Window.

# Make sure Format on Save Mode is set to File

Make sure Format on Save Mode is set to file:

1. Press:

• Ctrl + Shift + P on Windows and Linux.
• Command + Shift + P on macOS.

2. Type preferences open settings and select Preferences: Open Settings (UI).

3. Type format on save and make sure Editor: Format on Save Mode is set to file.

# Having a local settings.json file with incorrect config

Make sure you don't have a local .vscode/settings.json file where you've set editor.formatOnSave to false.

For example, the following config would prevent you from formatting your code on save.

Copied!
{
  "editor.formatOnSave": false
}

Even if you have format on save enabled globally, the local config in the .vscode directory would override the global setting.

Make sure you haven't set formatOnSave to false locally in .vscode/settings.json.

# Try reinstalling Prettier

Another thing you can try is to reinstall the Prettier extension:

1. Click on Extensions in the left sidebar.

• You can also open the Extensions menu by pressing:
  • Ctrl + Shift + X on Windows or Linux.
  • Command + Shift + X on macOS.

2. Type Prettier, click on the cogwheel and select Uninstall.

3. After you uninstall the extension, you will be prompted to reload VS Code.
4. Reload the IDE and click on the Install button to install the extension.