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.

Answer 2

JsxHint and JSHint arent the best tools for linting JSX. JSHint does not support JSX and all JsxHint does is transforms JSX and then runs JSHint on the transformed code. I have been using (and would highly recommend) ESLint with the React plugin. This is better since Eslint can parse any Javascript flavor using custom parsers like esprima-fb or babel-eslint (see update below).

Sample .eslintrc file:

{
    "parser": "esprima-fb",
    "env": {
        "browser": true,
        "node": true
    },

    "rules": {
        "no-mixed-requires": [0, false],
        "quotes": [2, "single"],
        "strict": [1, "never"],
        "semi": [2, "always"],
        "curly": 1,
        "no-bitwise": 1,
        "max-len": [1, 110, 4],
        "vars-on-top": 0,
        "guard-for-in": 1,
        "react/display-name": 1,
        "react/jsx-quotes": [2, "double", "avoid-escape"],
        "react/jsx-no-undef": 2,
        "react/jsx-sort-props": 0,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/no-did-mount-set-state": 2,
        "react/no-did-update-set-state": 2,
        "react/no-multi-comp": 0,
        "react/no-unknown-property": 1,
        "react/prop-types": 2,
        "react/react-in-jsx-scope": 1,
        "react/self-closing-comp": 1,
        "react/wrap-multilines": 2
    },

    "ecmaFeatures": {
        "jsx": true
    },

    "plugins": [ "react" ],

    "globals": {
        "d3": true,
        "require": "true",
        "module": "true",
        "$": "true",
        "d3": "true"
    }
}

UPDATE

esprima-fb will soon be deprecated by Facebook. Use babel-eslint as a parser for eslint. A good place to know more about how you can setup Babel & Eslint to work with React is this Github project.

Answer 3

(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.)

Answer 4

See JSXHint, a wrapper around JSHint I wrote that lints the output from react-tools. This is a step up from ignoring a block of lines as it will actually lint the generated javascript.

It can be used with Sublime Text via SublimeLinter with this plugin.

Answer 5

Guys maintaining the repo are incredibly helpful. You just have to run it threw the JSX transform to produce valid javascript unless someone creates a fork of jshint. If there is enough interest, it might be put on the roadmap for future release of the react framework. Can look at the coversation thread here.

Answer 6

I use grunt + react-tools + jshint to lint the .js files built using react-tools. The output from react-tools is very good about keeping your spacing, indentation, etc, when converting your .jsx to .js, so it gives you an accurate file to lint against.

To setup, install grunt the normal way. Then install the grunt-contrib-watch, react-tools, grunt-react, and grunt-contrib-jshint.

npm install grunt-contrib-watch react-tools grunt-react grunt-contrib-jshint --save-dev

here is a sample grunt file:

'use strict';

module.exports = function (grunt) {
    // Project configuration
    grunt.initConfig({
        // Task configuration
        jshint: {
            options: {
                jshintrc: true,
            },
            react: {
                src: ['react/**/*.js']
            }
        },
        react: {
            files: {
                expand: true,
                cwd: 'react/',
                src: ['**/*.jsx'],
                dest: 'react/',
                ext: '.js'
            }
        },
        watch: {
            jsx: {
                files: ['react/**/*.jsx'],
                tasks: ['react', 'jshint:react']
            }
        }
    });

    // These plugins provide necessary tasks
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-react');

    // Default task
    grunt.registerTask('default', ['react', 'jshint:react']);
};

In this file, running "grunt" will compile your .jsx to .js and then lint the .js files. You can run "grunt watch" to run after every save.

Most of my usual .jshintrc settings work when running this way. I ran into a few issues initially, but most were resolved by making changes in your .jsx files. For exapmle, I have "newcap" set to true. When I followed the React tutorial's naming convention and capitalized the first letter of tags, this threw a lint error. It was fixed by lower-casing the first letter of tags.

I did have to set "trailing": false in my .jshintrc. The resulting .js files have trailing whitespaces where it converts tags to Javascript. I haven't figured out if there is a react-tools configuration to change this. You can use the method described in Dan's post if you don't want to change your .jshintrc.

In addition to linting, this process also helps catch issues with your .jsx to .js conversion.

The issue/downfall with this process is that you can't lint .jsx files in the editor. But keeping a terminal window open that you can see while editing is a helpful replacement. Uing TMUX with Vim and Grunt in different panes is my preferred way to use this.

Answer 7

Amey's answer is correct but also could be updated today:

Pair of eslint and eslint-plugin-react now support es6+jsx+react so babel-eslint is needed only if you use some specific stuff like class properties, decorators, async/await, types.

Example .eslintrc configuration for react+jsx+es6 without babel-eslint:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": 0
    },
    "plugins": [
        "react"
    ],
    "extends": ["eslint:recommended", "plugin:react/recommended"]
}

You can just look at eslint-plugin-react instructions for further details/information.