DEV Community

Timo Ernst
Timo Ernst

Posted on • Originally published at timo-ernst.net

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" }
Enter fullscreen mode Exit fullscreen mode

Make sure you have set "editor.formatOnSave": true

That’s it! Happy coding! :-)

Top comments (19)

Collapse
 
bigvl profile image
Vlasa Andrei

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!

Collapse
 
duyetvu2001 profile image
DuyetVu2001

Thank you so much!

Collapse
 
flashblaze profile image
Neeraj Lagwankar

Thank you so much!

Collapse
 
lakinduchandula profile image
lakinduchandula

It worked! thank you

Collapse
 
saroj8455 profile image
Saroj Padhan

Thank you .. 😊 .

Collapse
 
goran7777 profile image
Goran

Thank you.

Collapse
 
prettydev profile image
Max

how to do on the windows10?

Collapse
 
saroj8455 profile image
Saroj Padhan

OPen the vscode and press Ctrl + P

Collapse
 
timo_ernst profile image
Timo Ernst

Ctrl + Shift + P

Collapse
 
oihamza profile image
Hamza

Wow, this was exactly what I was looking for!

Collapse
 
shubhamverma profile image
Shubham Verma

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

Collapse
 
timo_ernst profile image
Timo Ernst • Edited

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

Collapse
 
rawdyn profile image
Rawdyn Nutting

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!