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.

Corvese

Do you have prettier as a dependency of this project? – Arbitration

I just had to restart the VS Code. – Catechetical

Answer 1

Update 2024

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.

Corvese

This works; however, how can we apply this to all projects? Do we have to create a .vscode folder with a settings.json file every time? – Codycoe

@AnthonyAvila You can modify VSCode settings globally by pressing Ctrl +, then search the typescript – Corvese

this worked but this seem to be the default behaviour with formatOnSave flag, I have to set typescript formatter as prettier to get the desired behaviour – Glossographer

Answer 2

Edit setting with following in settings.json of VScode

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

Logorrhea

In case you are wondering how to access settings.json -> https://mcmap.net/q/21012/-how-to-open-visual-studio-code-39-s-39-settings-json-39-file – Ruthannruthanne

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

This worked - thank you - but I don't understand why I had to specifically add the block for typescriptreact when I already had "editor.defaultFormatter": "esbenp.prettier-vscode" set at both a global and workspace level. – Aricaarick

You can also choose Open User Settings (JSON) – Toothwort

Answer 3

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" }

Sunshinesunspot

worked for me 👍 – Everard

This is the best and most useful answer! for this question – Marrissa

for me vscode prettier doesn't format .ts file, so "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } helps... thanks – Keratoplasty

Answer 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.

Dinka

For some reason this was working for me for .js files only. But then after I also deactivated TypeScript > Format: Enable it started working for my .tsx files as well. – Polycotyledon

Answer 5

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

Simplify

Answer 6

My Usage

The way I set this up is to use eslint's .eslintrc.json file. First of all, in the "extends" array, I've added

"plugin:@typescript-eslint/recommended"

and

"prettier/@typescript-eslint"

Then, I've set "parser" to "prettier/@typescript-eslint"

Finally, in "plugins" array I've added "@typescript-eslint".

You'll need to grab a couple of NPM packages (install with the -D option):

@typescript-eslint/eslint-plugin
@typescript-eslint/parser

---

For reference, my entire .eslintrc.json file:

{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./src/tsconfig.json",
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "jest"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

Hope this helps.

Radiancy

Answer 7

On my side simply adding the two lines in the config file didn't work but deactivating the Typescript > Format: Enable option in settings worked.

Soleure

This fixed this issue for me! Not sure why, as it's counterintuitive. I'm using the VSCode prettier extension and have my User [Javascript] Default Formatter pointing to that (Prettier). That was working for .js files. But it was not working for .tsx files - until I deactived TypeScript > Format: Enable. – Polycotyledon

Answer 8

After setting Prettier as the default formatter in Vs-code and checking 'format on save' it still was not working for me. What finally did it was deleting and then recreating my project's .prettierrc file.

Pouter

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Axolotl

Answer 9

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

Outsail

The comma syntax doesn't seem to work unfortunately, had to go with the separate objects, as suggested in other answers. – Forbis

Answer 10

A settings.json like the below would work. typescriptreact is so-named because .jsx/.tsx are JavaScript/TypeScript syntax extensions introduced by React.

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

Fisken

Answer 11

If the above two lines added to your settings.json did not resolve the issue, you can go to Menu -> Preferences -> Settings and search for prettier require config and disable it, like so:

Sihun

Answer 12

Perhaps helpful to someone - if with all the above, still no luck, you may want to restart VSCode or from command palette (⌘CMD + ⇧Shift + P) and fire up "Restart ESLint Server" - that shd do, then :)

Tybalt