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

Top comments (19)

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!