我正在玩 Facebook 的react.js库。我正在尝试使用他们的 JSX 语法，它描述了以下列方式创建视图。
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return <div>{'Hello ' + this.props.name}</div>;
}
});
React.renderComponent(<HelloMessage name="John" />, mountNode);
JSLint 显然不喜欢这个（“期望一个标识符，而是看到了 '<';” - JavaScript 语法错误），那么我如何在我的 .jshintrc 文件中解决这个问题？
我试图遵循Dustin和STRML在此线程上的建议，这是最适合我的方法。
我将 Sublime Text 与SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint 一起使用。
这些是非常好的插件，让我在保存文件时看到错误，包括JS 和 JSX 文件：
这些插件尊重你的项目.jshintrc，我不能推荐它们。
确保遵循所有三个软件包的安装说明，否则它们将无法工作：
安装SublimeLinter很简单（说明）；
SublimeLinter-jshintjshint在您的系统中需要一个全局变量（说明）；
SublimeLinter-jsxhintjsxhint在你的系统中需要一个全局的，以及里面的JavaScript (JSX) 包Packages/JavaScript（指令）。
您可以将 linter 配置为每隔几秒执行一次、保存文件时或手动执行。
我们使用 JSHint 作为我们 Git 工作流程的一部分，并作为执行指南的构建步骤。我们本来可以使用jsxhint但我们想继续使用grunt-contrib-jshint所以这不是一个选择。
现在，我们在转换后jshint作为构建步骤正常运行，因此它只是处理输出的 JS 文件。 react
如果有人分叉grunt-contrib-jshint并制作一个适用于 的版本会很酷jsxhint，但对我来说这看起来并不容易。（更新：有人这样做了，但我还没有测试过。）
JSX 编译器生成的代码打破了我们的一些约定。
我不想按照 Dustin 的建议使用ignore:startand ignore:end ，因为这会有效地禁用所有render方法内部的 linting 。在我的书中，这是一个坏主意。例如，render从 linting 中排除方法会使 linter 认为我没有使用我require在文件顶部声明的一些库和子组件。因此，忽略事情的需要从render方法扩展到文件的其余部分，这ignore:start完全违背了目的。
相反，我render用三个 JSHint 选项显式地装饰每个方法，JSX 编译器（当前）为我破坏了这些选项：
render: function () {
/* jshint trailing:false, quotmark:false, newcap:false */
}
这对我来说就足够了；对于您.jshintrc这可能需要一些调整。
JsxHint 和 JSHint 不是对 JSX 进行 linting 的最佳工具。JSHint 不支持 JSX，JsxHint 所做的只是转换 JSX，然后在转换后的代码上运行 JSHint。我一直在使用（并强烈推荐）带有React 插件的ESLint。这更好，因为 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"
}
}
更新
esprima-fb 很快就会被 Facebook 弃用。使用babel-eslint作为eslint的解析器。了解更多关于如何设置 Babel & Eslint 以使用 React 的好地方是这个 Github 项目。
（更新：这篇文章是 2013 年的，现在已经过时了。）
我使用 JSHint + JSX。
它不应该需要 JSHint 的分支，应该有一种方法可以告诉 JSHint 禁用代码块的所有警告。不幸的是，没有这样的方法来禁用所有警告，只有一组特定的警告，所以我最终可能会提交一个拉取请求来添加这个，或者更改 linters。
更新： 我们提交了一个被接受的拉取请求。要禁用所有警告，请添加/*jshint ignore: start */以开始和/*jshint ignore: end */结束该部分。
正如您所指出的，Facebook 和 Instagram 使用的工作流是从命令行在 IDE 外部进行 lint。
您的另一个选择是将所有 JSX 模板提取到它们自己的文件中，并使它们成为作用域的函数，而不是存在于隐式词法作用域中。我们试了一下，不喜欢样板文件的数量。
（注意：我不隶属于 React 团队。）