tags: eslint

ESLint 是什麼？

ES，Javascript 也叫 ECMAScript 簡稱 ES。
Lint 翻譯都翻「皮棉」（但我覺得比較像「毛屑」吧）
由此可見 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 訊息。