缩进, 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

相关文章
相关标签/搜索