Need help with my JSX formatting!

I need help with my JSX formating.

here's a picture of the code before saving it
https://prnt.sc/p5zs9c

Picture of messy code after saving it
https://prnt.sc/p5zt25

It gives messy format to the code.

I am using Prettier and my settings.json file includes following:

{
"window.zoomLevel": 0,
"php.validate.executablePath": "C:/php/php.exe",
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"terminal.integrated.shell.windows": "C:\Program Files\Git\bin\bash.exe",
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
],
"prettier.jsxBracketSameLine": true
}

Comments

[ray_v101]

this is my config
{
"workbench.iconTheme": "vscode-icons",
"workbench.colorTheme": "Slack Theme Dark Mode",
"window.zoomLevel": -1,
"terminal.integrated.shell.linux": "/bin/bash",
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"explorer.confirmDelete": false,
"files.autoSave": "off",
"explorer.confirmDragAndDrop": false,
"[javascript]": {},
"editor.formatOnSave": true
}
i am on linux

[ray_v101]

can you select react-javascript at the bottom right corner and then try

[Bishanta]

Thank you soo much for your replies ray, I had previously disabled prettier for this but I tried you config and enabled it. It worked fine.

[Bishanta]

Actually I finally figured out the culprit it was the extension called 'JS-CSS-HTML Formatter'. Prettier didn't had anything to do with it. I disabled that extension. Now I know why it has only 2 star review.

[ray_v101]

haha great to hear it works now

[ray_v101]

try these lines:
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {},
"editor.formatOnSave": true