Prettier doesn't format .tsx file

Question

I've used the Prettier extension in the visual studio code editor for a long time, but recently I am writing to React with Typescript. So I need to configure for Prettier to format .tsx files.

Solution 1

Edit setting with following in settings.json of VScode

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Solution 2

Expanding on iNeelPatel's answer, I had to add two lines to VSCode JSON settings:

"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }

Solution 3

This will give perfect solution

"Same thing happened to me just now. I set prettier as the Default Formatter in Settings and it started working again. My Default Formatter was null."

https://github.com/microsoft/vscode/issues/108447#issuecomment-706642248

Solution 4

An easy UI alternative to what has been proposed already:

1. Search for "default formatter" in your vscode settings.
2. Click on "Text Editor" and set the default formatter to "Prettier - Code formatter".
3. Enjoy.

Solution 5

Create a .vscode folder at the root of your project. In the .vscode folder, create the settings.json file, and in it, write this section:

{
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

Don't forget to add .vscode in the .gitignore file.

View more solutions

Comments

[Emile Bergeron]

Do you have prettier as a dependency of this project?

[smbergin79]

You just made my day!

[Dylan Kapp]

In case you are wondering how to access settings.json -> stackoverflow.com/a/65909052/5888998

[Uche Azinge]

To open settings follow these steps: Shift + CMD + P, Type "settings", Click on "preferences: open settings(JSON)"

[chichi]

THANK YOU!!!!!!

[VINIT CHURI]

worked for me 👍