爱意满满的作品展示区。
xcatliu

我花了两个月时间,定制出了心目中「完美」的 ESLint 规则,我用四个空格缩进

  •  
  •   xcatliu ·
    xcatliu · Aug 25, 2017 · 22401 views
    This topic created in 3357 days ago, the information mentioned may be changed or developed.

    包含以下几种配置项:

    配置原则

    我们依据以下三条原则,研读了 ESLint 所有的配置项,定制出了心目中的「完美」 ESLint 配置。

    1. 能够帮助发现代码错误的规则,全部开启
    2. 配置不应该依赖于某个具体项目,而应尽可能的合理
    3. 帮助保持团队的代码风格统一,而不是限制开发体验

    配置解读

    我们对每一条配置,都有详尽的注释,这样不仅方便了我们自己查阅某项配置的意义和原因,也使大家更容易配置出自己心目中的规则:

    • 每一条配置都有注释说明此配置的用途
    • 对于理解困难的配置,都在注释中有举例
    • 对于有争议的配置,都在注释中说明了为什么要这么配置的原因
    • 对于关闭掉的配置,都在注释中有对应的原因说明,以及 @off 的标识
    • 对于能够 autofix 的配置,都在注释中有标注 @autofix

    详细的配置内容在这里:

    下面列出一个代码片段供参考:

    module.exports = {
        parser: 'babel-eslint',
        parserOptions: {
            ecmaVersion: 2017,
            sourceType: 'module',
            ecmaFeatures: {
                experimentalObjectRestSpread: true,
                jsx: true
            }
        },
        env: {
            browser: true,
            node: true,
            commonjs: true,
            es6: true
        },
        // 以当前目录为根目录,不再向上查找 .eslintrc.js
        root: true,
        rules: {
            //
            //
            // 可能的错误
            // 这些规则与 JavaScript 代码中可能的语法错误或逻辑错误有关
            //
            // 禁止 for 循环出现方向错误的循环,比如 for (i = 0; i < 10; i--)
            'for-direction': 'error',
            // getter 必须有返回值,并且禁止返回空,比如 return;
            'getter-return': [
                'error',
                {
                    allowImplicit: false
                }
            ],
            // 禁止将 await 写在循环里,因为这样就无法同时发送多个异步请求了
            // @off 要求太严格了,有时需要在循环中写 await
            'no-await-in-loop': 'off',
            // 禁止与负零进行比较
            'no-compare-neg-zero': 'error',
            // 禁止在 if, for, while 里使用赋值语句,除非这个赋值语句被括号包起来了
            'no-cond-assign': [
                'error',
                'except-parens'
            ],
            // 禁止使用 console
            // @off console 的使用很常见
            'no-console': 'off',
            // 禁止将常量作为 if, for, while 里的测试条件,比如 if (true), for (;;),除非循环内部有 break 语句
            'no-constant-condition': [
                'error',
                {
                    checkLoops: false
                }
            ],
            // 禁止在正则表达式中出现 Ctrl 键的 ASCII 表示,即禁止使用 /\x1f/
            // 开启此规则,因为字符串中一般不会出现 Ctrl 键,所以一旦出现了,可能是一个代码错误
            'no-control-regex': 'error',
            // @fixable 禁止使用 debugger
            'no-debugger': 'error',
            // 禁止在函数参数中出现重复名称的参数
            'no-dupe-args': 'error',
            // 禁止在对象字面量中出现重复名称的键名
            'no-dupe-keys': 'error',
        }
    };
    

    使用方法

    请在 GitHub Repo 中查看。

    66 replies  •  2018-12-14 12:25:50 +08:00
    xcatliu
    xcatliu
    OP
    Aug 25, 2017
    1
    我用四个空格缩进,你呢?
    leopku
    leopku
    Aug 25, 2017 via iPhone❤️1
    2
    开源项目 2 个,公司项目 4 个(看你肿么办,,,
    isayme
    isayme
    Aug 25, 2017 via iPhone❤️1
    3
    我用 standard,无配置,都不用争了。
    xcatliu
    xcatliu
    OP
    Aug 25, 2017 via iPhone
    4
    @leopku 自从用了四个,就觉得两个太丑了。
    dong3580
    dong3580
    Aug 25, 2017 via Android❤️1
    5
    我用 2 格缩进,不然,公司项目报错😂
    isb
    isb
    Aug 25, 2017❤️1
    6
    用 2 个啊。。默认 vue-cli 默认是 2 个。。。
    xcatliu
    xcatliu
    OP
    Aug 25, 2017 via iPhone❤️1
    7
    @isb 2 个还是 4 个,纯粹个人喜好了,我的屏幕足够大,四个看的挺顺眼的😂
    ps
    ps
    Aug 25, 2017 via Android❤️1
    8
    四个空格+1
    wozi
    wozi
    PRO
    Aug 25, 2017❤️1
    9
    希望提供英文注释版
    xcatliu
    xcatliu
    OP
    Aug 25, 2017 via iPhone
    10
    @ps 握爪🤝
    zpvip
    zpvip
    Aug 25, 2017❤️1
    11
    原来四个,自从用了两个,觉得四个真是太大了

    有编辑器自动对齐,点开头,自动高亮结尾,没必要用四个目测了。
    xcatliu
    xcatliu
    OP
    Aug 25, 2017 via iPhone
    12
    @lixinyang 下一步工作会是完善 test,然后用工具把 test 直接转化为文档网页。然后就会开始英文版的工作
    xcatliu
    xcatliu
    OP
    Aug 25, 2017 via iPhone
    13
    @zpvip 现在的编辑器都很智能,四个两个都不是问题啦
    jeneser
    jeneser
    Aug 25, 2017 via Android❤️1
    14
    standard
    2 格
    vardarling
    vardarling
    Aug 25, 2017 via iPhone❤️1
    15
    2 格缩紧 2k 分辨率上面看的难受
    djyde
    djyde
    Aug 25, 2017❤️1
    16
    我用 standard
    dong3580
    dong3580
    Aug 25, 2017❤️1
    17
    @xcatliu
    你不觉得 4 格浪费空间么^_^哈哈
    leamtrop
    leamtrop
    Aug 25, 2017❤️1
    18
    2 格,对齐更好看
    xcatliu
    xcatliu
    OP
    Aug 25, 2017
    19
    @dong3580 屏幕大,就是爽!
    xcatliu
    xcatliu
    OP
    Aug 25, 2017
    20
    @vardarling 同意
    libook
    libook
    Aug 25, 2017❤️1
    21
    在每行字符数与缩进空格数之间做平衡:每行字符数总体不多的项目(如 Node Web 服务项目)就空 4 格,提升缩进辨识度;每行字符数总体较多的项目(如 VUE 等需要写很长 HTML 标签的项目)就空 2 格,增加每一页代码的容量,压缩信息密度。

    觉得 standard 很好,唯独分号的规则一直有顾虑,因为如果项目按照 standard 的规则来做的话省略分号当然没有任何问题,但是一旦形成习惯在其他没有严格受到 standard 约束的地方(比如临时写 MongoDB 脚本)使用可能就不大好了。
    hronro
    hronro
    Aug 25, 2017❤️1
    22
    其实 ESLint 已经有像 standard、airbnb 这些很棒的规则了,倒是 TSLint 一直没找到很完善的规则
    tinkerer
    tinkerer
    Aug 26, 2017❤️1
    23
    感谢分享
    df4VW
    df4VW
    Aug 26, 2017❤️2
    24
    eslint 能自定义规则真的是浪费时间
    seki
    seki
    Aug 26, 2017❤️1
    25
    空格数目的圣战先放一边

    先说说写不写分号 XD
    leopku
    leopku
    Aug 26, 2017 via iPhone❤️1
    26
    @xcatliu 昨天同事做 rebase,科普了一下 kdiff3,结果发现有些缩进很多的代码在三列下要横向拖才能看见。他的屏幕还非常大,,,丑不丑的贱人见智了,对我来说实用更重要
    123s
    123s
    Aug 26, 2017❤️1
    27
    从 4 个被潜移默化成 2 个
    xcatliu
    xcatliu
    OP
    Aug 26, 2017 via iPhone
    28
    @libook 感谢,你说的很有道理,缩进的空格数量应该看情况决定。分号可以 autofix,所以怎么设置都没问题吧
    xcatliu
    xcatliu
    OP
    Aug 26, 2017
    29
    @hronro airbnb 的规则确实已经很好用了,我之前也一直都用的 airbnb,不过后来慢慢的有些不一样的地方需要覆盖掉它的配置。然后每次有新项目就得复制一份,维护多个配置,有点麻烦。所以最后干脆全部自己配置一遍了。
    eslint 貌似也支持 tslint 的 parser,回头我去研究一下。
    xcatliu
    xcatliu
    OP
    Aug 26, 2017
    30
    @df4VW 我这种强迫症患者表示自定义规则很爽哈哈
    xcatliu
    xcatliu
    OP
    Aug 26, 2017
    31
    @seki 分号必须有!不写分号看着太难受了😂
    xcatliu
    xcatliu
    OP
    Aug 26, 2017
    32
    @leopku 针对一行的代码太长了,可以把编辑器设置成自动换行显示,这样就没有横向滚动条了。缩进太多本身就会让代码更难阅读,如果能够重构成更少缩进的就更好了
    rogwan
    rogwan
    Aug 26, 2017 via Android❤️1
    33
    用 {} 作为一种封闭手段,嵌套多了,尾部的 } 数量数不清楚哇😭

    缩进处理逻辑分隔,开始有点绕,多层次的时候比较清爽
    Rocka
    Rocka
    Aug 26, 2017 via Android❤️1
    34
    哇,4 格缩进加分号,找到组织了 😂
    doubleflower
    doubleflower
    Aug 26, 2017❤️1
    35
    我曾经也是 4 空格党(从 py 带来的习惯),但实在抗不过 JS 中大家都用 2 空也转 2 空了。
    不过转了 2 空后发现 2 空才是真理啊啊啊啊啊啊啊啊啊啊

    另外有 standard js 就别折腾别的了,那个几乎就是完美的
    xcatliu
    xcatliu
    OP
    Aug 26, 2017 via iPhone
    36
    @Rocka 😁
    Jiavan
    Jiavan
    Aug 26, 2017 via Android❤️1
    37
    一开始学编程就养成 4 空格的缩进,后来看到大部分开源项目开始用 2 个,强制自己用 2 个了一段时间,感觉挺难受的,可读性没 4 个强,又切回来了,其实看个人喜好吧,听说因为之前 callback hell 的原因用 2 个少占空间,但是现在不写 callback hell 和屏幕大就不在乎了。。。自己开心就好 2333
    Biwood
    Biwood
    Aug 26, 2017❤️1
    38
    一开始我用 2 个空格缩进,因为节省空间,奈何团队大部分都是用 4 个空格。其实有些人还区分不了 space 跟 tab,大部分编辑器默认是 tab,他们以为是 4 个空格,那只能随大流,强制 tab 转 4 个空格喽
    autoxbc
    autoxbc
    Aug 26, 2017❤️1
    39
    不用 tab 缩进的送去祭天吧
    digimoon
    digimoon
    Aug 26, 2017❤️1
    40
    用 tab
    hst001
    hst001
    Aug 26, 2017❤️1
    41
    两个空格空间间隔太短,4 个空格太啰嗦,最后选择一个 tab
    xcatliu
    xcatliu
    OP
    Aug 26, 2017 via iPhone
    42
    @hst001 最后选择三个空格,嗯,刚刚好
    fy
    fy
    Aug 26, 2017❤️1
    43
    反正觉得 C 系语言都应该 4 空格缩进,后来看到一些 js 项目的时候心里一阵“????”然后继续用四个空格缩进。
    rashawn
    rashawn
    Aug 26, 2017❤️1
    44
    个人感觉, 应该一套写代码规则, 一套读代码规则, 楼主可以看一下 three.js 的代码, 属于那种易读的, 方便其他人看源码, 但是写起来空行太多, 一屏看不到太多的代码. 其实可以做一个工具, 两套规则, 自己写的是一套, 然后提交的是另一套.

    不过单靠 eslint fix 不太好搞.
    rashawn
    rashawn
    Aug 26, 2017❤️1
    45
    另外, 楼主你这个规则本身为什么有的最后有逗号有的没有, 我还是习惯最后加逗号的
    xcatliu
    xcatliu
    OP
    Aug 26, 2017 via iPhone
    46
    @fy 感觉现在 js 还是两个空格缩进的人多一些
    xcatliu
    xcatliu
    OP
    Aug 26, 2017 via iPhone
    47
    @rashawn 我习惯于最后一项没有逗号,不过规则中没有开启这个检查,有没有逗号都允许吧。示例代码中最后有代码是因为是复制的代码。
    exoticknight
    exoticknight
    Aug 26, 2017❤️1
    48
    @xcatliu 自从用了两个,就觉得四个太占位置了
    si
    si
    Aug 26, 2017❤️1
    49
    我一般用 4 个空格,2 个不够明显.
    fy
    fy
    Aug 27, 2017❤️1
    50
    @xcatliu 是呀两个的人很多 但我也觉得两个不明显。而且 json 这种两格不难受吗?
    可能也跟我 es6 之前长期用 coffee 有关吧
    chuanqirenwu
    chuanqirenwu
    Aug 27, 2017❤️1
    51
    大神,mobi.css 还在开发中么?
    ajan
    ajan
    Aug 27, 2017❤️1
    52
    只用 tab
    zhea55
    zhea55
    Aug 27, 2017 via iPhone❤️1
    53
    本来一直都是四个空格。直到 nodejs 出来以后,异步 callback 层层堆叠


    演变成 2 个了
    xcatliu
    xcatliu
    OP
    Aug 28, 2017 via iPhone
    54
    @chuanqirenwu 在呀,现在已经可以用了呀。主要在做一些推广工作
    mosliu
    mosliu
    Aug 28, 2017❤️1
    55
    写 java 时习惯 4 个
    写 js 直接用了 air-bnb 的规则
    自动格式化成两个 看多了也习惯。
    whypool
    whypool
    Aug 28, 2017❤️1
    56
    4 空格+分号
    bzw875
    bzw875
    Aug 29, 2017❤️1
    57
    一行代码也不看,直接 copy 过来
    icedx
    icedx
    Aug 29, 2017❤️1
    58
    xcat 每次来都有干货
    BearD01001
    BearD01001
    Aug 29, 2017❤️1
    59
    ESLint 本身不就是规范代码书写的吗, 搞自定义规则感觉像是推翻了它本身存在的意义, 无法理解 😟
    SourceMan
    SourceMan
    Aug 29, 2017❤️1
    60
    从你的标题,我就觉得不完美了,4 空格缩进
    xcatliu
    xcatliu
    OP
    Aug 29, 2017❤️1
    61
    @icedx 😃
    xcatliu
    xcatliu
    OP
    Aug 29, 2017
    62
    @BearD01001 ESLint 的设计初衷就是 pluggable, configurable 吧,自定义规则恰恰是应用 ESLint 的优势。
    jimmy
    jimmy
    Aug 29, 2017
    63
    空格缩进?
    异教徒,要烧死(认真脸.jpg
    66beta
    66beta
    Aug 29, 2017
    64
    standard 路过,其他都是异教徒
    mosliu
    mosliu
    Aug 29, 2017
    65
    感觉 还是和团队一起定一个下来以后 从始至终坚持就好了。
    Heanes
    Heanes
    Dec 14, 2018
    66
    2 格缩进 2k 分辨率上面看得难受,感觉总是找不到缩进
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   3007 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 95ms · UTC 12:01 · PVG 20:01 · LAX 04:01 · JFK 07:01
    ♥ Do have faith in what you're doing.