[第三週] JavaScript —
ESLint 檢查代碼品質(VSCode)

MiaHsu
4 min readMar 18, 2020

--

ESLint 是一個可以自動檢查 JavaScript 代碼樣式,並提出改進建議的工具,主要目的是希望養成良好的程式碼撰寫習慣。

[補充說明]僅檢查代碼樣式,並不會檢查程式是否錯誤!

ESLint 的功用

主要是配合 git commit 時做程式碼樣式的檢查。

這是一段有撰寫錯誤的程式碼,打開問題欄位,會顯示沒有偵測到任何問題。

假設是有使用 ESLint 的話

下方就會跑出錯誤,告知說哪裡的程式碼撰寫是有問題的。

這篇會從安裝講起,程式碼規範是採用「Airbnb」#註1
並與 vs code 配合使用。

操作環境

  • macOS 10.15.3

前置環境

操作開始

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

參考資料

--

--

MiaHsu
MiaHsu

Written by MiaHsu

每件事都是最好的安排,成為更好的自己

Responses (2)