Prettier not working on save from within Visual Studio Code

ONLINECAST

2 min read

·

05-10-2024

6

0

Share

Why Prettier Isn't Formatting Your Code on Save in VS Code: A Troubleshooting Guide

Problem: You've installed Prettier, configured it in VS Code, but it's not automatically formatting your code on save. 🤯

Rephrased: Imagine a scenario where you're meticulously crafting code, but your code editor isn't cleaning up after you! This can lead to inconsistent formatting and a less-than-ideal coding experience. This article guides you through common causes and solutions to fix this issue.

Common Scenarios and Their Solutions

Scenario 1: Missing or Incorrect Configuration

Original Code:

// settings.json (example)
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Analysis: Prettier needs to be correctly configured within VS Code. This involves enabling formatting on save and specifying Prettier as the default formatter.

Solution:

1. Check Your settings.json: Open your VS Code settings (File > Preferences > Settings) and ensure you have the following:
   • editor.formatOnSave: set to true
   • editor.defaultFormatter: set to esbenp.prettier-vscode
2. Restart VS Code: After modifying the settings, restart VS Code for the changes to take effect.

Scenario 2: Conflicting Extensions

Analysis: Other VS Code extensions, especially linters or formatters, might be conflicting with Prettier's functionality.

Solution:

1. Disable Suspect Extensions: Temporarily disable any extensions that might be interfering with Prettier. A good starting point is to disable linters like ESLint or other formatters like vscode.typescript-language-features.
2. Test Format on Save: Save a file and observe if the formatting now works. If it does, re-enable extensions one by one to identify the culprit.

Scenario 3: Project-Level Configuration Missing

Analysis: If you're working on a project with a .prettierrc or .prettierrc.json file, ensure it's correctly configured and recognized by VS Code.

Solution:

1. Verify File Existence: Check your project root for a .prettierrc or .prettierrc.json file.
2. Check File Contents: Ensure the file contains valid Prettier configuration options. Refer to the official Prettier documentation for details: https://prettier.io/docs/en/options.html
3. Restart VS Code: Restart VS Code for changes to take effect.

Scenario 4: Language Support

Analysis: If you're working with a specific language that doesn't have native Prettier support, you might need additional extensions.

Solution:

1. Install Language Support: Install Prettier plugins for your language. For example, you might need a Prettier plugin for languages like JSON, YAML, or Markdown. Search for "prettier" in the VS Code Extensions marketplace.

Additional Tips

• Clear VS Code Cache: Sometimes clearing the VS Code cache can resolve configuration issues. Go to File > Preferences > Settings and search for "Clear Cache".
• Check Prettier Version: Ensure you're using the latest version of Prettier. Run npm install --save-dev prettier or yarn add prettier --dev in your project's terminal to update.
• Consult Prettier Documentation: Explore the official Prettier documentation for detailed information and troubleshooting tips: https://prettier.io/docs/en/index.html

Conclusion

Following these troubleshooting steps will help you diagnose and resolve the common reasons why Prettier might not be formatting your code on save in VS Code. Enjoy a smooth and consistent coding experience with Prettier!