ESLint 是什麼？

###### tags: `eslint` # ESLint 是什麼？ ES，Javascript 也叫 ECMAScript 簡稱 ES。 Lint [翻譯都翻「皮棉」（但我覺得比較像「毛屑」吧）](https://www.google.com/search?q=Lint&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj4v6nK2eHjAhUbH3AKHSN6DggQ_AUIEigC&biw=1680&bih=948) 由此可見 ESLint 會找出 Javascript 的毛屑... ESLint 是一個檢查 codeing style （編碼風格、程式碼排版）的工具。例如 `=` 前後一定要空格或不用；縮排是要幾個空格還是用 tab.... 為什麼需要？因為多人編寫一份文件時，規則不同，會大大增高閱讀理解的成本... ESLint 執行時會解析你每行程式碼每個字符，是否符合你設定的「規則 Rules」。 Rules 有兩個部分，一個是具體的排版規則；一個是規則等級：不符規則時會在命令列面板顯示訊息。 - `off` / `0` ：關閉規則 - `warn` / `1` ：警告，只會出現訊息：指出錯誤位置和規則。 - `erro` / `2` ：錯誤，除了出現訊息外，程式碼也不能執行，強迫你修正才能執行程式。也有指令可幫你修正簡單的錯誤。 ( 說到修正錯誤， prettier 是一個 code formatter ，程式碼格式化的工具，它是你在儲存時就幫你「自動格式化」程式碼的，不用自己打指令或手動修正。他也有些微調的選項，但可客製化的地方不多，可能有人不喜歡一些規則也不能改。) 猜想 ESLint 應可以在流程管理的監聽程式中下指令，做出自動修正的能力？但我不知道怎麼弄。 ESLint 有 prettier Plugin ，懂得設定可以做出依 ESLint 規則，自動 format 程式碼，上次試了一次，有點麻煩，因為要解除 prettier 自己的規則，讓他用 eslint 的，另外排版的規則，可能來自你的編輯器或程式語言外掛設定... 自動修正時，互相輪迴衝突，要一個個解 ESLint 可客製化程度很高是他的優點，官網上有教怎麼設定，我是想看懂的... 😖 不過大多推薦使用幾派主流的 ( 社群風格 )，像 standard 或 ESLint 的推薦規則組；還有 airbnb、google 他們有公開的內部用的 codeing style；這些都有做成官方套件。這些套件引入後也可以自訂開關、或增加自己的... ## 使用情境 ESLint 是用指令操作的。因為指令有多元使用方式，除了在命令列下指令，也能整合在編輯器成外掛，用編輯器驅動。或流程管理中加入指令執行...最好挑選適合你的情境去整合。最原始的情境，直接用命令列操作：用命令列下載並安裝 ESLint 到電腦 ----------- 這使你的電腦有能執行 ESLint 的指令的能力在專案中新建 ESLint 設定檔 ---------------- 這設定專案用的 ESLint 規則命令列移動到專案中，執行 ESLint 指令檢查檔案 - 此時警告和錯誤會顯示在命令列通知。 ## 使用 ### 安裝通过 NPM 全域安裝 ``` npm install -g eslint ``` 使你的電腦能執行 ESLint 的指令 ### 設定檔 eslintrc 設定 ESLint 規則 - Configuration Files 設定檔，多種方式使用 1. 獨立的 `.eslintrc` 檔案：可用 JavaScript、JSON 或者 YAML 格式： ".eslintrc.js", ".eslintrc.json"... 2. 在 package.json 新增 `eslintConfig` 屬性，ESLint 會自動讀取。 3. 在命令列下指令時，指定任一個 "eslintrc" 檔案。 4. 在跟目录 ( 通常 `~/` ) 有一个 "eslintrc" 檔案，ESLint 只有在找不到其他 "eslintrc" 時才使用。 - Configuration Comments 設定註解 - 用 JavaScript 註解 ( Comments ) 可以把 eslintrc 規則坎入在一個程式碼檔案中。 ### 執行 - 命令列執行 ESLint `eslint to/folder/*.js` - 或整合在流程管理工具中，變成其中一個步驟執行 - 或 vscode 可安裝 ESLint 套件， - 這個只要加入自定義設定檔就好， - 在編輯器打開專案時就自動執行 ESLine，且編輯器的 terminal 面板，可直接看到 ESLint 訊息。