前端代码缩进, 2 格还是 4 格? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
sadyx
V2EX    程序员

前端代码缩进, 2 格还是 4 格?

  •  
  •   sadyx
    SADYX 2023-07-25 15:41:38 +08:00 7393 次点击
    这是一个创建于 812 天前的主题,其中的信息可能已经有所发展或是发生改变。

    工作用 react ,我一直是 4 格,但同事都是 2 格。大家的习惯是什么样的?

    83 条回复    2023-07-27 10:42:54 +08:00
    SniperXu
        1
    SniperXu  
       2023-07-25 15:44:06 +08:00
    我是 4 格,同事 2 格
    mdn
        2
    mdn  
       2023-07-25 15:46:38 +08:00
    prettier .editorconfig
    写代码都是直接 回车,然后格式化,不知道是 tab 还是 空格
    Pastsong
        3
    Pastsong  
       2023-07-25 15:48:56 +08:00   1
    两格,jsx 里混了 xml ,本身缩进就多。缩进这东西有了能区分就行,缩太多占屏幕空间
    tool2d
        4
    tool2d  
       2023-07-25 15:50:59 +08:00
    我偏后端都是 4 格,但是前端有手写一大堆 div 嵌套情况,2 格也是完全能理解的。
    Megrax
        5
    Megrax  
       2023-07-25 15:52:58 +08:00
    2 格,写 HTML/XML 缩进太多,4 格太浪费空间,代码缩进只是为了阅读时层次清晰分明,2 格足矣,写 JS 啥的就顺便都统一用 2 格了。
    7inFen
        6
    7inFen  
       2023-07-25 15:59:03 +08:00
    2 格用的多
    https://github.com/facebook/react/blob/main/.editorconfig

    ```
    # https://editorconfig.org
    root = true

    [*]
    charset=
    end_of_line = lf
    indent_size = 2
    indent_style = space
    insert_final_newline = true
    max_line_length = 80
    trim_trailing_whitespace = true

    [*.md]
    max_line_length = 0
    trim_trailing_whitespace = false

    [COMMIT_EDITMSG]
    max_line_length = 0
    ```
    smark
        7
    smark  
       2023-07-25 16:08:53 +08:00
    自从用了笔记本就换 2 格了
    fox2081
        8
    fox2081  
       2023-07-25 16:12:10 +08:00
    你们居然不统一 editorconfig 和 prettier 的?目前基本都用 2 格了吧,前端主要是 html 嵌套深度问题
    AV1
        9
    AV1  
       2023-07-25 16:14:00 +08:00
    以前我都是用 tab 缩进的,后来新项目的脚手架都是默认两格,就跟着用两格,懒得改了。
    leroy20317
        10
    leroy20317  
       2023-07-25 16:14:22 +08:00
    不管两格还是四格 公司代码建议统一标准 eslint prettier 加 git hooks
    我更倾向于两格 四格有点浪费
    Leonard
        11
    Leonard  
       2023-07-25 16:15:11 +08:00
    vsc 格式化给几格就是几格,我都可以
    106npo
        12
    106npo  
       2023-07-25 16:15:56 +08:00 via Android
    tab 缩进,你爱用几格就配几格
    gimp
        13
    gimp  
       2023-07-25 16:16:55 +08:00
    写后端 4 空格,写前端 2 空格。
    dif
        14
    dif  
       2023-07-25 16:20:24 +08:00
    4 格,tab 也设置 4 个空格。
    ethusdt
        15
    ethusdt  
       2023-07-25 16:20:39 +08:00
    2 格,后来转去写 Swift ,用 4 格好不习惯。
    bruce0
        16
    bruce0  
       2023-07-25 16:21:54 +08:00   1
    我用 go 几格 我说了也不算
    QUC062IzY3M1Y6dg
        17
    QUC062IzY3M1Y6dg  
       2023-07-25 16:22:03 +08:00
    tab 缩进 2 格
    cnbatch
        18
    cnbatch  
       2023-07-25 16:22:40 +08:00
    4 格
    我在公司用 C# 做的网站项目,需要前后格式统一
    richangfan
        19
    richangfan  
       2023-07-25 16:24:29 +08:00
    前后端都是 4 格
    Creamliu
        20
    Creamliu  
       2023-07-25 17:43:48 +08:00
    公司规范是两格。但是有个资深 sb 老是不配置代码规范配置文件,直接用 tab 。搞得我 idea 老是报黄色。
    yjim
        21
    yjim  
       2023-07-25 17:46:35 +08:00
    项目统一就好了,印象中我见过的项目,后端 4 格比较多,前端 2 格
    houshuu
        22
    houshu  
       2023-07-25 17:49:31 +08:00 via iPhone
    我是啥语言都四格,如果四个看上去挤了,那我就知道该把代码分开了。
    yukiwc
        23
    yukiwc  
       2023-07-25 17:51:43 +08:00
    4 格,2 格太挤了看不习惯
    ysc3839
        24
    ysc3839  
       2023-07-25 17:51:48 +08:00 via Android
    我自己写 C++是 Tab4 格,写前端是 Space2 格
    xiangyuecn
        25
    xiangyuecn  
       2023-07-25 17:52:06 +08:00
    2 格反人类,肉眼看去和没缩进一样,干脆不缩进得了
    molvqingtai
        26
    molvqingtai  
       2023-07-25 17:57:56 +08:00
    前端一般都是 2 格
    theprimone
        27
    theprimone  
       2023-07-25 18:03:34 +08:00
    尝试做了一个全套代码规范的脚本 https://github.com/jannajs/janna 目前自用还行
    CodeCodeStudy
        28
    CodeCodeStudy  
       2023-07-25 18:06:25 +08:00
    后端 4 格,因为后端嵌套没那么多,用 4 格看清楚些,前端用 2 格,因为前端实在嵌套太多了
    sdjl
        29
    sdjl  
       2023-07-25 18:07:44 +08:00
    python 4, js 2
    mdn
        30
    mdn  
       2023-07-25 18:09:02 +08:00
    @xiangyuecn 2 格反人类?那你是没见过 js 回调地狱
    hgc81538
        31
    hgc81538  
       2023-07-25 18:24:11 +08:00
    用 tab 不好, 只用 1 字, 而且用可以按喜好用 2/3/4 空格示, 我不明白什空格是主流...
    woshipanghu
        32
    woshipanghu  
       2023-07-25 18:26:17 +08:00
    前端嵌套太多了 2 格比较好
    chu1337
        33
    chu1337  
       2023-07-25 18:41:46 +08:00
    统一即美
    churchill
        34
    churchill  
       2023-07-25 19:07:59 +08:00
    2 ,没有看不清楚吧,看图说话
    [Imgur]( https://imgur.com/SFDIOEJ)
    777777
        35
    777777  
       2023-07-25 19:10:09 +08:00
    go 强行统一
    xiangyuecn
        36
    xiangyuecn  
       2023-07-25 19:19:36 +08:00   1
    @mdn #30 @woshipanghu #32 不管是 js ,还是 html ,4 空格或者 1tab 的可读性完全吊打 2 空格的,如果硬要上 5 层 10 层 100 层的缩进,几格都不好使。另:回调地狱不单是 js 的专利,只要你愿意,很多语言都支持函数套函数写法,写的烂不能怪缩进
    duke807
        37
    duke807  
       2023-07-25 19:52:32 +08:00 via Android
    嫌 4 格太长的估计没写过 linux kernel 代码
    darknoll
        38
    darknoll  
       2023-07-25 20:15:35 +08:00
    必须是两个空格
    guo4224
        39
    guo4224  
       2023-07-25 20:56:01 +08:00 via iPhone
    tab
    hello2090
        40
    hello2090  
       2023-07-25 20:57:37 +08:00
    有没有人相信,我曾经在缩进 3 格的地方干了 6 年!
    woshipanghu
        41
    woshipanghu  
       2023-07-25 21:00:11 +08:00
    @xiangyuecn 那你可能没写过稍微复杂点的前端 页面随随便 10 个嵌套很正常
    tediorelee
        42
    tediorelee  
       2023-07-25 21:16:51 +08:00
    2
    IvanLi127
        43
    IvanLi127  
       2023-07-25 21:22:57 +08:00 via Android
    两格。。现在前端太复杂了,React 如果用 C
    ontext 的话,四格那没两下就到屏幕外边去了。。。
    darkengine
        44
    darkengine  
       2023-07-25 21:25:42 +08:00
    React 我用两格, app (OC, Java)用四格
    liunice
        45
    liunice  
       2023-07-25 21:51:18 +08:00
    我以前喜欢四格,自从使用超宽屏后,改为两格。左边放编辑器,右边放浏览器。
    cloudzqy
        46
    cloudzqy  
       2023-07-25 21:52:50 +08:00
    如果是纯写 node ,可以用四格。写 jsx ,vue 之类的,不要用 4 格。
    4 格的可读性是好了,但是写 html 相关的东西,随便套个几层就爆了。
    wyx119911
        47
    wyx119911  
       2023-07-25 21:54:57 +08:00   2
    总结:4 格太长浪费空间,2 格容易看不清,我选择 3 格
    luvxy
        48
    luvxy  
       2023-07-26 09:03:14 +08:00
    4 格,2 格觉得挤说明要封装了
    LindsayZhou
        49
    LindsayZhou  
       2023-07-26 09:16:38 +08:00
    看语言。
    内核那边是 tab 缩进,8 宽度
    Python 的 pep8 是建议 4 空格
    sunmoon1983
        50
    sunmoon1983  
       2023-07-26 09:52:06 +08:00
    4 空格,必须的
    jorneyr
        51
    jorneyr  
       2023-07-26 09:59:21 +08:00
    比较喜欢 4 个空格,看起来舒服,2 个空格太挤了。
    现在前端 HTML 一般情况层次不会太深了,都抽象成组件了。
    jixule
        52
    jixule  
       2023-07-26 10:25:20 +08:00
    4 格舒服,但是 vscode 分栏显示的时候太占地方,最头疼横向滚动
    psklf
        53
    psklf  
       2023-07-26 10:30:20 +08:00
    这种帖能进水深火热不 @Livid
    tisswb
        54
    tisswb  
       2023-07-26 10:43:58 +08:00
    前端 2 格,后端 4 格( php ,python ,java )
    StateMa
        55
    StateMa  
       2023-07-26 11:01:09 +08:00
    4 ,后端干旧了习惯了,虽说现在都是 eslint 了,无所谓了
    tyrone2333
        56
    tyrone2333  
       2023-07-26 11:05:48 +08:00
    公司屏幕小, 项目都是 2 格, 家里大屏喜欢 4 格
    ma836323493
        57
    ma836323493  
       2023-07-26 11:16:24 +08:00
    4 格, 眼睛不管用了 2 格看不出来
    dongdongdong
        58
    dongdongdong  
       2023-07-26 11:17:13 +08:00
    2
    thinkershare
        59
    thinkershare  
       2023-07-26 11:21:07 +08:00
    我喜欢 4 个空格,2 个空格太短了。不过项目启动时候会和团队的人决策,然后写入到代码风格检测工作流,最终提交到仓库反正是统一的格式。你自己本地怎么搞别人也管不了。
    me1onsoda
        60
    me1onsoda  
       2023-07-26 11:26:39 +08:00
    ide 一键 reformat code ,管他是几格
    ispinfx
        61
    ispinfx  
       2023-07-26 11:27:38 +08:00 via iPhone   1
    3 格,别争了
    karott7
        62
    karott7  
       2023-07-26 11:42:59 +08:00
    1 格
    Arrowing
        63
    Arrowing  
       2023-07-26 11:48:48 +08:00
    不管语言都喜欢 2 格,能看到更多内容
    lmmlwen
        64
    lmmlwen  
       2023-07-26 11:51:59 +08:00
    前端 2 格 html 你懂的
    后端 4 格 你懂的
    linkopeneyes
        65
    linkopeneyes  
       2023-07-26 11:53:00 +08:00
    我都是跟着项目的 prettier 和 eslint 走的,git 提交也有验证,不会出现混用的情况吧
    sankooc
        66
    sankooc  
       2023-07-26 13:46:17 +08:00
    我一般是用 2 格 主要觉得 2 格好看一些
    skiy
        67
    skiy  
       2023-07-26 13:51:21 +08:00
    四格。
    但写 yaml 时,两格。

    基本不用 tab ,因为文档有时是空格,有时 tab ,会导致格式不一致,然后又不明显。
    flyinghigherair
        68
    flyinghigherair  
       2023-07-26 13:54:23 +08:00
    4 格,从 vs 时代写 asp 时候遗传下来的习惯
    zackzergzeng
        69
    zackzergzeng  
       2023-07-26 13:56:33 +08:00
    之前代码写几格就写几格,我 js 和 python 混写,js2 格,python4 格
    daliusu
        70
    daliusu  
       2023-07-26 13:57:13 +08:00
    写了七八年前端,除了很早期的时候直接写 html ,否则真没见过 4 格的
    Jaosn
        71
    Jaosn  
       2023-07-26 14:02:06 +08:00
    前端肯定 2 ,4 的话配合上 80 宽度,无法想象
    HCT1
        72
    HCT1  
       2023-07-26 14:25:27 +08:00
    坚定的 2 格党,vue 和 react 的文档也都是 2 格,跟人辩论也更有信心
    startdust
        73
    startdust  
       2023-07-26 14:27:37 +08:00
    前端,2 格
    debuggerx
        74
    debuggerx  
       2023-07-26 14:45:04 +08:00
    个人习惯 2 格,换行从 80 改为 120 ~ 160
    greatbody
        75
    greatbody  
       2023-07-26 14:51:50 +08:00
    看你的电脑屏幕宽不宽,宽就 4 格,否则 2 格。
    leeggco
        76
    leeggco  
       2023-07-26 14:58:26 +08:00
    2 格
    tuutoo
        77
    tuutoo  
       2023-07-26 15:18:35 +08:00
    前端应该 2 格的多点吧。 后端 C#是 Tab 或者是 4 格的。
    Longerrrr
        78
    Longerrrr  
       2023-07-26 15:39:50 +08:00
    ediorconfig 用 tab ,然后 tab 长度显示按个人喜好选 2 格还是 4 格。
    Masoud2023
        79
    Masoud2023  
       2023-07-26 15:42:00 +08:00
    2
    Laobai
        80
    Laobai  
       2023-07-26 15:48:14 +08:00
    看格式化的时候试几格,那就是几格
    K120
        81
    K120  
       2023-07-26 17:23:11 +08:00
    前端 2 格是正确! 后端 4 格。
    alexchan
        82
    alexchan  
       2023-07-26 17:29:46 +08:00
    0 格,主打一个就是整齐
    ajan
        83
    ajan  
       2023-07-27 10:42:54 +08:00
    tab , 4 格,自动换行
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5389 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 41ms UTC 09:24 PVG 17:24 LAX 02:24 JFK 05:24
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86