vscode 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 have been writing to React with Typescript. So I need to configure for Prettier to format .tsx files.

Answer 1

Update 2025

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.