54

Atom エディターで、次のプラグインをインストールしました

  1. リンター
  2. リンターエスリント

彼らはJSX構文を認識していないようです。

コマンドラインで動作していますがesprima-fb、やなどの他のプラグインを使用する必要がありeslint-plugin-reactました。Atom エディター用のそのようなプラグインはないようです。誰かがこれをハックする方法を知っているかどうか知りたいです。

4

5 に答える 5

68

Eslint を React.js とうまく連携させるには:

  1. linter & linter-eslint プラグインをインストールする
  2. 走るnpm install eslint-plugin-react
  3. "plugins": ["react"].eslintrc 設定ファイルに追加します
  4. "ecmaFeatures": {"jsx": true}.eslintrc 設定ファイルに追加します

.eslintrc構成ファイルの例を次に示します。

{
    "env": {
        "browser": true,
        "node": true
    },

    "globals": {
        "React": true
    },

    "ecmaFeatures": {
        "jsx": true
    },

    "plugins": [
        "react"
    ]
}

現在、Eslint v1.1.0 を使用しています。

補足: eslint と eslint-plugin-react の両方をプロジェクトの依存関係 (例: npm install eslint eslint-plugin-react --save-dev) としてインストールする必要がありました。うまくいけば、これが役に立ちます。

于 2015-05-18T08:52:27.410 に答える
36

2016 年の更新された回答: Atom にパッケージをインストールし、プロジェクト ルート (またはホーム ディレクトリ) に以下を含むファイルreactを追加するだけです。.eslintrc

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true
  }
}

JSX を含むファイルを再度開くと、動作するはずです。

于 2016-02-24T19:19:07.473 に答える
7

.eslintrcESLint によって取得されるプロジェクトのローカル ファイルを編集する必要があります。Atom との統合が必要な場合は、プラグインlinterおよびlinter-eslintをインストールできます。

React のベスト プラクティス用に ESLint をすばやくセットアップするための現在の最適なオプションは、多くのルールを手動で切り替えるのではなく、npm パッケージをインストールしeslint-plugin-reactて構成を拡張することです。recommended

{
  "extends": [ "eslint:recommended", "plugin:react/recommended" ],
  "plugins": [ "react" ]
}

これによりeslint-plugin-react、ESLint および React プリセットからの推奨ルールが有効になります。最新の ESLintユーザーガイド自体には、より価値のある情報があります。

ES6 および webpack 用に最適化されたパーサー オプションの例を次に示します。

{
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "impliedStrict": true,
      "experimentalObjectRestSpread": true,
      "jsx": true
    }
  }
}
于 2016-08-27T10:29:37.377 に答える
0

Atom を使用していますが、問題なく動作します。.eslintrcを使用していることを ESLint に伝えるプロジェクト ルートに が必要なだけですeslint-plugin-react。

于 2015-05-18T05:54:43.473 に答える