让Facebook的react.js库JSX语法与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

我试图在这个帖子上遵循Dustin和STRML的建议,这对我来说最有效.

开发设置

我使用Sublime Text和SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint.
这些是非常好的插件,让我在保存文件时看到错误,包括 JS和JSX文件:

这些插件尊重您的项目.jshintrc,我不能推荐它们.

确保遵循所有三个软件包的安装说明,否则它们将无法运行:

• 安装SublimeLinter很简单(说明);

• SublimeLinter-jshint需要jshint系统中的全局(指令);

• SublimeLinter-jsxhint需要jsxhint系统中的全局,以及JavaScript(JSX)包内Packages/JavaScript(指令).

您可以将linter配置为每隔几秒执行一次,在文件保存时或手动执行.

构建步骤,提交钩子等

我们将JSHint用作Git工作流程的一部分,并作为强制执行指南的构建步骤.我们本可以使用jsxhint,但我们想继续使用grunt-contrib-jshint,所以这不是一个选项.

现在,我们在转换后jshint作为构建步骤正常运行,因此它只处理输出的JS文件. react

如果有人分叉grunt-contrib-jshint并制作一个可以使用的版本,那会很酷jsxhint,但对我来说这看起来不是一件容易的事.(更新:有人这样做但我没有测试过.)

忽略生成代码中的违规

JSX编译器生成的代码破坏了我们的一些约定.

我不想使用ignore:start和ignore:end Dustin的建议,因为这将有效地禁用所有 linting内部render方法.在我的书中这是一个坏主意.例如,render从linting中排除方法使得linter认为我不使用我require在文件顶部声明的一些库和子组件.因此,忽略事物的需要从render方法传播到文件的其余部分,这ignore:start完全违背了目的.

相反,我render使用JSX编译器(当前)为我打破的三个JSHint选项显式地装饰每个方法:

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

这在我的情况下是足够的; 对于你.jshintrc这可能需要一些调整.

Answer 2

JsxHint和JSHint不是linting JSX的最佳工具.JSHint不支持JSX,所有JsxHint都会转换JSX,然后在转换后的代码上运行JSHint.我一直在使用(强烈推荐)ESLint和React插件.这是更好的,因为Eslint可以使用esprima-fb或babel-eslint等自定义解析器解析任何Javascript风格(请参阅下面的更新).

样本.eslintrc文件:

{
    "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即将被Facebook弃用.使用babel-eslint作为eslint的解析器.这个Github项目是一个了解更多关于如何设置Babel和Eslint以使用React的好地方.

Answer 3

(更新:此帖子来自2013年,现已过时)

我使用JSHint + JSX.

它不应该需要一个JSHint的分支,应该有一种方法告诉JSHint禁用一段代码的所有警告.遗憾的是,没有这种方法可以禁用所有警告,只有一组特定的警告,所以我最终可能会提交一个拉取请求来添加它,或者更改短信.更新:我们提交了一个已被接受的拉取请求.

正如您所指出的那样,Facebook和Instagram使用的工作流程是从命令行在IDE外部进行lint.

您的另一个选择是将所有JSX模板提取到自己的文件中,并使它们成为范围的函数,而不是存在于隐式词法范围内.我们试了一下,并不喜欢样板量.

(我不隶属于React团队)

Answer 4

请参阅JSXHint,这是我写的JSHint的包装器,它提示输出react-tools.这是忽略一行线的一步,因为它实际上会产生生成的javascript.

它可以通过SublimeLinter崇高的文本与使用这个插件.