获取Facebook的react.js库JSX语法与jslint很好地玩？

我正在玩Facebook的react.js库。 我正在尝试使用他们的JSX语法来描述如何创build一个视图。

/** @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文件？

Answer 1

（更新：这个post是从2013年开始的，现在已经过时了）

我使用JSHint + JSX。

它不应该需要JSHint的分支，应该有一种方法来告诉JSHint禁用所有代码块的警告。 不幸的是，没有这种方法来禁用所有的警告，只有一组特定的警告，所以我可能会提交一个拉请求来添加这个，或者更改linters。 更新： 我们提交了一个被接受的拉取请求 。

正如你所指出的，Facebook和Instagram使用的工作stream程是从命令行的IDE外部进行。

另一种select是将所有JSX模板提取到自己的文件中，并将其作为范围的函数，而不是存在于隐式词法范围内。 我们试了一下，不喜欢样板的数量。

（我不隶属于React团队）

Answer 2

我试图在这个主题上遵循Dustin和STRML的build议，这里是最适合我的。

开发设置

我用SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint使用Sublime Text。
这些都是非常好的插件，可以让我在保存文件时看到错误， 包括 JS和JSX文件：

这些插件尊重您的项目的.jshintrc ，我不能推荐他们足够的。

确保遵循所有三个软件包的安装说明，否则它们将不起作用：

• 安装SublimeLinter很简单（ 说明 ）;

• SublimeLinter-jshint需要系统中的全局jshint （ 指令 ）;

• SublimeLinter-jsxhint需要系统中的全局jsxhint ，以及Packages/JavaScript （ 说明 ）中的JavaScript（JSX）包 。

您可以将linterconfiguration为每隔几秒执行一次，保存文件或手动执行。

构build步骤，提交钩子等

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

现在， 在 react转换之后 ，我们将正常的jshint作为构build步骤运行，所以它只处理输出的JS文件。

如果有人分叉了grunt-contrib-jshint并创build了一个可以与jsxhint工作的版本，那将是一件jsxhint ，但是这对我来说不是一件容易的事情。 （更新：有人这样做，但我没有testing过。）

忽略生成的代码中的违规行为

JSX编译器生成的代码打破了我们的一些惯例。

我不想用Dustinbuild议的 ignore:start和ignore:end ，因为这会有效地禁用所有的内部render方法。 在我的书里这是一个坏主意。 例如，从linting中排除render方法使linter认为我不使用一些我声明的库和子组件require在文件的顶部。 因此，忽略事情的需要从render方法扩展到文件的其余部分，这就ignore:start的目的ignore:start完全ignore:start 。

相反，我使用JSX编译器（当前）为我分配的三个JSHint选项显式地装饰每个render方法：

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

对我来说这已经足够了。 为您的.jshintrc这可能需要一些调整。

Answer 3

JsxHint和JSHint不是用于编写JSX的最佳工具。 JSHint不支持JSX，所有JsxHint都会转换JSX，然后在转换的代码上运行JSHint。 我一直在使用（并强烈推荐） ESLint与React插件 。 这是更好的，因为Eslint可以使用像esprima-fb或者babel-eslint这样的自定义分析器来parsing任何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的parsing器。 了解更多关于如何设置Babel＆Eslint与React配合使用的好地方就是这个Github项目 。

Answer 4

参见JSXHint ， JSHint的一个包装器，我写了一些来自react-tools的输出。 这是从忽略一个线块，因为它实际上会欺骗生成的JavaScript的一步。

它可以通过SublimeLinter与这个插件一起使用Sublime Text。

Answer 5

维护回购的人非常有帮助。 你只需要运行它扔JSX转换产生有效的JavaScript，除非有人创build一个jshint分支。 如果有足够的兴趣，它可能会被放在未来释放反应框架的路线图上。 可以看看这里的覆盖线程。

Answer 6

我使用grunt + react-tools + jshint来为使用react-tools构build的.js文件进行皮毛处理。 当把你的.jsx转换成.js时，react-tools的输出对于保持你的间距，缩进等是非常好的，所以它会给你一个准确的文件来防止。

按照正常的方式安装grunt。 然后安装grunt-contrib-watch，react-tools，grunt-react和grunt-contrib-jshint。

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

这里是一个示例grunt文件：

 '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']); }; 

在这个文件中，运行“grunt”会将.jsx编译为.js，然后对.js文件进行lint。 每次保存后可以运行“grunt watch”运行。

以这种方式运行时，大部分通常的.jshintrc设置都能正常工作。 我最初遇到了一些问题，但大部分都是通过更改.jsx文件来解决的。 对于exapmle，我有“newcap”设置为true。 当我遵循React教程的命名约定，并大写标签的第一个字母时，会抛出一个lint错误。 标签的第一个字母被低位套pipe固定。

我不得不在我的.jshintrc中设置“拖尾”：false。 生成的.js文件将标签转换为Javascript的尾部空格。 我还没有想出是否有反应工具configuration来改变这一点。 如果您不想更改.jshintrc，可以使用Dan的post中描述的方法。

除了linting，这个过程还有助于解决.jsx转换为.js的问题。

这个过程的问题是你不能在编辑器中input.jsx文件。 但保持打开terminal窗口，您可以在编辑时看到是一个有用的替代品。 用Vim和Grunt在不同的窗格中使用TMUX是我首选的方法。

Answer 7

Amey的答案是正确的，但也可以在今天更新：

对eslint和eslint-plugin-react现在支持es6 + jsx +，所以只有在使用类属性，装饰器，asynchronous/等待，types等特定的东西时才需要使用babel-eslint 。

示例.eslintrcconfiguration为react + jsx + es6没有babel-eslint：

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

您可以查看eslint-plugin-react指令以获取更多详细信息。