Je code donc je suis là.

0%

在 VSCode 裡使用 ESLint, Prettier & Airbnb Style Guide

Posted on Edited on In

想要矯正儀容端正，看來也沒那麼簡單。

前陣子面試時，有被問到有沒有用 ESLint 來讓自己的寫碼風格統一些，被問了才想到，在舊電腦時還有用這個在 VSCode 裡的外掛，換了電腦就幾乎忘記它了，再加上將來開發專案時，也希望自己在寫碼的統一風格上做改善，所以想說也應該再來重新部署一次，可以以 Airbnb 的寫作風格為榜樣的規則，訓練自己養成專業開發人員應有的寫作習慣。

這次的部署主要參考很喜歡的老師 Traversy 所放在 Youtube 的影片，再參考其他大神的文章當輔助，試著了解每一個步驟或指令背後的意義，這樣應該比較可以理解原理，將來遇到問題比較有可能解決。

VSCode ESLint, Prettier & Airbnb Style Guide Setup

使用 ESLint 主要目的是確保將來自己寫的程式能夠較為統一風格與簡潔，請跟著以下的步驟來設定，需要注意的是，這次的設定並沒有考慮到實用其他框架時所需要的套件，如果到時候以框架開發，也應該把需要的套件安裝好。

第一部，先去暸解要安裝的套件以及規則

ESLint 官網：ESLint - Pluggable JavaScript linter
ESLint 中文：Configuring ESLint - ESLint 中文
ESLint 規則：List of available rules - ESLint - Pluggable JavaScript linter

Airbnb 的寫作規範：airbnb/javascript: JavaScript Style Guide

安裝 npm 的 Airbnb 設置套件：eslint-config-airbnb - npm將遵循 Airbnb 這個套件的規則，再依自定義配置文件調整。

在 VSCode 安裝 prettier 外掛
Prettier · Opinionated Code Formatter

如何查找資料？

例如看 no-empty 這條no-empty - Rules - ESLint - Pluggable JavaScript linter
會告訴我們如何修正不當的寫法，在這裡可找得到每條規則的範例，可看出什麼寫法是允許的，什麼是不允許的。如果要練習，也可以在部署完成之後，直接把錯誤的範例貼到自己的檔案上來一一修正，相信會更清楚寫作的規則。

第二步去 VSCODE 設置

  1. 先確定是否有安裝這兩個套件
  • ESLint (by Dirk Baeumer)
  • Prettier - Code formatter (by Esben Petersen)

  1. 接下來是全局的設置，以command + ,叫出 VSCode 的設定，輸入format on save 並將這項打勾。也就是說如果我儲存檔案時，如果忘記打分號，VSCode 會自動幫我補上去。

  2. 在 VSCode 的設定尋找Prettier再找到Prettier: Single Quote打勾，表示如果我設定單引號，VSCode 在儲存時會幫我們自動更正; 尋找Prettier: Semi 打勾。

第三步 安裝相關套件(4:23)

1.npm init -y 會自動增加一個package.json配置檔案。

2.把需要的套件都先安裝好，指令：npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node執行後等待這些套件安裝完畢。

在安裝這些套件時，最好也可以試著了解每個指令的意義，請參閱：npm 基本指令

第四步 安裝 Airbnb 風格指南

Airbnb 的寫作風格一直是大家推崇的，就連命名規則據說也很清楚，應該是值得來好好看看。我們先至 Airbnb 的 eslint-config-airbnb - npm 上面找到安裝指令：npx install-peerdeps --dev eslint-config-airbnb，再到終端機去執行安裝它。

第五步 手動創建並設置 Prettier、eslint

手動建立兩個文件.eslintrc 與 .prettierrc 的設定檔到專案的根目錄。內容如下，最好是先建立好，之後每個專案直接拷貝即可。如果不用手動設置，也可以用自動的方式生成（在第六步）。

1
2
3
4
5
6
7
// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": false
}
// ”字串使用單引號”、“物件字面定義統一加上最後逗號”、“不使用分號作為語句結尾”

