ESLint 是一個可以自動檢查 JavaScript 代碼樣式，並提出改進建議的工具，主要目的是希望養成良好的程式碼撰寫習慣。
[補充說明]僅檢查代碼樣式，並不會檢查程式是否錯誤！ESLint 的功用
主要是配合 git commit 時做程式碼樣式的檢查。
這是一段有撰寫錯誤的程式碼，打開問題欄位，會顯示沒有偵測到任何問題。
假設是有使用 ESLint 的話
下方就會跑出錯誤，告知說哪裡的程式碼撰寫是有問題的。
這篇會從安裝講起，程式碼規範是採用「Airbnb」#註1
並與 vs code 配合使用。
操作環境
- macOS 10.15.3
前置環境
- 安裝 node.js。 ＃可參考：[第二週]不再與 Node.js、npm 擦肩而過
操作開始
Step1. 安裝 VScode 上 ESlint 外掛
- 會安裝的原因是因為這樣就可以在每次存檔時 live 自動偵錯，不用等到
git commit的時候才知道錯誤。 - 安裝方法：開啟 VScode 在 extensions 搜尋 ESlint 後進行安裝。
Step2. 安裝 ESlint
- 先安裝 npm：
npm init - 利用 npm 安裝 ESlint 並採用「 Airbnb 」規範：
npm i -D eslint eslint-config-airbnb-base eslint-plugin-import- 安裝 ESlint ：
npx eslint — init
接著會出現引入的設定問題
Q1 ：想如何使用 ESLint？
A：回2，To check syntax and find problems。Q2 ：使用什麼模塊導出？
A：看專案需求，這邊我選 None of these。Q3 ：專案是使用哪個框架？
A：看專案需求，這邊我選 None of these。Q4： 專案是否使用 TypeScript？
A：看專案需求，這邊我填入 n。Q5 ：你的專案會在哪運行？
A：使用 空白鍵勾選 Browser Node。Q6 ：希望 eslint 配置文件採用哪種格式？
A：看專案需求，如果有跟其他人合作就看用的是哪種，自己的話就都可以囉。
Step3. 修改運行規範
- 接著會發現資料夾多出一個隱藏檔
.eslintrc.js，打開並修改運行規範
"extends": "eslint:recommended" ➡️ "extends": "airbnb-base"
Step4. 在 vs code 中運行
- 將輸出改成 ESLint
- 就會開始運行 ESLint，出現 loaded from 表示有成功讀入配置文件！
- 如果撰寫程式碼有錯誤，問題那邊就會冒出提示泡泡
這樣就是成功囉~
註1: JavaScript 主流規範有以下三種，其中 Airbnb 是較為嚴謹的。
1. Google
2. Airbnb
3. JavaScript Standard Style