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.

Do you have `prettier` as a dependency of this project? – Emile Bergeron May 11 '20 at 14:17 — Emile Bergeron, May 11 '20 at 14:17
I just had to restart the VS Code. – keremistan Nov 29 '22 at 14:35 — keremistan, Nov 29 '22 at 14:35

score 203 · Answer 1 · edited Feb 11 '22 at 09:56

203

Edit setting with following in settings.json of VScode

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

edited Feb 11 '22 at 09:56

S. Hesam

5,266
3
37
59

answered Aug 15 '20 at 19:26

iNeelPatel

2,283
2
12
10

8

In case you are wondering how to access settings.json -> https://stackoverflow.com/a/65909052/5888998 – Benjamin Castor Oct 14 '21 at 12:56
5

To open settings follow these steps: Shift + CMD + P, Type "settings", Click on "preferences: open settings(JSON)" – Uche Azinge Oct 17 '21 at 08:56
8

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. – Axesilo Jul 30 '22 at 18:39

score 76 · Answer 2 · answered Nov 01 '20 at 15:12

76

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

answered Nov 01 '20 at 15:12

deadbyte

993
8
11

2

worked for me – VINIT CHURI Feb 13 '22 at 03:56
1

This is the best and most useful answer! for this question – Emeka Orji Aug 27 '22 at 09:02

S. Hesam · Accepted Answer · 2023-01-09T12:01:28.923

21

Update 2023

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.

edited Jan 09 '23 at 12:01

answered Feb 11 '22 at 10:01

S. Hesam

5,266
3
37
59

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? – Anthony Avila May 30 '23 at 03:32
@AnthonyAvila You can modify VSCode settings globally by pressing `Ctrl +, ` then search the typescript – S. Hesam May 30 '23 at 09:07

score 15 · Answer 4 · answered Jul 26 '21 at 14:32

15

An easy UI alternative to what has been proposed already:

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

answered Jul 26 '21 at 14:32

edin0x

275
3
6

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. – Woodchuck Mar 16 '23 at 19:51

score 5 · Answer 5 · answered May 01 '21 at 02:46

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

score 3 · Answer 6 · answered May 11 '20 at 14:14

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.

score 2 · Answer 7 · answered Nov 11 '22 at 23:15

2

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.

answered Nov 11 '22 at 23:15

Ted's Projects

99
1
7

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`. – Woodchuck Mar 16 '23 at 19:50

score 0 · Answer 8 · answered Oct 18 '22 at 15:13

0

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

answered Oct 18 '22 at 15:13

developper-ta

21
2

score -1 · Answer 9 · answered Jul 13 '22 at 08:19

-1

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

answered Jul 13 '22 at 08:19

Scott Agirs

599
6
14

vscode prettier doesn't format .tsx file

9 Answers9

Linked