大猫 (Madao) - まるでダメなおっさん

缩进, Tab 还是空格?

by bigCat 31 Comments

TabsSpacesBoth

圣战

圣战个毛线

Android 好还是 iOS 好,Windows 好还是 Mac 好,编辑器好还是 IDE好,中划线好还是下划线好…
写代码这么多年,会遇到很多奇葩的毫无意义的所谓脑残粉的争论

昨天 @willerce 同学刚入职就提了个问题: 缩进用 Tab 还是空格的规范貌似没有啊?
大家突然意识到有这个问题…至少证明这不是啥大问题,或者算还没暴露出来的小问题
甚至…因为统一用 IntelliJ IDEA 自动被解决了还蒙在鼓里

随着深入的学习,发现了还是有讲究的…

为什么要用 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 和空格

tab-space-1

tab-space-2

你写过这种整齐的 CSS 么?如果有,那么 Tab 只能解决行首对齐,行末只能靠空格
同时,空格也能解决行首对齐

注释里的 Tab 和空格

tab-space-3

你写过注释么…

好吧,那真的要为了好看敲 4N 下么?

基本上靠谱的编辑器都会有这么个设定叫做按一下 Tab 出来4个空格,配套的还有Shift+Tab干掉4个空格
当然还有格式化为好看的对齐.

Sublime Text 2

这款优秀又轻量的编辑器非常适合性能不好的机器,功能基本上也够用,它的设置方法是

sublime-tab-spaces

它会很聪明的在行首按 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-space

前三行先 Tab 出去,第四行按 Tab 会自动用空格对齐

tab-space2

前三行初始位置一致的话推荐按住 alt 左键拖一下进入列编辑模式批量操作

tab-space3

如果第四行先走了,前三行 Tab 调整的时候会参考已有的注释对齐

tab-space4

硬了是为让你爽

最后,附送一个技巧:

idea-2

如果在 Code Style > CSS 里头设置了 Align value: On conlon,按一下格式化快捷键,一秒变格格.

对 Intellij IDEA 感兴趣的同学附送
IntelliJ IDEA, PHPStrom, WebStorm 前端开发指南.

我选择空格

结论是: 按 Tab ,利用 IDE 自动生成对齐用的空格

作为曾经的 Tab 党,抗住了空格党所谓的好看、语义化、开源项目、Twitter 等大牛都用空格等等非常主观的攻击
败给了对齐

你呢?

Comments ( 31 )

  1. Replylarthas
    为什么这么屌
  2. ReplyLar Shan
    以前一直都用 Tab 觉得美观些,不过对齐之类的确实要空格。。。
    • ReplybigCat

      @Lar Shan 实际上也没哪里美观了... 一般情况下不显示 whitespace 这俩东西你都看不见...没区别

  3. Replydawn
    jetbrains 家的东西就是好。
  4. ReplyLibrazy
    喵。。CSS用tab,html用空格其他的IDE搞定想到啥用啥。。(泥垢
  5. Reply傅小黑
    感觉都无所谓,只要自己坚持用tab或者空格不变就好
  6. Reply罗罗磊磊
    大猫,请问你一下,那个 gif 图片演示,你是用什么软件做的?
    • ReplybigCat

      @罗罗磊磊 LICEcap, 不过 gifcam 更简单的样子,都试试看

  7. ReplyJASKNi
    大喵又写硬东西了, 好棒~ 然后, 我特么又被你影响了... 我决定了... 我要写超级无敌对齐的 CSS .........
  8. ReplyMark
    我就是记得用哪个的时候就用哪个.一般情况都是空格
  9. Reply平板盒子
    编辑器支持tab我就tab,不支持就空格
  10. Replyhzlzh
    空格党小胜,Twitter Google 大部分都在用空格缩进哟。
  11. 缩进, Tab 还是空格? | 有益
    […] | Permalink | 大战12回合 | Post tags: Intellij IDEA, sublime text, vs, 代码规范 | MediaTemple | (miao) […]
  12. 缩进, Tab 还是空格? | 移动终端前端开发日志 TmT.io
    […] 原文 http://ooxx.me/tabs-vs-spaces.orz […]
  13. Reply一堵墙
    一直都是 tab
  14. Reply砖家
    缩进用tab,对齐用空格,貌似很多人还没清楚indent和align的区别
  15. Reply听海
    Tab党表示早已败给空格党...我要各种情况下现实都一致。
  16. ReplyAloong
    演示的例子, 貌似跟设置为tab取代空格无关. 不设置也一样的效果 Eclipse亲测.
    • ReplybigCat

      @Aloong 如果不设置,可能在IDE里智能对齐了,但是放到普通文本编辑器就会乱掉,如果是空格,不管哪里用等宽字体都是对齐的

  17. 缩进, Tab 还是空格? | Thiece
    […] 本文出自http://ooxx.me/tabs-vs-spaces.orz […]
  18. Replyxloger
    “压缩后文件更小因为空格不可避免,用 Tab 的话要压缩2种字符(脱离实际情况偷换概念)” 好奇下为什么说偷换概念呢?如果用哈夫曼编码(原谅我不会拼)的话,那少一种支付的话的确能更小啊。。。
    • ReplybigCat

      @xloger 必然更小,但是小多少?小1byte也是小,但是这1byte所造成的影响有多少?带来的问题又有多少?做开发要的是一种平衡,性能优化过了头就会牺牲可维护性

      • Replyxloger
        @bigCat Post author 哦哦那就可以了,我还以为我的理解有问题。。。。
  19. ReplyTikitoo
    在AlloyTeam 看到的,就顺着进来啦,看到好东西要留名,看过 xxx JavaScipt style,正在更正自己的代码习惯。
  20. Reply笔途文摘
    每次来都有新的收获,加油!
  21. Replypasser-by
    alert("Good tutorial!")
  22. Replyg'g
    ggggg
  23. Reply梓梓梓蓝
    喜欢Tab~
  24. Replybytefish
    泪别tab....
  25. ReplyNickname ( required )
    缩进用tab,对齐用空格为什么不行。。。
  26. ReplyNickname ( required )
    注释后代码后退两个肿么办>_< 例如: .class { padding-left: 10px; // padding-top: 0px; padding-right: 10px; }

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>