Question

我正在玩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显然不喜欢这个（“期望一个标识符，而是看到'＆lt;';” - JavaScript语法错误），那么如何在我的.jshintrc文件中解决这个问题？

Answer 1

我尝试在此帖子中关注Dustin's和STRML's建议，这对我来说最有效。

开发设置

我使用Sublime Text与SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint 这些是非常好的插件，让我在保存文件时看到错误，两者用于JS和JSX文件：

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

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

安装 SublimeLinter 非常简单（ instructions ）;
SublimeLinter-jshint 需要系统中的全局jshint（ instructions ）;
SublimeLinter-jsxhint 需要系统中的全局jsxhint以及Packages/JavaScript内的JavaScript (JSX) bundle（ {{3} } ）。

您可以将linter配置为每隔几秒，文件保存或手动执行。

构建步骤，提交挂钩等

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

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

如果有人分叉grunt-contrib-jshint并制作了一个适用于jsxhint的版本，那会很酷，但对我来说这看起来不是一件容易的事。（更新：某人grunt-contrib-jshint但我没有测试过。）

忽略生成代码中的违规

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

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

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

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

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

Answer 2

JsxHint和JSHint不是linting JSX的最佳工具。 JSHint不支持JSX，所有JsxHint都会转换JSX，然后在转换后的代码上运行JSHint。我一直在使用（{强烈推荐）ESLint和React plugin。这是更好的，因为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＆amp; amp;使用React的Eslint是this Github project。

Answer 3

（更新：此帖子来自2013年，现已过时）

我使用JSHint + JSX。

它不应该需要JSHint的分支，应该有一种方法告诉JSHint禁用代码块的所有警告。遗憾的是，没有这种方法可以禁用所有警告，只有一组特定的警告，所以我最终可能会提交一个拉取请求来添加它，或者更改linters。更新：We submitted a pull request which was accepted。

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

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

（我不隶属于React团队）

Answer 4

参见JSXHint，我写的一个JSHint包装器，它提示react-tools的输出。这是忽略一行线的一步，因为它实际上会使生成的javascript失效。

它可以与SublimeLinter一起使用Sublime Text this plugin。

Answer 5

维持回购的人非常有帮助。你只需要运行它就抛出JSX转换来生成有效的javascript，除非有人创建了一个jshint分支。如果有足够的兴趣，可能会将其放在路线图上，以便将来发布反应框架。可以查看覆盖线程here。

Answer 6

我使用grunt + react-tools + jshint来lint使用react-tools构建的.js文件。在将.jsx转换为.js时，react-tools的输出非常适合保持间距，缩进等，因此它可以为您提供准确的文件。

要设置，请安装grunt the normal way。然后安装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 tutorial's命名约定并将标记的第一个字母大写时，这会引发一个lint错误。它通过下框标记的第一个字母来修复。

我必须在我的.jshintrc中设置“trailing”：false。生成的.js文件具有尾随空格，用于将标记转换为Javascript。我还没弄清楚是否有一个react-tools配置来改变它。如果您不想更改.jshintrc，可以使用Dan的帖子中描述的方法。

除了linting之外，此过程还有助于解决.jsx到.js转换的问题。

此过程的问题/失败是您无法在编辑器中删除.jsx文件。但保持打开终端窗口，您可以在编辑时看到它是一个有用的替代品。使用Vim和Grunt在不同的窗格中使用TMUX是我使用它的首选方式。

Answer 7

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

一对 eslint 和 eslint-plugin-react 现在支持es6 + jsx +反应，因此只有在您使用时才需要 babel-eslint 一些特定的东西，比如类属性，装饰器，异步/等待，类型。

反应+ jsx + es6的示例 .eslintrc 配置没有babel-eslint：

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

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

让Facebook的react.js库JSX语法与jslint很好地配合？

7 个答案:

开发设置

构建步骤，提交挂钩等

忽略生成代码中的违规