Prettier Autoformat for TypeScript not Working

#typescript #react #vscode #javascript

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! :-)

Latest comments (19)

Phreak Castic • Jul 24 '24

Wow this article just saved me !!!

Rawdyn Nutting • Apr 4 '24

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!

Vlasa Andrei • May 10 '22

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!