ESLint、Prettier外掛的安裝與使用

xiangzhihong發表於2023-03-14
EsLint

在統一程式碼風格這一塊，通常大家都會用到ESLint。雖然 ESLint 本身具備自動格式化程式碼的功能，但ESLint 的主要優勢在於程式碼的風格檢查並給出提示，而在程式碼格式化這一塊 Prettier 做的更加專業，因此在實際專案開發中我們經常將 ESLint 結合 Prettier 一起使用。 

一、安裝外掛

首先，我們需要安裝ESLint、Prettier外掛。安裝方法很簡單，在VSCode的EXTENSIONS中找到ESLint外掛，然後點選install就可以了。
image.png
 接著，我們再安裝Prettier外掛。 
image.png
最後，我們也把EditorConfig for VS Code外掛安裝上，這個外掛可以讓編譯器讀取配置檔案，並且按照配置檔案裡面的規定來格式化程式碼，有了這個外掛，只要定義好一份配置檔案，就算團隊成員用的編譯器不同，也能夠輸出風格統一的程式碼。
image.png

 二、新增配置

2.1 settings.json配置

安裝好外掛之後，我們還需要設定VSCode的settings.json檔案，實現儲存程式碼時就自動執行ESLint檢查。VSCode的setting.json設定分為工作區和使用者兩個級別，其中使用者區會對所有專案生效，而工作區的設定只會對當前專案生效。

 1，使用者區settings.json配置

點選VSCode左下角的設定按鈕，選擇Settings，選擇以文字編輯形式開啟settings.json，並且在setting.json中加入以下程式碼。配置完成之後，當我們儲存某個檔案時，就可以自動對當前檔案進行ESLint檢查，並且自動對一些錯誤進行修復。配置如下：

{
  //#每次儲存的時候自動格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

2，工作區settings.json配置

除了配置使用者區的settings.json之外，我們也可以配置工作區的settings.json，工作區的配置只會對當前專案生效。首先，我們需要在專案根目錄建立.vscode目錄，並且在該目錄下建立settings.json檔案。 
image.png
接著，在settings.json中加入以下程式碼，配置完成後，當我們儲存該專案中某個檔案時，也會自動對該檔案進行ESLint檢查，並且自動修復一些問題。

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "eslint.validate": ["typescript", "javascript", "vue"]
}

2.2 EditorConfig配置

接下來，我們看一下EditorConfig for VS Code如何配置。首先，我們需要在專案根目錄建立.editorconfig檔案。建立完成之後，這個檔案裡面定義的程式碼規範規則會高於編譯器預設的程式碼規範規則。
image.png
接著，我們只需要在.editorconfig檔案中加入我們想要覆蓋的編譯器的配置，比如下面的配置定義了縮排為2個空格，那麼就算編譯器預設的是4個空格的縮排，最後也會按照我們的.editorconfig配置，按照2個空格進行縮排

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = auto

經過上面的處理後，我們只需要將配置保持一致，後面在【Ctrl + S】儲存程式碼的時候，系統就會自動幫忙修復程式碼格式。

相關文章