Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prettier doesn't format .tsx file

I've used the Prettier extension in the visual studio code editor for a long time, but recently I am writing to React with Typescript. So I need to configure for Prettier to format .tsx files.

like image 905
S. Hesam Avatar asked May 11 '20 14:05

S. Hesam


People also ask

How do I use Prettier auto format?

Command+Shift+P to open it. It will show search bar with right arrow >, just start typing Format Document With, and you will come up with results as below. Select Format Document With and again you will be asked for few options. Select Prettier — Code Formatter and your file will be formatted.

How do I fix Prettier in VSCode?

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.


4 Answers

Edit setting with following in settings.json of VScode

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
like image 160
iNeelPatel Avatar answered Oct 19 '22 21:10

iNeelPatel


Expanding on iNeelPatel's answer, I had to add two lines to VSCode JSON settings:

"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
like image 39
deadbyte Avatar answered Oct 19 '22 19:10

deadbyte


An easy UI alternative to what has been proposed already:

  1. Search for "default formatter" in your vscode settings.
  2. Click on "Text Editor" and set the default formatter to "Prettier - Code formatter".
  3. Enjoy.
like image 7
edin0x Avatar answered Oct 19 '22 19:10

edin0x


This will give perfect solution

"Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null."

https://github.com/microsoft/vscode/issues/108447#issuecomment-706642248

like image 6
Web dozens Avatar answered Oct 19 '22 21:10

Web dozens