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 Rea         


        

Answer 1

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.