可以去Options · Prettier找更多的設置，並依自己的需求去.prettierrc訂定規則。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//.eslintrc
{
  "env": {
    "node": true,
    "browser": true,
    "es6": true,
    "jest": true
  },
  "extends": "react-app",
  "parser": "babel-eslint",
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

第六步 安裝 eslint 與初始化配置

安裝套件的方式自動生成設定檔如果用這方式就會需要全局 Global 最高權限去設定它（不建議）。指令：sudo npm i -g eslint。如果是安裝到Global，完成就可以直接以初始化的方式去自動產生設定檔。
指令：eslint --init。輸入後回答一連串的設定問題後，就會自動產生一個eslintrc.json的設定檔了。

如果只想要安裝在開發的專案中就選擇npm install eslint --save-dev
如果是在專案裡，可以執行 ./node_modules/.bin/eslint --init去初始化專案的 ESLint。

初始化的選項

在初始化時，ESLint 會以詢問方式請我們選擇，再將這些我們選擇的設定彙整到eslintrc.json去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

How would you like to use ESLint? // 你想使用 ESLint 來做什麼？
- To check syntax, find problems, and enforce code style //檢查語法、找出問題和強制執行編碼風格。

What type of modules does your project use? // 該專案是用什麼方式導入模組？
- JavaScript modules (import/export) // 使用 import/export

Which framework does your project use? // 在專案裡用了哪個框架？
- React //

Does your project use TypeScript? No // 該專案有使用 TypeScript 嗎？
- No

Where does your code run? // 想在哪個執行環境下使用？
- Browser

How would you like to define a style for your project? // 該如何定義專案中的編碼風格？
- Use a popular style guide
- Airbnb: https://github.com/airbnb/javascript

What format do you want your config file to be in? // 用什麼檔案格式設置？
- JSON // 下次可選 Javascript 格式

What style of indentation do you use? // 使用哪種縮進樣式？
- Tabs

What quotes do you use for strings? // 字符串使用什麼引號？
- Double //雙

What line endings do you use? // 使用什麼行尾？
- Unix

Do you require semicolons? // 結尾使用分號嗎？
- No

Checking peerDependencies of eslint-config-airbnb@latest // 確認是否有這幾個設定檔
Would you like to install them now with npm? // 要立即使用npm安裝它們嗎？
- Y

設定完成後，會自動生成剛剛選的設置格式json而產生.eslintrc.json

第七步 配置完成使用方式

配置完成後，在終端機旁的分頁會多一個PROBLEMS 問題，在所有這個檔案夾裡的文件就會依循 ESLint 給的規則而來給予提示，顯示在問題分頁裡了。
如果有看不懂的錯誤訊息，可以再回頭去ESLint以關鍵字搜尋方式，搜尋到說明、參照範例，會比較清楚需要修正的部分。

不想使用 Airbnb 的風格該如何設置？（10:22）

如果不想以 Airbnb 的風格修正功能，可以打開第六步自動部署 ESLint 所自動產生eslintrc.json來調整設置。
將eslintrc.json的內容改成大概是這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "extends": [
        "airbnb",
        "prettier"
    ],
   "plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error",
        "No-unused-vars": "warn"
    }
}

引入 express 套件

在開發如 React 或 Node 專案時，常需要引入不同的函式庫，就需要 Express 套件。
指令npm i express

可針客製化調整規則(12:37)

如果不希望 ESLint 一直是顯示錯誤，也可以針對某個錯誤標籤設定顯示的方式，在這裏我們把原本沒有宣告變數的「錯誤」提示改成「警告」級別。
可在eslintrc.json將 rules 修改為

1
2
3
"rules": {
        "No-unused-vars": "warn" // 不使用的變數
    }

我們在程式裡使用console.log()通常是來除錯，但是 ESLint 卻會警告我們不要用它，我們也可以在eslintrc.json修改規則，在rules增加"no-console":"off"即可使用console.log()而不出現警告提示。

如果希望 ESLint 提醒我們，使用我們想要的字串用單括號包覆，也可在eslintrc.json的rules增加"prettier/prettier": "error",這樣如果我們用雙括號包字串就會出現[錯誤]提示。

ESLint 會提示我們要給函式命名，但當我們使用箭頭函式，沒有函式名時，ESLint 就會提示，所以可以在rules加上增加"func-names":"off"就可使用箭頭函式了。

還有許多可調整的部分，在此不一一說明，可依 ESLint 出現的提示做更細部的修改，如"no-process":"off"、"object-shorthand":"off"、"class-methods-use-this":"off"，可以修正到自己滿意的狀態，開發會變得更順暢些。

剛開始使用時勢必會出現義大堆的錯誤或警告提示，但只要慢慢修正、慢慢將好習慣養成，相信將來寫作起來也會越來越簡潔有風格呢～

在安裝時難免產生疑惑，參考了以下這幾篇文章
參考：
在 VSCode 啟用程式碼規範工具 (ESLint)
在 VSCode 中的 React Native 專案設定 ESLint 與 Prettier
整齊的程式，讓看的人長命百歲，給我用 ESLint