在 VSCode 設定「自動格式化程式碼」工具 ESLint、prettier

1. 用命令列下載安裝所需函式庫：
   • ESLint：定義程式碼「格式化規則」 - Prettier：「自動修正」格式化的工具
   • eslint-config-prettier：Prettier 套件，關閉 Prettier 會與 ESLint 衝突的規則。
2. 設定編輯器的「組態檔」等、要整合的資訊。

命令列下載安裝函式庫方式 e.g. npm install eslint -g

ESLint 簡介

是「程式碼格式檢查」工具， 可以自定義程式碼的格式規則。 例如縮排格式、結束是否要分號、括號周邊是否空格等等等... 有格式的程式碼格式，能夠減少理解程式碼的成本，是一種好的寫作習慣。

啟動後，它會檢查你寫的程式碼， 在不符規則的地方提示報錯。

• 下載函式庫
• 組態設定檔
• 使用方式

下載安裝函式庫

需要先安裝 eslint 指令集，來使用 eslint 指令： 在電腦中全域安裝：npm install -g eslint， 在 專案安裝，執行 npm install eslint -D。

組態設定檔

格式化的規則，是定義在一個「組態設定檔」中。 這個設定檔，有多種定義方式： 可以以 YAML、json、js 檔案格式來定義，例如 eslint.js。 或以 eslintConfig 的方式 (物件格式)，寫在其他設定檔中，例如寫在 package.json。

下載安裝函式庫後，可以直接下指令：eslint --init， 它會用一問一答的方式，幫你建立基本的 (初始化) ESLint 組態設定檔。

規則可以自訂，還有幾個現成主流的規則集， 可直接引用、或與自己的規則整合。

定義規則似乎有兩種屬性： 一個是規則本身定義， 一個是錯誤時提示的警告層級。

使用方式

基本指令

• eslint --init : 建立 (初始化) ESLint 組態設定檔
• eslint —-fix <xxx/xxx.js> : 修正錯誤 ( "檔案路徑" 替代整個 <xxx/xxx.js> )
• eslint <xxx/xxx.js> : 監控文件

使用方式 1. eslint comment line

傳統的使用方式，是用「命令列」操作： 在命令列執行「監控檔案」指令， 之後編寫程式碼，當格式不符合設定時，會在命令中報錯， 可以用修正指令自動修正錯誤(有的還是要手動)。 修正錯誤後會自動解除。

使用方式 2. 編輯器擴充套件

例如 VScode 有擴充套件，它整合 ESLint 到 VS Code 中， 套件自動使用「安裝在已開啟工作區」的「 ESLint 函式庫」， 若該工作區 (資料夾) 沒有，這個擴展會去尋找全域的版本。

ESLint 函式庫 (就是上面執行 npm install eslint 安裝的東西，會放在 nodemodal 裡面)

如果尚未在專案或全域安裝 ESLint，需要安裝： 在專案工作空間安裝 npm install eslint， 在電腦中全域安裝 npm install -g eslint。

如果安裝在專案中，運行 ESLint 初始化： 在 Windows 下執行 \node_modules\.bin\eslint --init， 在 Linux 和 Mac 下執行 ./node_modules/.bin/eslint --init。

在設定完 eslint 組態設定檔後， 編輯器可能需要再重啟一次，執行， 在命令面板選擇「輸出」，可以看到 "ESLint server is running."， 並且沒有其他錯誤訊息，表示已成功運行。

Prettier 簡介

是「自動修正」程式碼格式化的工具，

下載安裝函式庫

需要先安裝 Prettier 指令集，來使用 Prettier 指令： 在電腦中全域安裝：npm install -g prettier， 在 專案安裝，執行 npm install prettier -D。

組態設定檔

在 eslint 組態檔 "extends" 屬性中，設定 prettier 的設定。

使用方式

安裝 prettier 套件，會以 eslint 驅動 prettier 故不需要安裝 VSCode 的 Prettier 擴展套件。

prettier/eslint-config-prettier 簡介

Prettier 套件，用來關閉 Prettier 會與 ESLint 衝突的規則。

下載安裝函式庫

需要先安裝 Prettier 指令集，來使用 Prettier 指令： 在電腦中全域安裝：npm install -g eslint-config-prettier， 在 專案安裝，執行 npm install eslint-config-prettier -D。

組態設定檔

在 eslint 組態檔 "extends" 屬性中，設定 prettier 的設定。

使用方式

安裝 prettier 套件，會以 eslint 驅動 prettier