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.
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.
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.
Edit setting with following in settings.json
of VScode
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
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" }
An easy UI alternative to what has been proposed already:
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With