web-dev-qa-db-ja.com

React EditorでAtomのESLintを構成する方法

Atom Editorで、次のプラグインをインストールしました

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

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

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

reactjsatom-editorreact-jsxeslint
52
cuadraman

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）。これがお役に立てば幸いです。

67
Jon Saw

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

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

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

36
jackocnr

プロジェクトのローカル .eslintrc ファイルを編集する必要があります。このファイルはESLintによって取得されます。 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 ser-guide 自体には、より価値のある情報があります。

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

{
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "impliedStrict": true,
      "experimentalObjectRestSpread": true,
      "jsx": true
    }
  }
}
7
Rafi B.

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

0
Anders Ekdahl

  1. Macユーザーの場合：Atom->設定->インストール->パッケージの検索linter-eslint->インストールをクリック

  2. Ubuntuユーザーの場合：[編集]-> [設定]-> [インストール]-> [検索パッケージlinter-eslint]-> [インストール]をクリックします。

  3. コマンドラインに行く---> npm install --save-dev eslint-config-rallycoding

  4. atomにアクセスして、新しいファイル.eslintrcを作成し、rallycodingを拡張します。

0
iPragmatech