web-dev-qa-db-ja.com

Intellijプラグイン：AirBnB ESLint with / React

Ubuntu15.10でIntellijIdea 15.0.2を使用し、ESLintが機能するように構成しようとしています。

Jetbrainsのサイトの指示に従いましたが、サイコロはありませんでした。

これが私のスクリーンショットです 言語とフレームワークでの設定> javascript>コード品質ツール> ESLint。 そしてこれがスクリーンショットです IntelliJ内のnodejs/npm設定の。

そして、ルートプロジェクトディレクトリにある私の.eslintrcファイル：

{
  "extends": "airbnb",
  "rules": {
    "comma-dangle": 0
  }
}

IntelliJでエラーや警告を生成しない/index.jsからの抜粋は次のとおりです。

var superman = {
    default: { clark: "kent" },
    private: true
};

ターミナルからeslint index.jsを実行したときの出力は次のとおりです。

   4:1   error    Unexpected var, use let or const instead                      no-var
   5:5   error    Expected indentation of 2 space characters but found 4        indent
   5:23  error    Strings must use singlequote                                  quotes
   6:5   error    Expected indentation of 2 space characters but found 4        indent

注：.eslintrcをAirBNBバージョンに変更する前は、Githubの.eslintrcを使用していたため、ESLintが実行されていると思います。これにより、IntelliJで多数のESLintエラーが発生しました（つまり、 .eslintrcファイル自体、私のコードではありません）。

しかし、これらのエラーを修正すると、プラグインは静かになり、テストしたときに間違いを犯して怒鳴りませんでした。

javascriptintellij-ideareactjseslint
12
Brandon

JetBrains（Idea、Webstorm）設定

ファイル>設定>プラグイン>リポジトリの参照...>検索：eslint>インストール> WebStormの再起動

ファイル>設定>言語とフレームワーク> JavaScript>コード品質ツール> ESLint

enter image description here

その後、次のように機能するはずです。

enter image description here

ESLint構成

ESLintには構成が付属していません。独自に作成するか、プリセットを使用する必要があります。

npm install --save-dev eslint-config-airbnb eslint

次に、.eslintrcで

{
  "extends": "airbnb"
}

プリセットから一部のルールを選択的に無効化/変更することもできます（0-ルールを無効化、1-警告、2-エラー）：

{
  'extends': 'airbnb',
  'rules': {
    'indent': [2, 'tab', { 'SwitchCase': 1, 'VariableDeclarator': 1 }],
    'react/prop-types': 0,
    'react/jsx-indent-props': [2, 'tab'],
  }
}

読む： 特定の行のeslintルールをオフにする 。

Airbnb config（最も人気のあるjavascriptスタイルガイド）を使用したくない場合は、独自に作成できます。反応の手順は次のとおりです。 ESLintをReact on Atom Editor に設定する方法。

独自のプリセットを作成するには、eslint-config-mynameという名前のnpmパッケージを作成してから、'extends': 'myname',http://eslint.org/docs/developer-guide/shareable-configs を使用する必要があります。

コマンドラインを使用して、eslintが機能するかどうかを確認できます。

./node_modules/.bin/eslint .

ただし、.eslintignoreで一部のファイルをエスリンティングから除外することはできます（node_modulesはデフォルトで除外されます）。

bundle.js

Eslint用の--fixスイッチもあります。

.editorconfig

ESLintの良いコンパニオンはeditorconfigです。 JetBrains製品で機能する例を次に示します。

root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true


# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,jsx,html,sass}]
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true

# don't use {} for single extension. This won't work: [*.{css}]
[*.css]
indent_style = space
indent_size = 2

これらのファイルがすでに設定されているgithubリポジトリもあります https://github.com/rofrol/react-starter-kit/

これに基づく https://www.themarketingtechnologist.co/how-to-get-airbnbs-javascript-code-style-working-in-webstorm/

詳細はこちら https://www.jetbrains.com/webstorm/help/using-javascript-code-quality-tools.html

25
rofrol