谁来给我讲讲不同语言（主要是 js 和两大框架）最新的缩进规范

[unt]

我以前都是缩进 4 个空格，把 tab 直接设成了 4 个空格，可是我发现好多人都是缩进 2 个空格，是我搞错了吗，还是什么

[dayeye2006199]

这类东西统一交给 linter 处理，空格和 tab 自动转换。只要团队遵守一个规范就行了。本来都没有什么对错。

[molvqingtai]

看团队规范，不过目前前端圈的 JavaScript 风格指南大多是 2 个空格

[rioshikelong121]

本质上不存在"统一的缩进规范"这种东西。具体看项目约定。我的职业生涯里面用 2 space 比较多。

或者可以看看前端比较流行的几种风格规范中对于 indent 是怎么约定的:

https://google.github.io/styleguide/jsguide.html#formatting-block-indentation
https://github.com/airbnb/javascript#whitespace
https://standardjs.com/rules.html


我发现都是 2 space 风格。

[nomagick]

程序语言一般是 4 个空格，因为缩进层次比较少，空格多更清晰

mark-up 语言包括 HTML ，yaml ，扩展到 XML ，JSON ，两个空格，
因为缩进层次非常多，空格多了反而更乱。


现在前端理论上应该 html 两个空格，js/ts/css 四个空格，
但现在拜 vue 和 jsx 所赐，程序和 mark-up 是混写的，
无论如何都很乱，无论如何其实都错了，所以不必再关心对错。

[unt]

@dayeye2006199
@molvqingtai
@rioshikelong121
@nomagick 嗯，我表述的不太对，我知道没有对错，应该问：哪种更主流，你们公司现在的 eslint 规范是几个空格？
因为存在一个习惯性问题，毕竟迎合大众可能比较好一点。

[molvqingtai]

@unt
目前社区主流的规范，我们公司使用的 Standard ，没有分号
Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo

[duduaba]

我是受不了 4 个空格，层级深的情况感觉左边空了一大片，视觉上很难受。

[MaxTan]

个人习惯，所有都统一 4 空格缩进

[sunmoon1983]

@MaxTan 大赞，我这都是 4 个空格，2 个的话看着不清晰

[murmur]

我们按 4 个空格，因为后端是 java ，受不了 4 个空格的换个显示器嘛，买个 21:10 的，8 个空格都放得下

[darknoll]

前端 2 个空格，后端 4 个空格

[wktrf]

2 个空格显示得多些，单引号少按一个键，分号结尾

[iamzuoxinyu]

2 空格缩进说明前端普遍代码写得烂，嵌套层次深。

[icyalala]

不如折中一下，3 个空格 (狗头)

[fiypig]

我一直习惯 4 个

[murmur]

@icyalala 激进一点 6 个空格，六六大顺

[undeflife]

开始我写 c 、java 都是 4 空格
后来我写 ruby 改 2 空格了

现在发现用 tab 最好，每个人都可以自己自己宽度，至于不会 tab 和 space 混用就行。

[FightPig]

我一直统一两个

[murmur]

@nomagick 缩进层次多才需要 4 个空格，就英文字体那点宽度，字稍微小点 2 个空格用人眼看层级简直是挑战，难不成每次都拿 ide 折叠一下

[freefcw]

@duduaba 层级太多往往说明代码不行，业务逻辑层次过多，一个函数里面大多 2-3 层就足够了

[chenyu0532]

还是太闲了，加个班吧

[cpstar]

以前四个空格，后来发现，还是 tab 靠谱，永远不乱

[libook]

面向需求选择方案，而不是一棵树上吊死。

个人感受是 4 空格缩进很容易分辨代码层级，但有的时候每行会比较长，折行频繁层级关系也就不那么清晰了，那么可以退而求其次用 2 格空格缩进，比如 HTML 。

但像 Vue components 这种每个组件代码块层级也不会特别深，也可以考虑 4 空格缩进。

团队约定清楚就好，然后搭配 linter 规则，提供个 editorconfig 文件，基本就不需要关心了。

[nomagick]

@murmur 层次多的时候屏宽才是主要问题，滚来滚去比人眼花矛盾更突出，要减少屏宽，所以两个空格。
而且 markup 对层次没那么敏感，信息密度很低，单位面积多显示一点东西收益更高

[swulling]

三楼说的对，层级太多四个空格就比较难受

[pota]

4 空格 2 空格实在是不习惯

[zhangshine]

我用 4 个空格，但是很多开源的用 2 个空格

[pomelotea2009]

前 2 后 4 ，而且不喜欢 html 每个属性一行，太占空间了

[snoopyhai]

空格还是 tab ，2 个还是 4 个， 都可以。 项目里创建 editorConfig 文件，约定好即可。

[Notamo]

Tab 键的来源就是古时候的印刷排版，是用来控制文字缩进的独立元素，有自己固定的宽度，不是由多少个空格组成的。后来引用到打字机，再到现代的键盘。

无论是排版，还是打字机，Tab 的长度和空格的长度都是分开计算的。

而代码中的缩进，就应该和文字排版中的缩进一样，应该用 Tab 来表示，而不是用多少个空格组成。

[wangtian2020]

按照个人喜好来
在项目根目录放个格式化配置文件就不用管了

.prettierrc
{
"singleQuote": true,
"semi": false,
"trailingComma": "es5",
"printWidth": 140,
"arrowParens": "always",
"endOfLine": "auto",
"useTabs": false,
"tabWidth": 2
}

我个人喜欢单引号字符串，不用分号结尾，2 空格缩进
没错，我就是认为短的就是好的
反正就我一个前端

[renhou]

@molvqingtai
老哥你好，我想问一下，主流的规范有 airbnb ，Standard 等等
假如我初始化了一个 vue 或 react 项目，导入 eslint 但并没有导入 Standard 等规范
那 eslint 是基于什么规范 lint 的呢？ eslint 默认的规范嘛

[molvqingtai]

@lian704 如果你使用的是 vue-cli ，在 eslintrc 的 extends 字段中你会看到

"eslint:recommended",
"plugin:vue/recommended",

第一个是 eslint 默认规则，第二个是 vue 官方的配置

[liuhuansir]

前端 2 空格、后端 4 空格，go 没搞懂为啥是 8 个空格，看着好别扭

[renhou]

@molvqingtai
哦哦哦，原来是这样，看来一直在用的就说默认配置。谢谢

[ryanlid]

2 个空格，单引号，用分号 ~

[MonoLogueChi]

@murmur 缩进层次多，如果还是 4 空格，就很容易超出屏幕范围，或者是换行过多，换行过多又容易造成缩进层次增加，恶性循环。
如果 2 空格你觉得不好分辨，可以把缩进线打开。