Format *.tsx files on save in VS Code

Question

In settings.json it is possible to only format *.ts files with:

"[typescript]": {
    "editor.formatOnSave": true
}

but I can't get it to work for *.tsx files.

David · Accepted Answer · 2020-03-30T14:06:44.397

64

"[typescriptreact]": {
    "editor.formatOnSave": true
}

See also Language specific editor settings

edited Mar 30 '20 at 14:06

answered Apr 05 '19 at 14:24

David

4,191
2
31
40

4

This doesn't work as of Oct 15 2020, any ideas what has happened? – James Oct 15 '20 at 17:53
Hmm I just checked and it seems to be working for me. Are you missing an update? Do you have it set to false somewhere else? Do you have the formatter disabled? – David Oct 15 '20 at 18:01
8

Finally got it to work, I needed to run the formatted manually first before it would do it on save. There were conflicting linters trying to lint the same file but it threw no errors. The above snippet needs the explicit setting of which linter you want it to use as well if you have multiple installed. – James Oct 16 '20 at 11:43
3

Yes, I also faced same problem. To setup default linter open the command palette Ctrl+Shift+P and configure the default formatter. – Jaskaran Singh Feb 08 '21 at 13:47
To follow-up on @JaskaranSingh, Ctrl-Shift-P, start typing and then select "Format Document", and it'll ask for a default formatter. After that, the "formatOnSave" setting will pick up. – ruffin Jun 26 '23 at 21:04

score 14 · Answer 2 · answered May 01 '21 at 13:00

14

You can install Prettier Code formatter extension and add these two options in your settings.json file

{
  "typescript.format.enable": false,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

answered May 01 '21 at 13:00

Safwat Fathi

758
9
16

this worked unlike other in my case. – jsbisht Jan 12 '22 at 18:54
3

In my case, it was already added to the settings.json. For it to work with `.tsx` just change `"[typescript]"` to `"[typescriptreact]"`. – DarthCucumber Feb 14 '22 at 10:53

score 7 · Answer 3 · answered Aug 19 '22 at 02:48

In my case, I added both in my settings.json as I noticed the .ts file is not formatted when I save, here's the updated settings:

"[typescript]": { // for .ts files
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},
"[typescriptreact]": { // for .tsx files
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},
"editor.codeActionsOnSave": { // apply ESLint
    "source.fixAll.eslint": true
},

score 6 · Answer 4 · answered Mar 15 '20 at 21:14

6

Alternative way with using a plugin like 'ESLint':

"[typescriptreact]": {
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

answered Mar 15 '20 at 21:14

TheRemoteCoder

172
2
12

score 2 · Answer 5 · answered Jan 27 '23 at 21:11

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode", /// TSX auto format on save Prettier
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": { /// TSX auto format on save ESLint
      "source.fixAll.eslint": true
    }
  },

score 0 · Answer 6 · answered May 23 '23 at 09:22

In my case, I messed up with keyboard shortcuts.

Problem faced: Format on save was not working.
Solution: I opened my keyboard shortcut json file and searched for cmd+s and found ther was another shortcut that I created for split right that contained cmd+s cmd+r.
Summary: Once I removed keyboard shortcuts started from cmd+s from all custom shortcuts that I created. It worked.

Format *.tsx files on save in VS Code

6 Answers6