39

我正在玩 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 文件中解决这个问题？

4

7 回答 7

30

我试图在这个线程上遵循达斯汀和STRML 的建议，这对我来说是最有效的。

开发设置

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

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

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

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

  • SublimeLinter-jshintjshint在您的系统中需要一个全局变量（说明）；

  • 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 达斯汀建议的那样，因为这将有效地禁用所有render内部方法的linting 。在我的书中这是一个坏主意。例如，render从 linting 中排除方法使 linter 认为我不使用我require在文件顶部声明的某些库和子组件。因此，忽略事物的需要从render方法传播到文件的其余部分，这ignore:start完全违背了目的。

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

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

这对我来说就足够了；对于您的.jshintrc这可能需要一些调整。

于 2014-02-11T16:09:49.570 回答
14

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"
    }
}

更新

esprima-fb 很快就会被 Facebook 弃用。使用babel-eslint作为 eslint 的解析器。了解更多关于如何设置 Babel 和 Eslint 以使用 React 的好地方是这个 Github 项目。

于 2015-04-20T18:56:33.130 回答
9

（更新：这篇文章来自 2013 年，现已过时。）

我使用 JSHint + JSX。

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

更新： 我们提交了一个被接受的拉取请求。要禁用所有警告，请添加/*jshint ignore: start */以开始该部分并/*jshint ignore: end */结束它。

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

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

（注意：我不隶属于 React 团队。）

于 2013-07-22T23:59:22.747 回答
5

请参阅JSXHint，它是我编写的 JSHint 的包装器，它对来自react-tools. 这是忽略一行代码的一个步骤，因为它实际上会对生成的 javascript 进行 lint。

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

于 2013-12-24T19:36:51.687 回答
2

维护回购的人非常有帮助。你只需要运行它就可以抛出 JSX 转换来生成有效的 javascript，除非有人创建了 jshint 的分支。如果有足够的兴趣，它可能会被列入未来发布反应框架的路线图。可以在这里查看覆盖线程。

于 2013-06-24T07:25:31.520 回答
1

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

要进行设置，请以正常方式安装 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 文件得到解决。例如，我将“newcap”设置为 true。当我遵循React 教程的命名约定并将标签的第一个字母大写时，这引发了 lint 错误。它是通过小写标签的第一个字母来修复的。

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

除了 linting，此过程还有助于发现 .jsx 到 .js 转换的问题。

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

于 2014-02-12T17:14:55.287 回答
1

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

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

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

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

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

于 2016-06-06T18:51:47.540 回答