Question

112

Getting Facebook's react.js library JSX syntax to play nicely with jslint?

rated 0 times [ 119] [ 7] / answers: 1 / hits: 23649 / 11 Years ago, sat, june 22, 2013, 12:00:00

I am playing around with the Facebook's react.js library. I am trying to use their JSX syntax which describes creating a view in the following way.

/** @jsx React.DOM */

var HelloMessage = React.createClass({

  render: function() {

    return <div>{'Hello ' + this.props.name}</div>;

  }

});



React.renderComponent(<HelloMessage name=John />, mountNode);

JSLint obviously does not like this (expected an identifier and instead saw ' <'; - JavaScript syntax error), so how do I get around this in my .jshintrc file?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

armandoh

Add To Favorites

Follow

Total Points: 208

Total Questions: 94

Total Answers: 112

Location: South Sudan

Member since Sun, Jul 11, 2021

3 Years ago

answered 11 Years ago mari · Accepted Answer

(Update: This post is from 2013 and obsolete now.)

I use JSHint + JSX.

It shouldn't require a fork of JSHint, there should be a way to tell JSHint to disable all warnings for a block of code. Unfortunately there is no such way to disable all warnings, only a specific set of warnings, so I may end up submitting a pull request to add this, or change linters.

Update: We submitted a pull request which was accepted. To disable all warnings, add /*jshint ignore: start */ to start the section, and /*jshint ignore: end */ to end it.

As you noted, the workflow Facebook and Instagram use is to lint outside the IDE from the command line.

Your other option is to extract all your JSX templates into their own files, and make them a function of scope instead of existing inside an implicit lexical scope. We tried it out and didn't like the amount of boilerplate.

(Note: I am not affiliated with the React team.)