###### 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 訊息。 <!-- 待整理: ### 設定檔訊息 Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。 Globals - 脚本在执行期间访问的额外的全局变量。 Rules - 启用的规则及其各自的错误级别。 - 錯誤:修正後才可繼續執行程式; - 警告,只會顯示警告不會中斷程式執行。 ## Using Configuration Files 可设置「警告」、「错误」两个 error 等级,或者直接禁用 ESLint 自动在「要检测文件」目录里寻找 Configuration Files, 接着父级目录... 直到文件系统的根目录 指定 `root: true` 直接找根目錄 -->