web-dev-qa-db-ja.com

Facebookのreact.jsライブラリJSX構文を取得してjslintとうまくやり取りできますか？

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ファイルでこれを回避するにはどうすればよいですか？

javascriptfacebookjslintjshintreactjs
37
TYRONEMICHAEL

（更新：この投稿は2013年からのもので、現在は廃止されています）

JSHint + JSXを使用します。

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

FacebookとInstagramが使用するワークフローは、コマンドラインからIDE。

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

（私はReactチームと提携していません）

8
Dustin Getz

このスレッドに関する Dustin's および STRML's のアドバイスに従うことを試みましたが、これが私にとって最適な方法です。

開発セットアップ

SublimeLinter + SublimeLinter-jshint + SublimeLinter-jsxhint でSublime Textを使用します。
これらは非常に素晴らしいプラグインであり、ファイルを保存するときにミスを確認できます。JSおよびJSXファイルの場合、both：

これらのプラグインはプロジェクトの.jshintrcを尊重しており、十分に推奨することはできません。

3つすべてのパッケージのインストール手順に従うようにしてください。そうしないと機能しません。

リンターは、ファイルの保存時、または手動で数秒ごとに実行するように構成できます。

ビルドステップ、コミットフックなど

Gitワークフローの一部として、またガイドラインを実施するビルドステップとしてJSHintを使用しています。 jsxhint を使用することもできましたが、 grunt-contrib-jshint を使用し続けたいため、これはオプションではありませんでした。

現在、ビルドステップとして通常のjshintを実行していますafterreact変換なので、出力JSファイルを処理するだけです。

誰かが grunt-contrib-jshint を分岐し、jsxhintで動作するバージョンを作成した場合、それはクールですが、それは私にとって簡単なタスクのようには見えません。 （更新：誰か それだけでした しかし、私はそれをテストしていません。）

生成されたコードの違反を無視する

JSXコンパイラーは、いくつかの慣例を破るコードを生成します。

私はignore:startとignore:endを使いたくありませんでした Dustinが提案したように これはrender内のリンティングを効果的に無効にしますallメソッド。それは私の本では悪い考えです。たとえば、リンティングからrenderメソッドを除外すると、リンターは、ファイルの先頭にrequireを指定して宣言したライブラリと子コンポーネントの一部を使用しないと考えます。 したがって、物事を無視する必要性はrenderメソッドからファイルの残りの部分に広がり、これはignore:startの目的を完全に無効にします。

代わりに、JSXコンパイラーが（現在）中断する3つのJSHintオプションを使用して、各renderメソッドを明示的に装飾します。

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

私の場合、これで十分です。 .jshintrcの場合、これには調整が必要になる場合があります。

29
Dan Abramov

JsxHintとJSHintは、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"
    }
}

[〜＃〜] update [〜＃〜]

esprima-fbは間もなくFacebookで非推奨になります。 eslintのパーサーとして babel-eslint を使用します。 Reactは このGithubプロジェクト で動作するようにBabel＆Eslintをセットアップする方法について詳しく知るには良い場所です。

14
Amey

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

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

5
STRML

レポを管理している人は非常に役立ちます。誰かがjshintのフォークを作成しない限り、有効なjavascriptを生成するためにJSX変換を投げて実行するだけです。十分な関心がある場合は、Reactフレームワークの将来のリリースのロードマップに載せられる可能性があります。カバーレーションスレッド here を見ることができます。

2
TYRONEMICHAEL

Grunt + react-tools + jshintを使用して、react-toolsを使用してビルドされた.jsファイルをリントします。 react-toolsからの出力は、.jsxを.jsに変換するときに間隔やインデントなどを維持するのに非常に優れているため、リントの対象となる正確なファイルを提供します。

セットアップするには、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ファイルがリントされます。毎回の保存後に実行する「うなり声監視」を実行できます。

この方法で実行すると、通常の.jshintrc設定のほとんどが機能します。最初はいくつかの問題に遭遇しましたが、ほとんどは.jsxファイルを変更することで解決しました。たとえば、「newcap」をtrueに設定しています。 Reactチュートリアル 命名規則に従い、タグの最初の文字を大文字にすると、リントエラーがスローされました。タグの最初の文字を小文字にすることで修正されました。

.jshintrcで「末尾」：falseを設定する必要がありました。結果の.jsファイルには、タグをJavascriptに変換する末尾の空白があります。これを変更するためのreact-tools構成があるかどうかはわかりません。 .jshintrcを変更したくない場合は、Danの投稿で説明されている方法を使用できます。

リンティングに加えて、このプロセスは.jsxから.jsへの変換の問題をキャッチするのにも役立ちます。

このプロセスの問題/欠点は、エディターで.jsxファイルをリントできないことです。ただし、編集中に表示されるターミナルウィンドウを開いたままにしておくと、便利な代替手段になります。異なるペインでVimとGruntを使用してTMUXを使用することは、これを使用するための好ましい方法です。

1
shortpgh

Ameyの答えは正しいですが、今日更新することもできます。

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

例。eslintrc babel-eslintなしのreact + jsx + es6の設定：

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

詳細/情報については、eslint-plugin-reactの手順を参照してください。

0
alex_1948511