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
settings.json file should look something like this:
In this example, the
settings.json file also includes some other common settings:
"editor.tabSize": 2sets the tab size to 2 spaces.
"editor.wordWrap": "on"enables word wrap.
"editor.autoIndent": "full"enables automatic indentation.
"editor.formatOnSave": trueenables 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
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
Step 4: Save and Close settings.json
After you’ve made these changes, save and close the
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.
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.