Why is Prettier not working on save VS Code?

When VS Code saves your code, Prettier may not automatically format it. Common causes include:

1. Prettier extension not installed or not enabled

First, verify that the Prettier extension is installed in VS Code. Search and install it from the VS Code Extensions Marketplace. After installation, ensure the extension is enabled.

2. Not configured as the default formatter in VS Code

After installing and enabling Prettier, configure it as the default code formatter in VS Code settings. Follow these steps to configure:

• Open settings (shortcut: Ctrl + , or Cmd + ,)
• Search for 'Default Formatter' and select esbenp.prettier-vscode as the default formatter.
• Ensure 'Format On Save' is checked so Prettier automatically formats the code upon saving.

3. No Prettier configuration file in the project

If the project lacks a .prettierrc or similar Prettier configuration file, Prettier may not behave as expected. Ensure the project root directory contains a Prettier configuration file, or configure global Prettier rules in VS Code user settings.

4. Code file format not supported by Prettier

Prettier supports multiple file formats, such as JavaScript, TypeScript, CSS, and Markdown. Ensure the file format you're editing is supported by Prettier. If the format is unsupported, Prettier will not format the file.

5. Syntax errors present

If syntax errors exist in the code file, Prettier may not parse and format the code correctly. Check for syntax errors in the code and fix them before saving.

Example

Suppose you are editing a JavaScript file in VS Code and want it to be automatically formatted on save. You need to follow these steps:

• Ensure the Prettier extension is installed in VS Code.
• Configure Prettier as the default formatter in VS Code settings and ensure 'Format On Save' is enabled.
• Add a .prettierrc file in the project root directory defining the required code style settings.
• Ensure the JavaScript code has no syntax errors.

After following these steps, Prettier will automatically format the JavaScript file upon saving, maintaining consistent code style. This setup ensures code aesthetics and consistency, improving readability and maintainability.