0

0

为什么代码缩进时用 Tab 超级棒?_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-21 08:46:50

|

1737人浏览过

|

来源于php中文网

原创

【伯乐在线导读】:美化代码(对齐和缩进)时用 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 很快也会支持。这个属性可优雅降级:即使浏览器不支持,呈现出来的代码虽然没有那么美观,但是仍具有良好的可读性。

空格一定不好吗?

空格是对齐的最佳选择,而不是缩进。比如下面这段代码:

var x = 10,    y = 0;

你需要 4 个空格使变量对齐。如果使用 Tab 的话,只有在 Tab 宽度为 4 的时候,变量才会对齐,否则格式就会乱掉。但是如果这段代码是缩进的,仍然应该用 Tab 而非空格。

另一个例子是对齐具有不同厂商前缀的 CSS3 属性。缩进应该使用 Tab,但是对齐应该使用空格。示例如下:

div {	-webkit-transition: 1s;	   -moz-transition: 1s;	    -ms-transition: 1s;	     -o-transition: 1s;	        transition: 1s;}

认真你就输了

好吧,我夸大了空格的缺点。我确实认为空格很糟糕,但是我得承认比起程序员使用空格缩进,其它的问题可能更加严重,比如,程序员不恰当地给变量命名,或是比起 Vim,更喜欢 Emacs。

关于作者:古鲁伊

简介还没来得及写 :) 个人主页 · 我的文章 · 10

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP自制框架
PHP自制框架

共8课时 | 0.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号