美化程式碼(對齊和縮排)時用 Tab 還是空格,這個話題和瀏覽器和作業系統之戰,都是老生常談的話題,都能讓程式設計師爭辯很久的。2015 年程式設計師 Uku Pattak 分析了 GitHub 上多種語言的熱門專案(star 數量高)中使用 Tab 和空格的對比情況。
今天這篇文章出自前端大牛 Lea Verou。
如果你在 Twitter 上關注了我或者你曾聽過我的演講,或許就知道我是極力鄙視用空格來進行程式碼縮排的。但是我從沒在舞臺上詳細解釋過我這個觀點,而 Twitter 又不適合用來闡述技術觀點,所以我一直都想寫篇博文來表明我在這個老生常談的問題上面的看法,這就是寫此文章的原因。
Tab 佔用更少的空間
使用 Tab 的檔案或許和不使用 Tab 的在 gzip 壓縮後並沒有明顯的區別。但是不使用 Tab 的話,就得多一道程式處理你的程式碼,以保證檔案大小合理。你不得不依賴壓縮工具。拿註釋舉例來說,註釋很有用,即使無法壓縮程式碼也要有註釋。Tab 可以達到和空格同樣的效果,所以不用 Tab 的話,平白無故就會膨脹程式碼。
Tab 可個性化
每個編輯器都可以調整 Tab 字元的寬度。這通常被認為是 Tab 的缺陷,但是實際上,這正是 Tab 的優勢所在。有了 Tab,別人就能以自己覺得方便的格式檢視你的程式碼,而不是用你喜歡的格式。Tab 將程式碼表現從邏輯中分離出來,就像是 CSS 將頁面表現從 HTML 中分離出來一樣。Tab 使讀者更方便,而不是讓編寫者掌控一切。用空格就像是在說:“我不管你讀程式碼時方不方便,這是我的程式碼,你就得按照我的方式來”。
Tab 更利於合作
每個程式設計師都有自己不同的想法,在團隊合作中這種個性更要重視。有的程式設計師喜歡縮排 2 個空格寬,有的喜歡縮排 4 個空格寬。使用 Tab,每個程式設計師可以用自己喜歡的縮排方式編寫程式碼,編輯器會根據所設定的 Tab 寬度自動調整縮排,而不必手動調整或者機械地在pull之後改成自己的縮排風格,而在提交前又改回統一的風格。
不需依賴特定工具
使用空格時,縮排實際上是 N 個字元而不是一個,只不過編輯器展現出來的看起來像是一個字元而已。而使用 Tab,你每次按下 Tab 鍵,編輯器會插入 N 個空格;每次按回退鍵或是在縮排處刪除字元時,編輯器會自動刪除 N 個字元。當你不能用編輯器,而被迫使用其它工具時(例如當在嵌入了像是 codemirror 等工具的 webapp 中寫一小段程式碼時),你會被空格醜哭的。尤其是 codemirror 會將 Tab 轉換為空格,別人看你的程式碼時也會被醜哭。
Tab 易於選擇
假設你要選中所有縮排,想把縮排加倍或是將它們換成空格的話,用 Tab 就很容易操作。因為這是正它的意義所在,Tab 就是為了這類情況發明的。而空格的意義就多了,所以你無法簡單的查詢、替換空格。這種並不是為了發揮某種工具的原本功能而使用它的行為,我們通常稱之為 hack。使用空格來進行縮排就是一種 hack。
使用 Tab 縮排的程式碼更易於複製貼上
Norbert Süle 在評論中 指出,複製貼上用空格縮排的程式碼時,除非別人慣用的縮排寬度恰好和你的一樣,否則你就得手動調整縮排。使用 Tab 就不會出現這種問題,因為 Tab 就是 Tab,它會和程式碼完美的融合在一起。每個人都使用 Tab 的話,世界都會更加美好。
Web 中的 Tab 更寬怎麼辦!
這是個嚴重的問題,即使是鍾情 Tab 的優秀程式設計師在上傳程式碼前也會將 Tab 轉換成空格。但是,CSS3 的 tab-size 屬性 解決了這個問題。目前 Opera、Firefox 支援此屬性,Webkit 很快也會支援。這個屬性可優雅降級:即使瀏覽器不支援,呈現出來的程式碼雖然沒有那麼美觀,但是仍具有良好的可讀性。
空格一定不好嗎?
空格是對齊的最佳選擇,而不是縮排。比如下面這段程式碼:
1 2 |
var x = 10, y = 0; |
你需要 4 個空格使變數對齊。如果使用 Tab 的話,只有在 Tab 寬度為 4 的時候,變數才會對齊,否則格式就會亂掉。但是如果這段程式碼是縮排的,仍然應該用 Tab 而非空格。
另一個例子是對齊具有不同廠商字首的 CSS3 屬性。縮排應該使用 Tab,但是對齊應該使用空格。示例如下:
1 2 3 4 5 6 7 |
div { -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; transition: 1s; } |
認真你就輸了
好吧,我誇大了空格的缺點。我確實認為空格很糟糕,但是我得承認比起程式設計師使用空格縮排,其它的問題可能更加嚴重,比如,程式設計師不恰當地給變數命名,或是比起 Vim,更喜歡 Emacs。
打賞支援我翻譯更多好文章,謝謝!
打賞譯者
打賞支援我翻譯更多好文章,謝謝!
任選一種支付方式