18

ESLint 構成ファイルでいくつかのルールを定義しました。このファイルは

Preferences
  ->Languages and Frameworks
     ->JavaScript
       ->Code Quality Tools
         ->ESLint

そして、コードエディターでは、一致しないエラーがあるように見えるときにすべてのルールが表示されるため、正常に機能することがわかります。また、「コードインスペクタ」を使用する場合

Code
  -> Inspect code

Inspector はすべてのエラーを検出し、下部の小さなウィンドウに表示します。このエラーのそれぞれに自動修正を適用する可能性もありますが、これを実行しようとすると、PhpStorm 設定セクションの ESLint 構成ページにリダイレクトされました。次のようになります。

ここに画像の説明を入力

クリックすると自動的に修正されるリンクがあるはずですが、代わりに ESLint 構成ポップアップ ウィンドウを開くリンクがあります。

ここに画像の説明を入力

どうすればこれをうまく機能させることができますか？私はそれについて PhpStorm のドキュメントを調べようとしましたが、成功しませんでした。

4

2 に答える 2

9

IDE (PhpStorm/Atom/Sublime/WebStorm) でこれを行う方法が見つかりませんでした。ただし、コマンド ラインから を実行していくつかの問題を修正できますeslint --fix。

次の手順に従うには、ESLint の基本的な理解が必要です。

1) ESlint をインストールします。

グローバルに:

npm i -g eslint eslint-config-airbnb

(Airbnb のスタイル ガイドが広く使用されています - http://nerds.airbnb.com/our-javascript-style-guide/ )。

またはローカル (推奨):

node_modulesローカルディレクトリがある場合は、ローカルにインストールすることをお勧めします。プロジェクト ディレクトリから次のコマンドを実行します。

npm i --save-dev eslint eslint-config-airbnb

(その後、eslintから 実行できます./node_modules/.bin/eslint)

2).eslintrcプロジェクト ディレクトリに次の行を含むファイルを作成します。

{ "extends": "airbnb" }  // We installed airbnb's style guide in step 1.

3) ソース コード ファイルをバックアップ/コミットする

リントしたいファイルをバックアップします。次のコマンドは、いくつかの行を変更する可能性があります。

4) 次のように実行eslint --fixします。

eslint --fix path/to/file.js

eslint --fix path/to/files/*.jsx

これにより、ファイル内の数十のエラーが修正されます!

5）eslint --fix何らかのエラーで停止した場合は、手動で修正してから再度実行します

eslint --fix一度にすべてのエラーを修正できるわけではないことに気付きました。つまり、ファイル内の特定のポイントまで実行され、自動的に処理できないエラーで停止することがあります。

スタックしている最上位の問題を削除するとeslint、コマンドを再度実行すると、ファイル内のエラーがさらに修正されます。すすぎ、繰り返します。

--

eslint は 2015 年にいくつかの新機能を追加しました。「--fix」オプションが将来的に改善されることを願っています: http://eslint.org/blog/2015/09/eslint-v1.5.0-released

于 2016-08-02T10:46:44.860 に答える