Prettier is not working in React Code and disappeared in status bar

Viewed 771

sorry if this question is dumb. I'm coming from Sublime Text and recently been using VSCode for my React projects. I noticed there was a Prettier status with tick or cross in the status bar but I've noticed it's not showing anymore and showing JavaScript Standard Style Instead. I've been trying to search for a way to make my Prettier works again by re-installing Prettier, install other extensions, all doesn't work at all.

The obvious sign I notice is printWidth option isn't working in my VSCode. I might have screwed up the configuration previously because of JS Standard but after nuked and re-installed VSCode it doesn't fix the issue at all. Any kind help or pointer is appreciated. Thanks in advance.

status bar not showing prettier

This is my .prettierrc.json. No other overrides.

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 80
}
1 Answers

Go to File -> Preference -> Settings and search for default formatter and select prettier - Code formatter

Or

In your vs code settings.json file add this "editor.defaultFormatter": "esbenp.prettier-vscode",

Related