javascriptreactjsvisual-studio-codesyntax-errorautomated-refactoring

REACT JS code, after SAVE (CTRL+S) change all the right syntax to a totally wrong syntax. VSCODE

BEFORE SAVE

before ctrl s in react

AFTER

AFTER CTRL S IN REACT

this thing has never happened to me with languages like c++, etc...

in other cases it happens but for the better, for example my html code becomes more orderly and clean.

the interesting fact that the code works. despite more than 20 errors.

Solution

  • The problem is here:

    enter image description here

    See how the filename is App.js? That means that it will be automatically formatted for plain JavaScript.

    But what you have is not plain JavaScript - you're using JSX syntax, so you need to change the file extension. Name the file app.jsx, and make sure to change modules that import it as well if needed.

    Files that contain JSX syntax should have the file extension .jsx.

    Only files that have no JSX syntax in them can be named .js.

    Another option is to change the formatter for the file to React rather than just plain JavaScript, in the bottom right, eg

    enter image description here

    but fixing the file extension is a better solution.