Frequently getting warnings even if the code formatting is perfect.

[codemilan]

I simple created react app using 'create-react-app' command generating default boilerplate code, but the linter gives below warning message for below mentioned code below warning message :

[jshint] Unclosed regular expression. (E015) [jshint] Unrecoverable syntax error. (50% scanned). (E041)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1> // warning is here underlined in </h1> closing tag.
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

[RMacfarlane]

Thanks for reporting! I think this is a duplicate of https://github.com/Microsoft/vscode-jshint/issues/29. JSHint doesn't recognize the jsx syntax of the return statement. One workaround for now would be to add /* jshint ignore:start */ before the return and /* jshint ignore:end */ after the end of the return.

Closing this as a duplicate.

[lionroy]

@RMacfarlane 'One workaround for now would be to add / jshint ignore:start / before the return and / jshint ignore:end / after the end of the return.; ---> add it where ? and why this code is commented out? ty

[RMacfarlane]

Add it around the jsx (the html-like code), like so:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
/* jshint ignore:start */
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
/* jshint ignore:end */
  }
}

export default App;

JSHint will read comments beginning with jshint as configuration options. From http://jshint.com/docs/:

In addition to using configuration files you can configure JSHint from within your files using special comments. These comments start with a label such as jshint or globals (complete list below) and are followed by a comma-separated list of values.

Since JSHint only understands normal js and not the html tag syntax of jsx, adding the comments makes it skip the sections that aren't just javascript.

[ghost]

Any elegant solution? I think this solution quite dummy as you need to add this code segment at every render function.

[adamaslan]

Any updates on this issue?