Fix Prettier Extension Not Working for JSX in VS Code

Hello, fellow developer! Encountering issues with Prettier not formatting your JSX files in VS Code?

No worries, this guide is here to help you fix it in no time!

How to fix Prettier extension not working for JSX in VS Code?

Step 1: Open Visual Studio Code

In VS Code, press CTRL + SHIFT + P or CMD + SHIFT + P and search “Preferences: Open User Settings (JSON)”.

Step 2: Set Prettier as the Default Formatter

In the settings.json file, add the following lines to set Prettier as the default formatter for JavaScript React (JSX) and TypeScript React (TSX) files:

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

Your settings.json file should look something like this:

{
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "editor.autoIndent": "full",
    "editor.formatOnSave": true,
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

In this example, the settings.json file also includes some other common settings:

• "editor.tabSize": 2 sets the tab size to 2 spaces.
• "editor.wordWrap": "on" enables word wrap.
• "editor.autoIndent": "full" enables automatic indentation.
• "editor.formatOnSave": true enables automatic formatting on save.

These are just examples, and your settings.json file might include different settings based on your personal preferences or the needs of your project.

The important part for getting Prettier to work with JSX and TSX files are the lines that set "editor.defaultFormatter": "esbenp.prettier-vscode" for "javascriptreact" and "typescriptreact".

Step 3: Enable Format on Save

While you’re in the settings.json file, you can also set VS Code to automatically format your files when you save them. Add the following line to your settings.json file:

"editor.formatOnSave": true

Step 4: Save and Close settings.json

After you’ve made these changes, save and close the settings.json file.

Step 5: Test Prettier

Now, open a JSX or TSX file and try making a change. When you save the file, Prettier should automatically format your code. If it doesn’t, there might be a conflict with another extension or a problem with your Prettier configuration.

Conclusion

And that’s it! Now Prettier should be back on track, tidying up your JSX files every time you save.

If you’re still facing issues, it could be a conflicting extension or a setting in your Prettier configuration.

Happy coding!

Learn More:

• Top 10 Best VS Code Extensions for React Developers