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 構文エラー)。

4

7 に答える 7

14

JsxHint と JSHint は、JSX を lint するのに最適なツールではありません。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 によって廃止されます。eslintのパーサーとしてbabel-eslintを使用します。Babel と Eslint を React と連携するようにセットアップする方法について詳しく知るには、この Github プロジェクトを参照してください。

于 2015-04-20T18:56:33.130 に答える
9

(更新:この投稿は 2013 年のもので、現在は廃止されています。)

私はJSHint + JSXを使用しています。

JSHint のフォークは必要ありません。コード ブロックのすべての警告を無効にするように JSHint に指示する方法が必要です。残念ながら、すべての警告を無効にする方法はなく、特定の警告セットのみを無効にする方法はないため、プル リクエストを送信してこれを追加するか、リンターを変更することになります。

更新: 承認されたプル リクエストを送信しました。すべての警告を無効にする/*jshint ignore: start */には、セクションの開始と/*jshint ignore: end */終了に追加します。

ご指摘のとおり、Facebook と Instagram が使用するワークフローは、コマンド ラインから IDE の外部で lint することです。

もう 1 つのオプションは、すべての JSX テンプレートを独自のファイルに抽出し、それらを暗黙的なレキシカル スコープ内に存在するのではなく、スコープの関数にすることです。私たちはそれを試してみましたが、ボイラープレートの量が気に入らなかった.

(注:私は React チームとは関係ありません。)

于 2013-07-22T23:59:22.747 に答える
5

からの出力をリントする、私が書いた JSHint のラッパーである JSXHint を参照してくださいreact-tools。これは、生成された JavaScript を実際にリントするため、行のブロックを無視することからのステップアップです。

このプラグインで SublimeLinter を介して Sublime Text で使用できます。

于 2013-12-24T19:36:51.687 に答える
2

レポを維持している人は信じられないほど役に立ちます。誰かが jshint のフォークを作成しない限り、JSX 変換をスローして実行し、有効な JavaScript を生成するだけです。十分な関心があれば、react フレームワークの将来のリリースのロードマップに載せられるかもしれません。ここでカバースレッドを見ることができます。

于 2013-06-24T07:25:31.520 に答える
1

エイミーの答えは正しいですが、今日更新することもできます：

eslintとeslint-plugin-react のペアがes6+jsx+react をサポートするようになったため、babel-eslintは、クラス プロパティ、デコレータ、async/await、タイプなどの特定のものを使用する場合にのみ必要です。

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 に答える