Prettier is an opinionated code formatter very popular in web development. It makes sure your code looks good and easy to read through. Don’t mistake Prettier with ESLint, which can also somewhat format your code, but mostly intended to pointing out coding convention violations. In other words, ESLint defines the code conventions while Prettier performs the auto-formatting based on the ESLint rules.
Prettier can be integrated with VSCode so to automatically format code on file save or committing to a version control system. This can simply be done by installing Prettier extension. On a few occasions, you may have to do a few more steps to get it working.
This article is going to show you a few things you can do when Prettier suddenly stops working with VSCode.
Set Prettier as Default Formatter
VSCode have a huge ecosystem of extensions, which includes numerous formatters for multiple different programming languages. For example, there are Beautify, JS-CSS-HTML Formatter, HTML Format and of course Prettier built just for formatting HTML files.
Follow the steps below to make sure that Prettier is set as the default formatter:
- In VSCode, open a HTML/JS file and open the Command Palette by selecting View > Command Palette or press Ctrl+Shift+P and search for Format Document With…
- In the drop-down menu, select Config Default Formatter, then choose Prettier – Code formatter.
Set Prettier as preferred formatter
If the setting above does not solve the problem, you may need to set Prettier as preferred formatter in VSCode settings. Follow the steps below to do that.
- Open up VSCode settings in UI mode by selecting File > Preferences > Settings or press Ctrl + ,.
- Input “formatter” in the search box. Once you see Editor: Default Formatter section, select . This setting allows you to define a default formatter which takes precedence over all other formatter settings.
Note : If it doesn’t work, you may have to reset VSCode settings before repeating the aforementioned steps. Also, format on save is a nice setting which you can enable after setting Prettier to be default.
Disable and re-enable Prettier extension
At first, I didn’t believe this to be a viable solution, but users across online forums have reported that disabling and re-enabling Prettier does solve their problems. If you’ve tried all the methods above without success, this may do the trick.
If you knew how to install extensions in VSCode, disabling/enabling an extension should be obvious. Simply search for Prettier in the Extension tab, click the “gear” button and select either Disable/Enable.
We hope that the article offer useful information on how to fix Prettier in VSCode. You may want to check out our other guides on how to use RegEx in VSCode, Handle merge conflicts and Quickly create HTML Boilerplate in VSCode. All our other VSCode tutorials can be found at VSCode Tutorials page.
If you have any question, don’t hesitate to let us know in the comments section below.