Eslint 在phpstrom/Webstrom 中配置自動修復

liaosp發表於2022-03-14
EsLintPHPWeb

Eslint 在phpstrom/Webstrom 中配置自動修復

在用PhpStorm 中，如果有安裝eslint，但是沒有執行修復，會出現紅色的警告標誌；
在這裡插入圖片描述

在vscode 中自動修復eslint格式：

可選項=》設定=》右上角配置

   "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.format.enable": true,

在phpstrom 中如果版本大於2020.3.1 會有自動修復的按鈕，如圖：
在這裡插入圖片描述
但在之前的版本則要用到phpstrom的檔案監聽功能，下面帶大家配置一下。

開啟設定

在這裡插入圖片描述
找到 file Watchers ，如果沒有去外掛市場安裝，新建custom指令碼。配置如下：

File type: Any (or JavaScript)
Scope: Project files
Program: $ProjectFileDir$/node_modules/.bin/eslint
Arguments: --fix $FilePath$
Output paths to refresh: $FileDir$

具體配置：
在這裡插入圖片描述

最好用2020.3.1 以上的版本，自動配置好了

參考：Even faster code formatting using ESLint

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章