Beautify makes JSX ugly please look at the below scenario. I have tried a solution from a previous question with no success

Question

The beautify extension in VSCode gives the below output. please find the code below.

<div className="container">
            <span className="text-muted">
                 An amazing place to buy medicines.
            </span>
        </div>

When i attempt to beautify the above code i get the below output.

    < div className = "container" >
        <
        span className = "text-muted" >
        An amazing place to buy medicines. <
        /span> <
        /div>

Please suggest a solution? We are looking to implement standard coding practices in our project seems to have hit a roadblock here.

Answer 1

Have you tried this? : https://stackoverflow.com/a/61740593/260229

"files.associations": {
    "*.jsx": "javascriptreact"
}