Coder Perfect

Why doesn’t Prettier format code in Visual Studio Code?

Problem

I moved to Visual Studio Code in my Nuxt application, where ESlint and Prettier are installed and enabled.

When I open a.vue file and choose Format Document by pressing CMD+ Shift + P, my file is not formatted at all.

My .prettierrc settings:

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

I can’t manually format all of my source code lines because there are so many. What am I doing incorrectly?

Asked by Billal Begueradj

Solution #1

After a lot of irritation with Prettier not working in VSCode, I figured out how to fix it.

This magically solved the problem for me.

Depending on your situation, this could be beneficial…

Answered by Miha

Solution #2

If trying what @Simin Maleki suggested doesn’t work, it’s possible that your default formatter isn’t set:

File > Preferences > Settings > Search for "default formatter" 

Make sure the Editor: Default Formatter field contains esbenp.prettier-vscode and that all of the languages listed below are checked. This was the solution to my problem.

Make sure your save format is enabled as well:

Answered by lbragile

Solution #3

Prettier can also format your files when they are saved.

Installing and enabling, on the other hand, does not result in functionality.

In VSCode, you must enable “format on save”: Formatting >> User >> Text Editor >> Preferences

Answered by Simin Maleki

Solution #4

When there are syntax mistakes in the code, prettier will sometimes stop operating. By clicking the x icon next to Prettier in the lower right corner, you can see the faults.

Answered by FacePalm

Solution #5

My problem is solved by disabling and re-enabling the prettier extension.

Answered by Ymin Hu

Post is based on https://stackoverflow.com/questions/52586965/why-does-prettier-not-format-code-in-vs-code