V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
unt
V2EX  ›  程序员

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

  •  
  •   unt · 2022-05-12 14:09:21 +08:00 via iPhone · 4228 次点击
    这是一个创建于 926 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我以前都是缩进 4 个空格,把 tab 直接设成了 4 个空格,可是我发现好多人都是缩进 2 个空格,是我搞错了吗,还是什么
    37 条回复    2022-05-13 11:45:35 +08:00
    dayeye2006199
        1
    dayeye2006199  
       2022-05-12 14:16:42 +08:00
    这类东西统一交给 linter 处理,空格和 tab 自动转换。只要团队遵守一个规范就行了。本来都没有什么对错。
    molvqingtai
        2
    molvqingtai  
       2022-05-12 14:18:18 +08:00 via Android
    看团队规范,不过目前前端圈的 JavaScript 风格指南大多是 2 个空格
    rioshikelong121
        3
    rioshikelong121  
       2022-05-12 14:19:54 +08:00
    本质上不存在"统一的缩进规范"这种东西。具体看项目约定。我的职业生涯里面用 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
    nomagick  
       2022-05-12 14:21:38 +08:00   ❤️ 1
    程序语言一般是 4 个空格,因为缩进层次比较少,空格多更清晰

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


    现在前端理论上应该 html 两个空格,js/ts/css 四个空格,
    但现在拜 vue 和 jsx 所赐,程序和 mark-up 是混写的,
    无论如何都很乱,无论如何其实都错了,所以不必再关心对错。
    unt
        5
    unt  
    OP
       2022-05-12 14:57:12 +08:00 via iPhone
    @dayeye2006199
    @molvqingtai
    @rioshikelong121
    @nomagick 嗯,我表述的不太对,我知道没有对错,应该问:哪种更主流,你们公司现在的 eslint 规范是几个空格?
    因为存在一个习惯性问题,毕竟迎合大众可能比较好一点。
    molvqingtai
        6
    molvqingtai  
       2022-05-12 15:39:03 +08:00
    @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
        7
    duduaba  
       2022-05-12 15:51:45 +08:00
    我是受不了 4 个空格,层级深的情况感觉左边空了一大片,视觉上很难受。
    MaxTan
        8
    MaxTan  
       2022-05-12 15:55:44 +08:00
    个人习惯,所有都统一 4 空格缩进
    sunmoon1983
        9
    sunmoon1983  
       2022-05-12 16:01:00 +08:00
    @MaxTan 大赞,我这都是 4 个空格,2 个的话看着不清晰
    murmur
        10
    murmur  
       2022-05-12 16:01:45 +08:00
    我们按 4 个空格,因为后端是 java ,受不了 4 个空格的换个显示器嘛,买个 21:10 的,8 个空格都放得下
    darknoll
        11
    darknoll  
       2022-05-12 16:15:45 +08:00
    前端 2 个空格,后端 4 个空格
    wktrf
        12
    wktrf  
       2022-05-12 16:28:10 +08:00
    2 个空格显示得多些,单引号少按一个键,分号结尾
    iamzuoxinyu
        13
    iamzuoxinyu  
       2022-05-12 16:29:59 +08:00   ❤️ 1
    2 空格缩进说明前端普遍代码写得烂,嵌套层次深。
    icyalala
        14
    icyalala  
       2022-05-12 16:34:17 +08:00   ❤️ 3
    不如折中一下,3 个空格 (狗头)
    fiypig
        15
    fiypig  
       2022-05-12 16:40:47 +08:00
    我一直习惯 4 个
    murmur
        16
    murmur  
       2022-05-12 16:53:38 +08:00
    @icyalala 激进一点 6 个空格,六六大顺
    undeflife
        17
    undeflife  
       2022-05-12 16:53:41 +08:00
    开始我写 c 、java 都是 4 空格
    后来我写 ruby 改 2 空格了

    现在发现用 tab 最好,每个人都可以自己自己宽度,至于不会 tab 和 space 混用就行。
    FightPig
        18
    FightPig  
       2022-05-12 16:54:50 +08:00
    我一直统一两个
    murmur
        19
    murmur  
       2022-05-12 16:55:06 +08:00
    @nomagick 缩进层次多才需要 4 个空格,就英文字体那点宽度,字稍微小点 2 个空格用人眼看层级简直是挑战,难不成每次都拿 ide 折叠一下
    freefcw
        20
    freefcw  
       2022-05-12 16:55:52 +08:00
    @duduaba 层级太多往往说明代码不行,业务逻辑层次过多,一个函数里面大多 2-3 层就足够了
    chenyu0532
        21
    chenyu0532  
       2022-05-12 16:59:03 +08:00
    还是太闲了,加个班吧
    cpstar
        22
    cpstar  
       2022-05-12 16:59:26 +08:00
    以前四个空格,后来发现,还是 tab 靠谱,永远不乱
    libook
        23
    libook  
       2022-05-12 17:04:05 +08:00
    面向需求选择方案,而不是一棵树上吊死。

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

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

    团队约定清楚就好,然后搭配 linter 规则,提供个 editorconfig 文件,基本就不需要关心了。
    nomagick
        24
    nomagick  
       2022-05-12 17:29:05 +08:00
    @murmur 层次多的时候屏宽才是主要问题,滚来滚去比人眼花矛盾更突出,要减少屏宽,所以两个空格。
    而且 markup 对层次没那么敏感,信息密度很低,单位面积多显示一点东西收益更高
    swulling
        25
    swulling  
       2022-05-12 17:30:36 +08:00 via iPhone
    三楼说的对,层级太多四个空格就比较难受
    pota
        26
    pota  
       2022-05-12 17:35:31 +08:00
    4 空格 2 空格实在是不习惯
    zhangshine
        27
    zhangshine  
       2022-05-12 18:58:17 +08:00
    我用 4 个空格,但是很多开源的用 2 个空格
    pomelotea2009
        28
    pomelotea2009  
       2022-05-12 19:24:36 +08:00 via Android
    前 2 后 4 ,而且不喜欢 html 每个属性一行,太占空间了
    snoopyhai
        29
    snoopyhai  
       2022-05-12 19:59:21 +08:00
    空格还是 tab ,2 个还是 4 个, 都可以。 项目里创建 editorConfig 文件,约定好即可。
    Notamo
        30
    Notamo  
       2022-05-13 01:59:19 +08:00
    Tab 键的来源就是古时候的印刷排版,是用来控制文字缩进的独立元素,有自己固定的宽度,不是由多少个空格组成的。后来引用到打字机,再到现代的键盘。

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

    而代码中的缩进,就应该和文字排版中的缩进一样,应该用 Tab 来表示,而不是用多少个空格组成。
    wangtian2020
        31
    wangtian2020  
       2022-05-13 08:52:52 +08:00
    按照个人喜好来
    在项目根目录放个格式化配置文件就不用管了

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

    我个人喜欢单引号字符串,不用分号结尾,2 空格缩进
    没错,我就是认为短的就是好的
    反正就我一个前端
    renhou
        32
    renhou  
       2022-05-13 09:01:24 +08:00
    @molvqingtai
    老哥你好,我想问一下,主流的规范有 airbnb ,Standard 等等
    假如我初始化了一个 vue 或 react 项目,导入 eslint 但并没有导入 Standard 等规范
    那 eslint 是基于什么规范 lint 的呢? eslint 默认的规范嘛
    molvqingtai
        33
    molvqingtai  
       2022-05-13 09:53:30 +08:00   ❤️ 1
    @lian704 如果你使用的是 vue-cli ,在 eslintrc 的 extends 字段中你会看到

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

    第一个是 eslint 默认规则,第二个是 vue 官方的配置
    liuhuansir
        34
    liuhuansir  
       2022-05-13 10:02:38 +08:00
    前端 2 空格、后端 4 空格,go 没搞懂为啥是 8 个空格,看着好别扭
    renhou
        35
    renhou  
       2022-05-13 10:04:55 +08:00
    @molvqingtai
    哦哦哦,原来是这样,看来一直在用的就说默认配置。谢谢
    ryanlid
        36
    ryanlid  
       2022-05-13 10:39:26 +08:00
    2 个空格,单引号,用分号 ~
    MonoLogueChi
        37
    MonoLogueChi  
       2022-05-13 11:45:35 +08:00 via Android
    @murmur 缩进层次多,如果还是 4 空格,就很容易超出屏幕范围,或者是换行过多,换行过多又容易造成缩进层次增加,恶性循环。
    如果 2 空格你觉得不好分辨,可以把缩进线打开。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2755 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 09:38 · PVG 17:38 · LAX 01:38 · JFK 04:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.