@author ASCE1885的 Github 簡書 微博 CSDN 知乎
本文由於潛在的商業目的，不開放全文轉載許可，謝謝！

在本系列前面一篇文章《React Native 開發 IDE 選型和配置》1中我們介紹了 React Native 開發中可能用到的五款 IDE，以及如何配置以正常顯示 React Native 語法和實現程式碼的智慧提醒。在實際專案開發中，關於 IDE 或者說工程的配置遠不止前文所介紹的，特別是在團隊開發中，還有很多的公共配置需要制定，其中程式碼風格統一工具 EditorConfig 和靜態程式碼檢查工具 ESLint 是必不可少的。限於篇幅，本文先來介紹 EditorConfig，後面再起一篇文章專門來介紹 ESLint。

前文中我們最終建議團隊開發中最好保持 IDE 的統一，但理想很豐滿，現實中卻因為團隊成員所熟悉的編輯器或者 IDE 肯定不是一樣的，因此我們也不好也沒必要限制大家使用統一的 IDE。這樣一來如何解決由於使用不同的編輯器或者 IDE 可能導致的程式碼風格不一致問題呢？例如不同的 IDE 的縮排行數和行末空格等是不一樣的，這時就輪到 EditorConfig 出場了！

EditorConfig2 通過在工程中增加一個配置檔案以及安裝對應的外掛，實現在不同編輯器和 IDE 保持工程中程式碼檔案編碼格式的一致性，EditorConfig 的配置檔案具有良好的可讀性，並能很好的和版本控制系統一起協作。

當我們在編輯器或者 IDE 中開啟某個檔案時，EditorConfig 外掛會從檔案所在目錄開始逐級向上查詢 .editorconfig，直到到達根目錄或者找到包含屬性 root=true 的 .editorconfig 檔案為止。當找到所有滿足條件的 .editorconfig 配置檔案後，外掛會讀取這些配置檔案的內容，距離檔案路徑最短的配置檔案中的屬性優先順序最高，同一個檔案按照從上到下方式讀取，底部定義的同名屬性優先順序要高於頂部定義的。

需要說明的是，Windows 使用者在建立配置檔案時要將檔案命名為 .editorconfig.，之後資源管理器會自動將其重新命名為 .editorconfig

EditorConfig 的配置檔案

如上介紹，我們知道 EditorConfig 的配置檔名為 .editorconfig，它的內容遵循 INI3 格式，同時進行一些擴充套件和定製，例如支援一些萬用字元模式匹配和自定義的屬性識別，section 名字代表檔案路徑，允許存在 [ 和 ] 字元。檔案必須是 UTF-8 編碼的，並使用 CRLF 或者 LF 作為換行符。

下面我們首先來看一下官網提供的例子，有個直觀的認識，然後對照著再來詳細介紹萬用字元模式和支援的屬性定義。

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[Makefile]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

檔案路徑的萬用字元模式

.editorconfig 中的檔案路徑支援萬用字元模式匹配，主要有如下 6 種：

支援的屬性

下面是 EditorConfig 檔案中支援的常見屬性定義，完整的屬性列表可以檢視這裡4。需要注意的是，所有屬性都是不區分大小寫的。

最後我們來看一下著名的 redux5 框架的 .editorconfig 檔案的內容，好有個真實的感受：

# EditorConfig helps developers define and maintain
# consistent coding styles between different editors and IDEs.

root = true

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

[*.md]
trim_trailing_whitespace = false

EditorConfig 的外掛

目前主流的編輯器或者 IDE 基本上都有對應的 EditorConfig 外掛，有的是內建支援的，有的需要獨立安裝。需要注意的是，不用的外掛對 EditorConfig 屬性的支援度不一樣，後面具體介紹每個 IDE 的外掛時可以關注下。下圖所示的編輯器或者 IDE 已經內建了 EditorConfig 的外掛，因此無需獨立安裝配置，直接使用即可，可以看到 WebStorm 不需要獨立安裝 EditorConfig 的外掛。

下圖所示的編輯器或者 IDE 目前尚未內建對 EditorConfig 的支援，因此如果要使用 EditorConfig 的功能的話需要首先下載外掛。上篇文章中介紹的 Atom，Sublime Text 3，Visual Studio Code 都需要安裝外掛，Deco 也沒有內建對 EditorConfig 的支援，但目前也沒找到對應的外掛，也就是說 Deco 不支援 EditorConfig 的使用，畢竟它才是一個新生兒。

Atom plugin6

Atom 中安裝 EditorConfig 是通過 Atom 的包管理器實現的，執行如下命令即可

apm install editorconfig

這個外掛目前支援的屬性有：

Sublime Text plugin7

Sublime Text 中可以通過 Package Control 來安裝 EditorConfig 外掛，如下所示：

這個外掛目前支援的屬性有：

Visual Studio Code plugin8

開啟 VS Code Quick Open（Mac 上面可以通過快捷鍵 ⌘+P），並輸入 ext install EditorConfig 即可找到 EditorConfig 外掛，如下所示，安裝後重啟即可。

這個外掛目前支援的屬性有：

總結

EditorConfig 的目的是在不同的編輯器或者 IDE 中保持程式碼檔案編碼風格的一致性，它需要同時藉助配置檔案和外掛來實現。從上面的分析可以看出，不同編輯器或者 IDE 上面的 EditorConfig 外掛對屬性的支援不盡相同，同時支援的屬性只有兩個：

• indent_style
• indent_size

也就是最低只能保證程式碼在所有編輯器或者 IDE 上面的縮排風格相同。

拓展閱讀

《使用editorconfig配置你的編輯器》9

《使用 EditorConfig來規範程式碼縮排等的風格以webstorm為例》10

《WebStorm 9 納入 EditorConfig 支援》11

歡迎關注我的微信公眾號，專注與原創或者分享 Android，iOS，ReactNative，Web 前端移動開發領域高質量文章，主要包括業界最新動態，前沿技術趨勢，開源函式庫與工具等。