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

Question

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?

Answer 1

I tried to follow Dustin's and STRML's advice on this thread, and here's what worked best for me.

Development Setup

I use Sublime Text with SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint.
These are very nice plugins that let me see mistakes when I save the file, both for JS and JSX files:

These plugins respect your project's .jshintrc and I can't recommend them enough.

Make sure to follow installation instructions for all three packages, or they won't work:

• Installing SublimeLinter is straightforward (instructions);

• SublimeLinter-jshint needs a global jshint in your system (instructions);

• SublimeLinter-jsxhint needs a global jsxhint in your system, as well as JavaScript (JSX) bundle inside Packages/JavaScript (instructions).

You can configure the linter to execute every few seconds, on file save, or manually.

Build Step, Commit Hook, etc

We're using JSHint as part of our Git workflow and as a build step to enforce the guidelines. We could have used jsxhint but we wanted to keep using grunt-contrib-jshint so this wasn't an option.

Right now, we're running normal jshint as a build step after react transformation, so it just processes the output JS files.

It would be cool if somebody forked grunt-contrib-jshint and made a version that works with jsxhint, but it doesn't look like an easy task to me. (Update: somebody did just that but I haven't tested it.)

Ignoring Violations in Generated Code

JSX compiler generates code that breaks a few our conventions.

I didn't want to use ignore:start and ignore:end as suggested by Dustin since this would effectively disable all linting inside render methods. It is a bad idea in my book. For example, excluding render method from linting makes linter think I don't use some of the libraries and child components that I declare with require at the top of the file. Therefore, the need to ignore things spreads from render method to the rest of the file, and this defeats the purpose of ignore:start completely.

Instead, I explicitly decorate each render method with three JSHint options that JSX compiler (currently) breaks for me:

render: function () {   /* jshint trailing:false, quotmark:false, newcap:false */ } 

This is sufficient in my case; for your .jshintrc this may need some tuning.