JSX element 'h1' has no corresponding closing tag

Question

I am using Visual Studio Code to learn ReactJs, but I don't know why for HTML code I am getting "JSX element has no corresponding closing tag" error. Please see the picture.

Code Before I save the file in Visual Studio Code IDE

import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {
    render() {
        return ( 
            <h1>Hello React</h1>
        )
    }
}

ReactDOM.render( < HelloWorld / > , document.getElementById('root'));

Code after I save the file in Visual Studio Code IDE

import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {
    render() {
        return ( <
            h1 > Hello React < /h1>
        )
    }
}

ReactDOM.render( < HelloWorld / > , document.getElementById('root'));

Answer 1

I had a similar issue. Each time I saved my code was reformatted resulting in a similar the error to that posed in the question. I resolved it by selectively disabling code formatting extensions I'd installed in VS Code. I found disabling the "Beautify" extension (by HookyQR) resolved the problem.

Note:I found you can disable an extension for either all VS Code instances or just a Workspace, allowing you keep it active on a Workspace by Workspace basis.

Answer 2

In my case I change the file extension for js to ts and change it back to js and that fix the issue. I think vs code is confused between typeScript and JavaScript.