V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

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

  •  
  •   xcatliu · 29 天前 · 4856 次点击

    包含以下几种配置项:

    配置原则

    我们依据以下三条原则,研读了 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 中查看。

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

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

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

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

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

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

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


    演变成 2 个了
        54
    xcatliu   27 天前 via iPhone
    @chuanqirenwu 在呀,现在已经可以用了呀。主要在做一些推广工作
        55
    mosliu   27 天前   ♥ 1
    写 java 时习惯 4 个
    写 js 直接用了 air-bnb 的规则
    自动格式化成两个 看多了也习惯。
        56
    whypool   27 天前   ♥ 1
    4 空格+分号
        57
    bzw875   26 天前   ♥ 1
    一行代码也不看,直接 copy 过来
        58
    icedx   26 天前   ♥ 1
    xcat 每次来都有干货
        59
    BearD01001   26 天前   ♥ 1
    ESLint 本身不就是规范代码书写的吗, 搞自定义规则感觉像是推翻了它本身存在的意义, 无法理解 😟
        60
    SourceMan   26 天前   ♥ 1
    从你的标题,我就觉得不完美了,4 空格缩进
        61
    xcatliu   26 天前   ♥ 1
    @icedx 😃
        62
    xcatliu   26 天前
    @BearD01001 ESLint 的设计初衷就是 pluggable, configurable 吧,自定义规则恰恰是应用 ESLint 的优势。
        63
    jimmy   26 天前
    空格缩进?
    异教徒,要烧死(认真脸.jpg
        64
    66beta   26 天前
    standard 路过,其他都是异教徒
        65
    mosliu   26 天前
    感觉 还是和团队一起定一个下来以后 从始至终坚持就好了。
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1575 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.7.5 · 74ms · UTC 08:24 · PVG 16:24 · LAX 01:24 · JFK 04:24
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1