CODEWITHSUNDEEP
visual-studiovscode-extensionsprettierprettier-vscode
Antônio B.
Antônio B.

Reputation: 31

Prettier shows a red button and doesn't work

I am trying to format my code using Prettier, but when I try to format it by saving the file, by clicking "Format document with" or by any other way it just doesn't format and the Prettier button turns red and appears this ! icon. I reinstalled VS Code and Prettier hundreds of times. Any idea of how I can fix this?

Here are the images of what is happening:

Image of the red button: Image of the red button

When I click, it returns to its normal color, but nothing happens

Upvotes: 1

Views: 979

Answers (2)

jimmyNames
jimmyNames

Reputation: 162

I followed these steps suggested by @sanjarcode but additionally, and probably more relevant is that I had not yet made Prettier my default formatter.

So I:

  • Installed prettier as a Dev dependency
  • Created an empty .prettierrc containing {}
  • Pressed cmd and , to open VS Code settings and searched for "default formatter". I then set this to Prettier - Code formatter.

From then the Red button / issues warning was no more as I had previously set my formatting to work on save and saved any files it was showing in.

Upvotes: 0

sanjarcode
sanjarcode

Reputation: 570

There are two cases here, you're either working on a:

  1. non-Node project (doesn't have package.json) - delete any unnecessary package.json files from current folder and immediate parent folders.
  2. Node.js project (contains package.json file) - Run npm install, or npm install prettier --save-dev (in the terminal at the folder level) if it still doesn't work.

I had the same problem. In my case, I had a useless package.json file in the parent folder, which was causing all the issue. I was working on a simple HTML, CSS and JS project.

Upvotes: 0

Related Questions