縮進, Tab 仍是空格?(轉)

聖戰

聖戰個毛線前端

Android 好仍是 iOS 好,Windows 好仍是 Mac 好,編輯器好仍是 IDE好,中劃線好仍是下劃線好…
寫代碼這麼多年,會遇到不少奇葩的毫無心義的所謂腦殘粉的爭論git

昨天 @willerce 同窗剛入職就提了個問題: 縮進用 Tab 仍是空格的規範貌似沒有啊?
你們忽然意識到有這個問題…至少證實這不是啥大問題,或者算還沒暴露出來的小問題
甚至…由於統一用 IntelliJ IDEA 自動被解決了還矇在鼓裏程序員

隨着深刻的學習,發現了仍是有講究的…github

 

爲何要用 Tab?

  • 按鍵次數 全部我看過的學習教程中,形容代碼縮進都是說,按一個 Tab 縮進而不是按 4 下空格.
  • 語義 Tab 表明」縮進一個level」,而空格有不少含義
  • 文件更小 一個 Tab 和一個空格佔空間是同樣的,4個空格的話就是4倍
  • 寬度可調整 常見的就是一個 Tab 等寬於 4 個空格,靠譜編輯器均可以自定義

爲何要用空格?

  • 在全部編輯器和系統裏表現都是一致的,寬度只決定於顯示字體
  • 可讓做者更精確控制視覺呈現 有些惡趣味的程序員會畫字符畫
  • 語義 Tab 是製表符,用 Tab 就和用 Table 佈局同樣不科學
  • 壓縮後文件更小由於空格不可避免,用 Tab 的話要壓縮2種字符(脫離實際狀況偷換概念)

爲何要混着用?

  • 簡單 爺想怎麼用就怎麼用
  • Tab 黨搞不定行末註釋對齊 他們是行首縮進用 Tab ,行末註釋對齊用空格

到底什麼是 Tab?

根據史料 WikiPedia 記載 Tab key 表明了 tabulator key 製表鍵, 它的出現是由於作表格的時候對齊敲空格須要敲不少下,並且內容變更的時候對齊也比較糾結,乾脆弄個 Tab 鍵按一下跳一列.編輯器

HTML 裏的 Tab 和空格

無論多少個連續的 Tab 仍是空格,在網頁呈現的時候都會顯示成一個空格,K 數依然是個問題,不過走 Gzip 的話也不是啥問題,由於 Gzip 對重複的東西壓縮率特別高.佈局

CSS JavaScript 裏的 Tab 和空格

你寫過這種整齊的 CSS 麼?若是有,那麼 Tab 只能解決行首對齊,行末只能靠空格
同時,空格也能解決行首對齊性能

註釋裏的 Tab 和空格

你寫過註釋麼…學習

好吧,那真的要爲了好看敲 4N 下麼?

基本上靠譜的編輯器都會有這麼個設定叫作按一下 Tab 出來4個空格,配套的還有Shift+Tab幹掉4個空格
固然還有格式化爲好看的對齊.字體

Sublime Text 2

這款優秀又輕量的編輯器很是適合性能很差的機器,功能基本上也夠用,它的設置方法是動畫

它會很聰明的在行首按 Tab 輸入 4 個空格,按 BackSpace 退格鍵刪除4個空格,非行首 Tab 依然 4 個空格,但退格就一個個刪
不過它有個問題就是 Shift+Tab 只能光標在行首或者選中行的時候才能生效

IntelliJ IDEA

由於我 SSD 因此跑 IDE 無壓力,基本上搞啥都是 IntelliJ IDEA ,必然是要介紹一番.
PS:一樣適用於 WebStorm PHPStorm 等 Jetbrains 家一系列 IDE.

首先,他默認就是輸入 Tab 出來4個空格
其次,光標定位在任何位置均可以 Shift+tab 反縮進當前行

最後,還記得那個右側的註釋對齊麼,咱給你耍一耍
如下動畫所有隻按Tab,未成年人請勿模仿

前三行先 Tab 出去,第四行按 Tab 會自動用空格對齊

前三行初始位置一致的話推薦按住 alt 左鍵拖一下進入列編輯模式批量操做

若是第四行先走了,前三行 Tab 調整的時候會參考已有的註釋對齊

硬了是爲讓你爽

最後,附送一個技巧:

若是在 Code Style > CSS 裏頭設置了 Align value: On conlon,按一下格式化快捷鍵,一秒變格格.

對 Intellij IDEA 感興趣的同窗附送
IntelliJ IDEA, PHPStrom, WebStorm 前端開發指南.

我選擇空格

結論是: 按 Tab ,利用 IDE 自動生成對齊用的空格

做爲曾經的 Tab 黨,抗住了空格黨所謂的好看、語義化、開源項目、Twitter 等大牛都用空格等等很是主觀的攻擊
敗給了對齊

你呢?

原文:http://ooxx.me/tabs-vs-spaces.orz

【補充】

知乎:寫代碼時,縮進使用 tab 仍是空格?

http://www.zhihu.com/question/19960028

英文文章《Smart Tabs》:https://www.emacswiki.org/emacs/SmartTabs

相關文章
相關標籤/搜索