EditorConfig 快速使用指南 | How-To | Editor 編輯者 #8

EditorConfig 快速使用指南 | How-To | Editor 編輯者 #8
Hey 大家好,我是 Aaron,歡迎收看這一期的 Editor,下面的影片來跟你聊聊 EditorConfig 這個工具

只要你不是一個人單打獨鬥,你肯定會需要制定一個團隊統一的寫作規範來應付你日漸膨脹的專案,畢竟呢,人多手雜,每個人的開發環境都不太一樣,使用的編輯器或是 IDE 也是五花八門,寫 code 的習慣怪僻也是一堆,如果任由其自由發展,到最後整個 code base 你都會不忍直視。

那麼要做到團隊統一風格有很多面向跟方法,包含了像是選擇一個有良好 convention 的現成框架,完整的 CI 環境,外部的輔助工具例如 linter、formatter,到團隊人工硬性制定的開發規則,來確保你修改或是新增的組件,符合整個專案架構的慣例。

完整的 CI 也有助於專案 code style 的一致性

這麼多規範工具裡面,其實如果你想找一個最簡單也是最方便,現在馬上就可以導入到你專案的工具,我想就是 EditorConfig 了,在專案中加入 .editorconfig 設定檔,你可以很快地開始設定專案中檔案的編輯風格,包含像是縮排、tab width、EOL 字元、還有像是檔案編碼、只要編輯器認得 editorconfig 檔案,就會在編輯或是新增檔案時自動的套用,而且幾乎所有你聽過的編輯器或 IDE 都有支援 EditorConfig,有的是 Native Support,有的你可以裝一個 EditorConfig 的外掛來支援 EditorConfig。

.editorconfig 檔案呢其實是一個 INI 格式的檔案,即是由 section 跟 properties 組成的設定格式,如果你不知道什麼是 INI 格式的話呢,你可以點開右上角的資訊卡,裡面有連結可以去看看 INI 格式的介紹。

那這些 config 裡面呢,section 指定要被套用的檔案路徑跟副檔名的 pattern,section 之下的參數就是該類型的檔案要被套用的格式設定,像是 tab 的類型,斷行的字元等等。

那麼在 section 的設定上面呢,你可以利用 section 的字元匹配符號呢,來分別指定路徑與副檔名的 pattern,舉例來說,像是* 可以 match 除了/ 以外的所有字串,或是像 ** 可以 match 任意字串,也可以使用大括號給定的字串列表,來匹配指定的副檔名等等。舉例來說如果你想設定專案下的所有 .js 跟 .rb 檔案都套用某一個 section 下的設定,你可以像畫面上這樣設定你的 section

接下來我們來介紹幾個設定參數

首先,第一個要介紹的參數是 root ,這個參數表明了這個 editorconfig 檔案是最後的根設定檔,這是一個非常特別的參數,它必須放在 editorconfig 的最上方,不在任何的 section 裡。

講到 root 這個參數呢,這邊就要講一下 editorconfig 的 parser 原理,只要你的編輯器支援 editorconfig,每當你打開一個檔案的時候,就會從該檔案的目錄底下開始,一步一步往外層目錄尋找 .editorconfig 檔案,直到遇到一個開頭是 root=true 的 editorconfig,然後再由外層依序向內讀取 editorconfig 檔案,當然,越接近你開啟檔案的目錄下的 editorconfig 的設定優先權是越高的,所以你可以在專案目錄下設定一個全專案通用的 root editorconfig,再在一些比較特別的資料夾像是 test、spec 下再另外設置一個 editorconfig。

indent_style 可以設定為 tab 或是 space 用來指定你的縮排的風格呢是要 hard tabs 或是 soft tabs

許多知名的專案都有使用 EditorConfig

indent_size 用來設定你的縮排長度,像我 .js 或是 .coffee 都是設成 2 spaces。那麼另外要講的就是如果你的 indent style 是 tab 的話呢,這個值就會是 tab width 的值,另外也有一個 tab_width 屬性,通常情況下你不需要去設定 tab_width 直接使用 indent_size 即可。

接下來一個比較重要的屬性呢,就是 end_of_line 可以設定你的斷行字元,看你的斷行字元是要 unix 系的 lf 或是 windows 下的 crlf 或是 cr,那麼斷行字元其實非常的重要,因為你的斷行字元錯誤是會讓某些工具出問題的齁,例如以前就有人吃過 windows bat 檔斷行符號的虧齁,尤其是你的團隊中開發用的作業系統並不統一的時候,那像這樣的情況呢,你可以將 bat 檔的 end_of_line 指定為 crlf,來確保 windows 系的檔案能夠正常地被執行。

其他還有像是 trim_trailing_whitespace 去除行首的任意空白字元,insert_final_newline 檔案是否要以空行結尾等,你都可以一一設定。

我想在開發的時候,沒有人會希望打開檔案的時候看到的是凌亂的縮排,有時候是 tab,有時候是 2 spaces,看一看又出現 4 spaces,或是斷行字元導致程式碼出錯等等,使用 editorconfig 設定一致的編輯風格,就能去避免這些本就不應該出現的問題,統一全隊的編輯格式。

想開始建立一個團隊的 code style 卻不知道從何下手,或是整個團隊沒有動力來制定嗎?其實這件事情可以從你自己開始,而你則可以從加入一個 editorconfig 開始。

這一期的影片就到這邊,感謝你的收看!如果你喜歡這次影片的話呢,可以在下面按個讚跟分享,也別忘了訂閱我的頻道,編輯者我們下次見,掰掰。