ESLint構成ファイルでいくつかのルールを定義しました。このファイルは添付されています
Preferences
->Languages and Frameworks
->JavaScript
->Code Quality Tools
->ESLint
そして、コードエディターでは、一致しないエラーがあるように見えるときにすべてのルールが表示されるため、問題なく機能することがわかります。 「コードインスペクター」を使った場合も
Code
-> Inspect code
インスペクタはすべてのエラーを見つけ、下部の小さなウィンドウに表示します。このエラーのそれぞれに自動修正を適用する可能性もありますが、これを行おうとすると、PhpStorm設定セクションのESLint構成ページにリダイレクトされます。次のようになります。
クリックすると自動的に修正されるリンクがありますが、代わりにESLint構成ポップアップウィンドウを開くリンクがあります。
これをうまく機能させるにはどうすればよいですか? PhpStormのドキュメントを調べてみましたが、成功しませんでした。
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
(その後、./node_modules/.bin/eslint
から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
ESLINTを実行するショートカットを追加できます。私はphpstromに対して同じ設定を行いました。
参照: https://medium.com/@jm90mm/adding-prettier-to-webstorm-a218eeec04d2
自動保存の修正についても、これを参照できます
https://medium.com/@netczuk/even-faster-code-formatting-using-eslint-22b80d061461