不起眼的 .editorconfig

仍是在看別人 github 上項目的時候，看到好多項目目錄下都會有個 .editorconfig 文件，起初看裏面內容有個 md 的字符，還覺得就 markdown 文件的配置來，後來有一次在 Webstorm 裏配置一個 tab 鍵佔幾個空格時又發現了這個配置文件，此次細細查詢了一番，感受不起眼的 .editorconfig 仍是很有用處的。

1、爲何要用 .editorconfig ？

在多人合做的項目中，每一個人的開發習慣是不一樣的。以縮進來講，有的人習慣使用 space 鍵來進行縮進，有的人喜歡用 tab 鍵，有的人喜歡設置縮進爲 4 個空格，有的人喜歡設置爲 2 個空格。這樣產生的後果就是每一個人修改後的代碼在格式上老是不統一的，那麼提交到 git 上就會代碼風格不一致，變得醜陋無比。

在此以前，我一直使用 Eslint 作代碼 lint，那麼爲何還要使用 .editorconfig 呢？細細想了下，應該有兩個方面吧。

• Eslint 確實包含 .editorconfig 中的一些屬性，如縮進等，但並不所有包含，如 .editorconfig 中的 insert_final_newline 屬性 Eslint 就沒有。Eslint 更偏向於對語法的提示，如定義了一個變量可是沒有使用時應該給予提醒。而 .editorconfig 更偏向於代碼風格，如縮進等。

• Eslint 僅僅支持對 js 文件的校驗，而 .editorconfig 不光能夠檢驗 js 文件的代碼風格，還能夠對 .py（python 文件）、.md（markdown 文件）進行代碼風格控制。

總結：根據項目須要，Eslint 和 .editorconfig 並不衝突，同時配合使用可使代碼風格更加優雅。

2、使用 .editorconfig

1. 示例 .editorconfig 文件

通用的 .editorconfig 配置文件通常以下所示：

# http://editorconfig.org
root = true

[*]
#縮進風格：空格
indent_style = space
#縮進大小2
indent_size = 2
#換行符lf
end_of_line = lf
#字符集utf-8
charset = utf-8
#是否刪除行尾的空格
trim_trailing_whitespace = true
#是否在文件的最後插入一個空行
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

在上面配置文件中：

• 第一行 http://editorconfig.org 是 Editorconfig 的官方網站；
• 第二行 root = true 控制 .editorconfig 是否生效的字段；
• 其它字段應該注意的有 indent_size 和 charset，若是想要了解更多，參閱：.editorconfig 配置文件字段詳解 。

測試是否可用：

在項目的 js 文件中使用 tab 鍵進行縮進，分別修改 indent_size 屬性值爲 2 和 4，觀察是否有變化。若是沒有任何變化，說明尚未安裝 Editorconfig 插件。

2. Editorconfig 插件

該插件的做用是告訴開發工具，如 Webstorm 自動去讀取項目根目錄下的 .editorconfig 配置文件，若是沒有安裝這個插件，光有一個配置文件是沒法生效的。Webstorm 2017.1 版本以後都是自動安裝這個插件的。

若是你的 Webstorm 沒有安裝這個插件，參閱：Webstorm 安裝 Editorconfig 插件。