Search code examples
visual-studio-codejsxprettier

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


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?


Solution

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