'Weird formatting when saving react project file in vscode

I get an error after saving the file, the code automatically formats like the code below

error opening and closing tags, automatic carriage return, auto-add {" "} ).

Hope you can help.

enter image description here



Solution 1:[1]

Initially, I've struggled a lot with this as well. Follow these steps:

  1. Press Ctrl + shift + P to open search fields.

  2. Type settings.json. Don't press enter until the next step.

  3. Select `Open Workspace Settings(JSON). This should open the workspace settings file in json format. It maybe empty for you.

enter image description here

Now paste this json inside the file.

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

Save the file and the error should be gone for this particular project. But you have to do this for every React project. For an overall solution to this problem, you have to install a linter. Read more on that here.

I hope it helps!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1