如何配置ESLint以使用PhpStorm自動修復ESLint錯誤

Question

我在ESLint配置文件中定義了一些規則。 此文件附在

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

我認為它工作正常，因為在代碼編輯器中，當出現與它們不匹配的錯誤時，會顯示每個規則。 當我使用“代碼檢查員”時

Code
  -> Inspect code

Inspector找到所有錯誤並在底部的小窗口中顯示它們。 還有可能對每個錯誤應用自動修復，但是當我嘗試這樣做時，我被重定向到PhpStorm首選項部分中的ESLint配置頁面。 它看起來像這樣：

應該有一個鏈接，當我點擊它時應該自動修復它，但是有一個鏈接只打開ESLint配置彈出窗口：

我怎樣才能讓它正常工作？ 我一直試圖查看PhpStorm文檔，但沒有成功。

Answer 1

我還沒有找到在任何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目錄，則最好在本地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

這將修復文件中的10個錯誤！

5）如果eslint --fix在某些錯誤時停止，請手動修復然后再次運行

我注意到eslint --fix並沒有一次性修復所有錯誤。 即它有時會運行到文件中的特定點，然后停止它無法自動處理的錯誤。

如果刪除了eslint卡在最上面的問題，再次運行該命令可以修復文件中的更多錯誤。 沖洗，重復。

-

eslint在2015年增加了一些新功能。希望' - fix'選項在未來變得更好： http ：//eslint.org/blog/2015/09/eslint-v1.5.0-released

Answer 2

您可以添加快捷方式來運行ESLINT。 我為phpstrom做了同樣的設置。我的工作很好

此外，對於自動保存修復，您可以參考此