editorconfig、eslint、prettier三者的區別、介紹及使用

2021 年 4 月 22 日
筆記
EditorConfig, eslint, javascript, prettier, 項目工程化

每次搭建新項目都少不了這些工具，但時間一久就忘記了，下次搭新項目時又要四處查官方文檔，因此特此記錄，主要內容是對這三個工具的理解，以及具體使用方式

editorconfig

理解

先看官網的定義：

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.

EditorConfig 幫助使用不同IDE開發同一個項目的開發者，維持固定統一的程式碼風格。

簡而言之，EditorConfig就是為了抹平不同IDE的程式碼格式差異的

使用

安裝插件

某些編輯器已經內置了EditorConfig插件，無需另外安裝了，比如 WebStorm、VisualStudio、pyCharm等等

某些編輯器沒有內置，需要自行安裝插件，比如vscode，需要安裝 EditorConfig for VS Code

添加配置文件

定義格式規則，避免常見的程式碼格式不一致和醜陋的 diffs

通常在項目根目錄下，添加.editorconfig配置文件，貼一份常見的配置

# //editorconfig.org
root = true

# 說明
## 設置文件編碼為 UTF-8；
## 用兩個空格代替製表符；
## 在保存時刪除尾部的空白字元；
## 在文件結尾添加一個空白行；
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

ESLint

理解

eslint的關注點是程式碼品質和程式碼格式。

何為程式碼品質？如未使用變數、三等號、全局變數聲明等問題

何為程式碼格式？如單行程式碼太長、tab的長度、空格、逗號，單雙引號等問題

對於品質和格式問題，eslint可以給出錯誤或警告提示，也可以自動修復，autofix

使用

eslint的原則是一切皆可配，沒有什麼必須要禁止，或必須要使用的規則，如果有，這些規則應該從語言本身就限制掉

靈活是有代價的，雖然每個規則都可配，但要配置那麼多規則也是及其繁瑣的，因此有人提供了一些preset，也就是預設規則，通常由一些最佳實踐集成而來

生成配置文件

使用官網的CLI，按自己的項目的需求生成。在項目根目錄執行以下命令：

npx eslint --init

回答幾個問題後，比如配置文件格式、是否使用react,vue，是否支援typescript等，則會自動在根目錄下生成對應的配置文件

下載插件

以vscode為例，下載ESLint插件，插件會根據項目根目錄下的配置文件，校驗程式碼格式

如果自動修復 autoFix 功能，需進一步配置插件：

左下角打開配置（Setting），以json格式展示
給setting.json添加如下配置項：

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
    "source.fixAll": true
}

這樣，對於可自動修復的格式錯誤，在保存文件時，eslint會自動幫我們修復

此外，如果項目對格式強制要求，還可載入husky和lint-staged在commit前對更改的程式碼做lint校驗（前者用來給git流程添加鉤子，後者用來給只更改的程式碼而不是整個項目做lint），lint不通過則不予commit

（題外話：個人不太建議這種方式，每次commit都要多等幾秒，太慢了，還是盡量靠自覺）

Prettier

Prettier只關注程式碼格式。在之前很流行，尤其是在eslint還不支援autoFix時。

它即可單獨使用，也可以配合編輯器使用，或和eslint一起使用。

這裡有人可能會有疑問，eslint不也關注程式碼格式，做格式校驗嗎？為啥還要用Prettier？這是因為一是在之前eslint不支援autoFix, 二是兩個的規則並不完全相同

其實，筆者也甚是不喜這麼多的配置文件，因此最近的項目便不加再Prettier了，只用eslint做程式碼品質和格式的校驗，加上autoFix，基本夠用了。

所以這裡不再細說Prettier的使用了，有需要請移步 Prettier官網

總結

EditorConfig 是用來抹平編輯器差異的，比如文件編碼，鎖進格式等
ESLint 關注於程式碼品質校驗和程式碼格式校驗，配合插件支援autoFix和錯誤提示，完全可插拔
Prettier Prettier只關注程式碼格式，也支援自動修復，規則和ESLint不同

Tags: EditorConfig eslint javascript prettier 項目工程化