Prettier Autoformat for TypeScript not Working

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

Comments

[Shubham Verma]

Are you sure .tx is Typescript and not .ts ?

[Timo Ernst]

Actually it's supposed to be .tsx :-) (fixed in post)
Good catch tho! Thanks for pointing out.

[Max]

how to do on the windows10?

[Timo Ernst]

Ctrl + Shift + P

[Saroj Padhan]

OPen the vscode and press Ctrl + P

[Goran]

Thank you.

[Saroj Padhan]

Thank you .. 😊 .

[Hamza]

Wow, this was exactly what I was looking for!

[lakinduchandula]

It worked! thank you

[Neeraj Lagwankar]

Thank you so much!

[DuyetVu2001]

Thank you so much!

[Threadripper92]

Thanks for this.

[smboy86]

it works...
thanks