Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I fix linting error on jsx closing tags : "unclosed regular expression"?

(PS none of these SO questions (with inaccurate titles) solved, or addressed, this issue: React Linting: Unclosed Regular Expression, unclosed regular expression, React JSX error : Unclosed regular expression)

How do I fix linting error on jsx closing tags : "unclosed regular expression" ?

For example, this code snippet runs fine, but causes a SublimeLinter Error:

class Users extends React.Component {
  render() {

    var friends = this.props.list.filter(function(user){
        return user.friend === true;
    });
    var nonFriends = this.props.list.filter(function(user){
        return !user.friend;
    });

    return (
      <div>
        <h1>Friends</h1>
        <ul>
          ...
        </ul>
      </div>
    )
  }
}

The linter balks at the </h1> closing JSX tag, thinking it's the start of a regular expression.
1-2 of 2 errors: Unclosed regular expression; Unrecoverable syntax error. (42% scanned), 2 lines, 25 characters selected

Relevant packages I have installed in Sublime Text3:
SublimeLinter, SublimeLinter-contrib-eslint, JSHint, Babel

edit:
I just added the package "JSX", but that didn't help.
I've searched for the "sublimeLinter-jsxhint" package, but cannot find it.

like image 802
SherylHohman Avatar asked Aug 16 '17 18:08

SherylHohman


1 Answers

The extension runs jshint on the complete jsx file, and jshint doesn't support jsx syntax and its features. I simply turned off the JShint using -> (Code-> Preferences-> Settings-> User extensions-> JSHint configuration-> JSHint:Enable tick box-> Off)

One solution would be manually turning off jshint around the functions returning HTML using /* jshint ignore: start */ and /* jshint ignore: end */.

like image 140
Samrath Singh Kalra Avatar answered Oct 20 '22 15:10

Samrath Singh Kalra