V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
retrocode
V2EX  ›  问与答

求推荐下成熟项目的 vue2 可用 eslint 规则, 我要被外包兄弟的代码质量搞疯了

  •  
  •   retrocode · 2022-08-25 19:01:33 +08:00 · 3663 次点击
    这是一个创建于 820 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我已经给前端项目启用了 240 多条规则, 依然拦不住烂代码, 总是有各种奇奇怪怪的写法, 举个例子: 明明可以好好的写

    this.foo = !!value 或者 this.foo = value ? true : false
    

    他这么写我都不会说什么, 就当代码风格问题了, 他们写这样:

    value ? this.foo = true : this.foo = false
    

    orz, 我今天一天都在调规则加规则以求能把他们这种奇葩写法检测出来了

    求助下大家, 有没有现成的成熟项目累积出来的 eslint 规则可以让我抄一份, 不然我这样封封堵堵感觉也蛮难受的

    45 条回复    2022-08-26 20:13:01 +08:00
    daysv
        1
    daysv  
       2022-08-25 19:08:08 +08:00
    请直接用 airbnb 的规则
    cyrbuzz
        2
    cyrbuzz  
       2022-08-25 19:09:08 +08:00   ❤️ 5
    没绷住= =,笑死🤣。
    wu67
        3
    wu67  
       2022-08-25 20:04:54 +08:00
    尼玛我吃着披萨差点喷键盘上了....这什么奇怪代码...
    westoy
        4
    westoy  
       2022-08-25 20:06:38 +08:00
    那行是生成器生成的吧.....
    molvqingtai
        5
    molvqingtai  
       2022-08-25 21:12:10 +08:00
    airbnb
    gloye
        6
    gloye  
       2022-08-25 21:58:01 +08:00
    起码会用个三目
    if(value == true){

    }
    gauzung
        7
    gauzung  
       2022-08-25 22:22:21 +08:00
    平常都是 if else ,三目能这么用真的没注意到,不过这么写应该容易被打吧
    yeqizhang
        8
    yeqizhang  
       2022-08-26 00:24:06 +08:00 via Android
    哈哈哈,js 就是能写出各种奇形怪状的代码
    7gugu
        9
    7gugu  
       2022-08-26 01:27:22 +08:00
    这第二条确实有点怪
    autoxbc
        10
    autoxbc  
       2022-08-26 01:41:56 +08:00   ❤️ 3
    感觉就是水平有限,你把所有的路堵死,螃蟹也不能竖着走
    eason1874
        11
    eason1874  
       2022-08-26 03:00:46 +08:00
    我感觉不是水平问题,是个人偏好,有的人就是不喜欢循规蹈矩,喜欢奇奇怪怪的写法

    if (value) alert('hello'); // 他们会写成

    value && alert('hello');
    Qy2FbR
        12
    Qy2FbR  
       2022-08-26 03:20:05 +08:00 via Android
    @eason1874 后面这种写法有啥问题吗
    WillBC
        13
    WillBC  
       2022-08-26 08:05:02 +08:00 via iPhone
    让他们买书看《代码整洁之道》《重构》。进行 Code Review ,不合规的代码不给合并。
    eason1874
        14
    eason1874  
       2022-08-26 08:52:19 +08:00
    @Qy2FbR #12 这跟楼主的例子一样,在运行上没问题,但属于是用表达式的形式写条件语句,代码短的情况看着还行,代码长的时候可读性就非常差
    515576745
        15
    515576745  
       2022-08-26 08:59:04 +08:00 via Android
    后端转前端会有这种情况 比如我 🤣
    dabaoziwy
        16
    dabaoziwy  
       2022-08-26 09:17:59 +08:00
    给你看看我这里的外包小伙伴写的 ts 吧
    dabaoziwy
        17
    dabaoziwy  
       2022-08-26 09:18:06 +08:00
    const state = reactive<{
    id: string | any
    unitNo: string | any
    }>({
    id: '',
    unitNo: ''
    })
    wukongkong
        18
    wukongkong  
       2022-08-26 09:19:18 +08:00 via Android
    @dabaoziwy 哼,any 就是好
    Qy2FbR
        19
    Qy2FbR  
       2022-08-26 09:29:43 +08:00 via Android   ❤️ 3
    @eason1874 不是很同意,这种写法我在不同公司见到过很多次,个人感觉可读性反而更好。
    如果你们会写
    A = b || foo()
    那我觉得
    b && foo() 也没啥问题,都是利用 operator short circuit 而已
    hervey0424
        20
    hervey0424  
       2022-08-26 09:37:33 +08:00
    @dabaoziwy anyscript
    yaphets666
        21
    yaphets666  
       2022-08-26 09:38:03 +08:00
    @Qy2FbR 问题很大,后面这种写法可读性不好,这不用多说。
    shilianmlxg
        22
    shilianmlxg  
       2022-08-26 09:41:57 +08:00
    @yaphets666 我一般都是 callback && callback(); // 如果 callback 存在,则立即执行 callback 方法,感觉挺方便的啊。
    ruoxie
        23
    ruoxie  
       2022-08-26 09:48:47 +08:00
    我司整编 jsx 里写好几层三元运算
    yaphets666
        24
    yaphets666  
       2022-08-26 09:49:20 +08:00
    @shilianmlxg 有 promise 我基本不用 callback 了,当然我是写业务的,不是写基建的。
    w3q29
        25
    w3q29  
       2022-08-26 09:53:34 +08:00
    @dabaoziwy 写完 any 之后因为 eslint 有提示,再用注释把 eslint 提示给屏蔽掉🤣
    stoluoyu
        26
    stoluoyu  
       2022-08-26 10:16:05 +08:00
    @dabaoziwy #17 那个这个 string 是为了……
    libook
        27
    libook  
       2022-08-26 10:24:29 +08:00
    linter 只能搞定一些能明确识别且通常是因为疏忽导致的违规,真想提升代码质量,可能只能靠 code review……

    题主发的外包这个代码,第一眼看有点懵,需要捋一遍执行优先级,会很影响看代码的效率;其实如果里面元素都用括号括好,我个人也能接受。
    dabaoziwy
        28
    dabaoziwy  
       2022-08-26 10:53:40 +08:00
    @stoluoyu 这就是我的吐槽点,乱用联合类型。。。
    a33291
        29
    a33291  
       2022-08-26 11:40:40 +08:00
    @eason1874 我也习惯后边这么写 🤣,还有其他人吗,举个手统计下


    题外话,我突然有点理解为啥写 java 的会说 C#甜得齁了,因为他们限制了大家就只有一种写法.
    Leviathann
        30
    Leviathann  
       2022-08-26 11:51:58 +08:00
    @a33291 React jsx 以及没有 optional chain 语法的环境就得这么写
    这种属于残废 js 导致的固定 pattern 写法,不是细读,而是识别这个 pattern
    taotaodaddy
        31
    taotaodaddy  
       2022-08-26 13:10:41 +08:00
    xiao109
        32
    xiao109  
       2022-08-26 13:11:44 +08:00
    学会接纳自己的屎山和别人的屎山
    taotaodaddy
        33
    taotaodaddy  
       2022-08-26 13:13:32 +08:00
    @taotaodaddy 发错了...
    wuxiaoqing234
        34
    wuxiaoqing234  
       2022-08-26 13:24:59 +08:00
    只许天下人负我 不许我负天下人!
    murmur
        35
    murmur  
       2022-08-26 13:43:46 +08:00
    @eason1874 jsx 习惯这样写,等价于 vue 的 v-if ,这也是我抨击 react 一点,用着奇怪的写法,连最基本的代码对齐都做不到,别人模板一条线极致的优雅,这凸出来一块一块的
    gauzung
        36
    gauzung  
       2022-08-26 14:10:25 +08:00
    @a33291 #29 🙋‍♂
    yor1g
        37
    yor1g  
       2022-08-26 14:42:19 +08:00
    看同事代码 idea 一片黄色 lint 一片红都不管呢 能编译能跑没 bug 啥都不是事
    dsggnbsp
        38
    dsggnbsp  
       2022-08-26 17:07:06 +08:00
    我觉得大可不必啊 存在即合理哈哈哈哈 ,而且我真的没有觉得过分奇怪。虽然我本人不会这么写
    hzxxx
        39
    hzxxx  
       2022-08-26 17:26:56 +08:00
    有没有可能是他们在玩你呢?
    vue 源码里就挺多骚写法的,比这个骚多了
    yuancoder
        40
    yuancoder  
       2022-08-26 17:40:17 +08:00
    能看懂就没啥问题
    wenbinwu
        41
    wenbinwu  
       2022-08-26 17:46:07 +08:00
    能看懂不就完了嘛
    嫌弃的话看到一处改一处就是了
    chaucerling
        42
    chaucerling  
       2022-08-26 17:47:13 +08:00
    加 husky ,不符合规则的代码不能提交
    eason1874
        43
    eason1874  
       2022-08-26 19:41:42 +08:00
    @Qy2FbR #19 我说了短的看着还行,长了才影响阅读性,你还举短的例子。。。

    说它长了影响可读性,不是指用短路写法有影响,而是指用表达式的形式写条件语句有影响

    // 像这样只扫一眼就容易看错
    var value1 = condition1 || condition2 ? value2 : value3
    condition5 && test('txtvalue', value2, value3, value4)
    (condition1 === 'hello' || condition2 === 'world!') ?
    test('statement', value1) : test2('statement', value2)

    // 而常规写法,扫一眼开头的关键字就知道哪里是条件语句,不需额外的反应时间
    var value1 = condition1 || condition2 ? value2 : value3
    if (condition5) test('txtvalue', value2, value3, value4)
    if (condition1 === 'hello' || condition2 === 'world!') {
    test('statement', value1)
    } else {
    test2('statement', value2)
    }
    eason1874
        44
    eason1874  
       2022-08-26 20:00:47 +08:00
    @murmur #35 JSX 这类模板语言用尽量简短的语法,我倒觉得可以,JS 尽量简洁,避免大段的 JS 跟 HTML 混淆在一起。纯 JS 来说,我就觉得这样不好,把一门高级语言写出两种风格,一部分像汇编,一部分又常规语法
    codingBug
        45
    codingBug  
       2022-08-26 20:13:01 +08:00
    antfu 大佬的,fork 一份或者直接用这套

    https://github.com/antfu/eslint-config
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2919 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 03:38 · PVG 11:38 · LAX 19:38 · JFK 22:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.