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

2017-08-25 17:52:07 +08:00
 xcatliu

包含以下几种配置项:

配置原则

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

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

配置解读

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

详细的配置内容在这里:

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

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 中查看。

21422 次点击
所在节点    分享创造
66 条回复
libook
2017-08-25 23:33:46 +08:00
在每行字符数与缩进空格数之间做平衡:每行字符数总体不多的项目(如 Node Web 服务项目)就空 4 格,提升缩进辨识度;每行字符数总体较多的项目(如 VUE 等需要写很长 HTML 标签的项目)就空 2 格,增加每一页代码的容量,压缩信息密度。

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

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

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

另外有 standard js 就别折腾别的了,那个几乎就是完美的
xcatliu
2017-08-26 09:32:55 +08:00
@Rocka 😁
Jiavan
2017-08-26 10:49:34 +08:00
一开始学编程就养成 4 空格的缩进,后来看到大部分开源项目开始用 2 个,强制自己用 2 个了一段时间,感觉挺难受的,可读性没 4 个强,又切回来了,其实看个人喜好吧,听说因为之前 callback hell 的原因用 2 个少占空间,但是现在不写 callback hell 和屏幕大就不在乎了。。。自己开心就好 2333
Biwood
2017-08-26 10:58:01 +08:00
一开始我用 2 个空格缩进,因为节省空间,奈何团队大部分都是用 4 个空格。其实有些人还区分不了 space 跟 tab,大部分编辑器默认是 tab,他们以为是 4 个空格,那只能随大流,强制 tab 转 4 个空格喽
autoxbc
2017-08-26 15:36:38 +08:00
不用 tab 缩进的送去祭天吧
digimoon
2017-08-26 16:31:58 +08:00
用 tab

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/385804

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX