如何在 Intellij-IDEA、Webstorm 和其他 JetBrains IDE 中對我的 JavaScript 運行 eslint --fix？

Question

當我保存文件時，我想運行 eslint，並讓它修復 eslint 可以修復的任何問題。

我知道這可以通過運行應用--fix參數使用命令行來完成。

我也知道 Intellij-IDEA 直接與 Eslint 集成； 但是，Intellij-IDEA 使用 stdin 進行集成，這意味着您不能將--fix作為參數傳遞。

Answer 1

通過幾個快速步驟，您可以設置一個文件觀察器，該觀察器將對您保存的文件運行 eslint --fix。

一步一步：

• 安裝文件觀察器插件
• 導航到Preferences > Tools > File Watchers文件觀察器並創建一個新的文件觀察器
• 選擇File type: JavaScript
• （可選）為觀察者應用范圍。 例如，我選擇了$ProjectFileDir$/apps/web/src/並遞歸地包含它的所有內容。
• 選擇要運行的程序。 安裝 node、npm 和 eslint 后，指向 eslint bin。 在我的項目中，路徑是$ProjectFileDir$/apps/web/node_modules/eslint/bin/eslint.js
• 應用以下參數以在保存的文件上使用 fix 選項運行 eslint --fix $FileName$
• 將工作目錄指定為$FileDir$ 。

命名並保存文件觀察器。 然后，在您限定的目錄中編輯一個 JavaScript 文件，並觀察您的許多錯誤和警告消失！ 謝謝埃斯林特！

注意：如果您發現 Intellij-IDEA 詢問您是否要在不保存的情況下加載文件更改（這很煩人），那是因為 IDE 正在后台保存。 您可以取消選中Immediate file synchronization以獲得更好的編輯體驗。

Answer 2

事情發生了變化。 您不需要外部插件。 現在有對 ESlint 的原生支持：

舊（已棄用）：

ESlint 插件： https ://plugins.jetbrains.com/plugin/7494-eslint/

從 Intellij 14 開始，Jetbrains 將基於此插件的插件捆綁到 IDE 版本中。 有什么不同？ 此插件支持 Intellij 13 和其他版本，--fix 選項，快速修復和其他細微差別。 在打開問題之前，請確保您指的是這個。

來源： https : //github.com/idok/eslint-plugin

---

新（本機支持）

1.《自動ESLint配置》

“自動 ESLint 配置”選項也適用於我。 IDE 會掃描具有eslint依賴項的package.json文件並運行它。 （您可以在一個項目中使用不同的 ESLint 版本）。

從最近被自動檢測ESLint配置.eslintrc.x （例如.json ）配置文件，或者從讀package.json

默認情況下，PhpStorm 使用項目node_modules文件夾中的 ESLint 包和當前文件所在文件夾中的.eslintrc.*配置文件。 如果在當前文件夾中沒有找到.eslintrc.* ，PhpStorm 將在其父文件夾中查找直到項目根目錄。

如果您有多個package.json文件，其中 ESLint 被列為依賴項，PhpStorm 會為每個package.json啟動一個單獨的進程並處理它下面的所有內容。 這使您可以將特定的 ESLint 版本或一組特定的插件應用於 monorepo 或具有多個 ESLint 配置的項目中的每個路徑。

2. 手動配置 ESLint

你也可以手動設置 Node 解釋器 + ESLint 包 + .eslintrc配置

---

應用 ESLint 代碼樣式規則

您可以從 ESLint 配置中自動導入一些代碼樣式規則：

1. 在.eslintrc配置文件上下文菜單中

2. 選擇“應用 ESLint 代碼樣式規則”

   

3. 檢查“事件日志”面板中的輸出

---

配置檢查

1. 從“警告”工具提示中選擇“配置檢查...”

   

2. 在“代碼質量工具”下激活“ESLint”

   

3. “問題”面板現在列出 ESLint 問題和（默認）IDE 問題

   

您可能希望禁用 IDE 的默認規則，並用適當的 ESLint 規則替換它們。 否則，您可能會在列表中看到針對同一問題的 2 個問題。

---

查看檢驗結果

1. “代碼”>“按名稱運行檢查...”> 輸入“eslint”

2. 您可以“自動修復”問題，或修復整個文件（如果規則可以自動修復）

3. 突出顯示已修復的問題

   

---

運行/調試配置 [可選]

或者，您可以設置 NPM 腳本運行配置：

1. ESLint 安裝后，在package.json添加一個腳本部分

   "scripts": { "eslint": "eslint" }

2. 在“npm”面板中，您應該會看到package.json的“eslint”腳本。

3. 您可以編輯其設置，例如僅對當前文件運行 ESLint：

   

4. 現在您可以運行 NPM 腳本：

   

來源： https : //www.jetbrains.com/help/phpstorm/2020.2/eslint.html?utm_campaign=PS&utm_medium=link&utm_source=product&utm_content=2020.2#ws_js_eslint_activate

Answer 3

您最好使用原始的第三方ESLint 插件，它確實支持快速修復。 有關詳細信息，請參閱項目自述文件。

Answer 4

您可以使用保存操作插件

安裝

IDE（推薦）從您的 IDE（Intellij IDEA、PyCharm 等）安裝它：

“文件>設置>插件>瀏覽存儲庫...>搜索'保存操作'>類別'代碼工具'”

JetBrains 插件存儲庫 JetBrains 插件存儲庫提供了所有版本的插件。 你可以下載

jar 並將其添加到您的 IDE（您不會想到更新）：

“文件 > 設置 > 插件 > 從磁盤安裝插件...”

選項之一是“重新格式化文件”->啟用/禁用格式（在“文件>設置>代碼樣式”中配置）。 有關更多選項，請參閱“僅重新格式化更改的代碼”

Answer 5

就我而言，我的項目是由 vue-cli 創建的

將此行添加到您的 package.json

"lintfix": "eslint --fix --ext .js,.vue src test/unit test/e2e/specs",

這里有 3 種方法可以做到

1. 點擊左側的綠色箭頭
2. 點擊運行按鈕，如下圖
3. 在終端運行： npm run lintfix

這一切。