How do I enable automatic prettier formatting for .jsx files in VS Code?

user_263268 0
Viewed 5896

I have Prettier set up automatically formatting .js, .vue and other files on save. However, for some reason it is not triggering for .jsx files.

Clicking the "Prettier" item in the status bar shows:

["INFO" - 10:48:25 am] Enabling prettier for range supported languages
[
  "graphql",
  "javascript",
  "javascriptreact",
  "json",
  "typescript",
  "typescriptreact"
]

which seems correct.

What am I missing?

prettier jsx visual-studio-code
1 Answers

Ah, I found it. In VS Code's settings.json, each file type has to be individually enabled for formatOnSave:

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

 }

Note javascriptreact as the identifier for JSX.

user_2632680
Related