For me Prettier has been doing an awesome job when auto-formatting JavaScript code on save. However, when using TypeScript files with React/JSX (.tsx) it didn’t work. Here is how to fix it:
First, press shift + cmd + p (Mac), enter “settings” and choose “Preferences: Open Settings (JSON)”. Then add the following:
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
Make sure you have set "editor.formatOnSave": true
That’s it! Happy coding! :-)
Top comments (19)
Thanks a lot! I watched about 3 tutorials and read some blogs on how-to, I completely missed that you need typescriptreact added in the settings so it would work for .tsx too. I can not thank you enough!
Thank you so much!
Thank you so much!
It worked! thank you
Thank you .. 😊 .
Thank you.
how to do on the windows10?
OPen the vscode and press Ctrl + P
Ctrl + Shift + P
Wow, this was exactly what I was looking for!
Are you sure .tx is Typescript and not .ts ?
Actually it's supposed to be .tsx :-) (fixed in post)
Good catch tho! Thanks for pointing out.
After an embarrassing amount of time trying to figure out why prettier-plugin-tailwindcss was not working just for tsx files, I came across this post.
This was indeed the solution so thank you!