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

[xcatliu]

• GitHub Repo

---

包含以下几种配置项：

• 标准规则：包含所有 ESLint 规则
• React 版：在标准规则的基础上，增加了所有 eslint-plugin-react 规则
• Vue 版：在标准规则的基础上，增加了所有 eslint-plugin-vue 规则

配置原则

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

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

配置解读

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

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

详细的配置内容在这里：

• ESLint 标准规则
• eslint-plugin-react 规则
• eslint-plugin-vue 规则

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

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

[xcatliu]

我用四个空格缩进，你呢？

[leopku]

开源项目 2 个，公司项目 4 个（看你肿么办，，，

[isayme]

我用 standard，无配置，都不用争了。

[xcatliu]

@leopku 自从用了四个，就觉得两个太丑了。

[dong3580]

我用 2 格缩进，不然，公司项目报错😂

[isb]

用 2 个啊。。默认 vue-cli 默认是 2 个。。。

[xcatliu]

@isb 2 个还是 4 个，纯粹个人喜好了，我的屏幕足够大，四个看的挺顺眼的😂

[ps]

四个空格+1

[lixinyang]

希望提供英文注释版

[xcatliu]

@ps 握爪🤝

[zpvip]

原来四个，自从用了两个，觉得四个真是太大了

有编辑器自动对齐，点开头，自动高亮结尾，没必要用四个目测了。

[xcatliu]

@lixinyang 下一步工作会是完善 test，然后用工具把 test 直接转化为文档网页。然后就会开始英文版的工作

[xcatliu]

@zpvip 现在的编辑器都很智能，四个两个都不是问题啦

[jeneser]

standard
2 格

[vardarling]

2 格缩紧 2k 分辨率上面看的难受

[djyde]

我用 standard

[dong3580]

@xcatliu
你不觉得 4 格浪费空间么^_^哈哈

[leamtrop]

2 格，对齐更好看

[xcatliu]

@dong3580 屏幕大，就是爽！

[xcatliu]

@vardarling 同意

[libook]

在每行字符数与缩进空格数之间做平衡：每行字符数总体不多的项目（如 Node Web 服务项目）就空 4 格，提升缩进辨识度；每行字符数总体较多的项目（如 VUE 等需要写很长 HTML 标签的项目）就空 2 格，增加每一页代码的容量，压缩信息密度。

觉得 standard 很好，唯独分号的规则一直有顾虑，因为如果项目按照 standard 的规则来做的话省略分号当然没有任何问题，但是一旦形成习惯在其他没有严格受到 standard 约束的地方（比如临时写 MongoDB 脚本）使用可能就不大好了。

[hronro]

其实 ESLint 已经有像 standard、airbnb 这些很棒的规则了，倒是 TSLint 一直没找到很完善的规则

[tinkerer]

感谢分享

[df4VW]

eslint 能自定义规则真的是浪费时间

[seki]

空格数目的圣战先放一边

先说说写不写分号 XD

[leopku]

@xcatliu 昨天同事做 rebase，科普了一下 kdiff3，结果发现有些缩进很多的代码在三列下要横向拖才能看见。他的屏幕还非常大，，，丑不丑的贱人见智了，对我来说实用更重要

[123s]

从 4 个被潜移默化成 2 个

[xcatliu]

@libook 感谢，你说的很有道理，缩进的空格数量应该看情况决定。分号可以 autofix，所以怎么设置都没问题吧

[xcatliu]

@hronro airbnb 的规则确实已经很好用了，我之前也一直都用的 airbnb，不过后来慢慢的有些不一样的地方需要覆盖掉它的配置。然后每次有新项目就得复制一份，维护多个配置，有点麻烦。所以最后干脆全部自己配置一遍了。
eslint 貌似也支持 tslint 的 parser，回头我去研究一下。

[xcatliu]

@df4VW 我这种强迫症患者表示自定义规则很爽哈哈

[xcatliu]

@seki 分号必须有！不写分号看着太难受了😂

[xcatliu]

@leopku 针对一行的代码太长了，可以把编辑器设置成自动换行显示，这样就没有横向滚动条了。缩进太多本身就会让代码更难阅读，如果能够重构成更少缩进的就更好了

[rogwan]

用 {} 作为一种封闭手段，嵌套多了，尾部的 } 数量数不清楚哇😭

缩进处理逻辑分隔，开始有点绕，多层次的时候比较清爽

[Rocka]

哇，4 格缩进加分号，找到组织了 😂

[doubleflower]

我曾经也是 4 空格党（从 py 带来的习惯），但实在抗不过 JS 中大家都用 2 空也转 2 空了。
不过转了 2 空后发现 2 空才是真理啊啊啊啊啊啊啊啊啊啊

另外有 standard js 就别折腾别的了，那个几乎就是完美的

[xcatliu]

@Rocka 😁

[Jiavan]

一开始学编程就养成 4 空格的缩进，后来看到大部分开源项目开始用 2 个，强制自己用 2 个了一段时间，感觉挺难受的，可读性没 4 个强，又切回来了，其实看个人喜好吧，听说因为之前 callback hell 的原因用 2 个少占空间，但是现在不写 callback hell 和屏幕大就不在乎了。。。自己开心就好 2333

[Biwood]

一开始我用 2 个空格缩进，因为节省空间，奈何团队大部分都是用 4 个空格。其实有些人还区分不了 space 跟 tab，大部分编辑器默认是 tab，他们以为是 4 个空格，那只能随大流，强制 tab 转 4 个空格喽

[autoxbc]

不用 tab 缩进的送去祭天吧

[digimoon]

用 tab

[hst001]

两个空格空间间隔太短，4 个空格太啰嗦，最后选择一个 tab

[xcatliu]

@hst001 最后选择三个空格，嗯，刚刚好

[fy]

反正觉得 C 系语言都应该 4 空格缩进，后来看到一些 js 项目的时候心里一阵“？？？？”然后继续用四个空格缩进。

[rashawn]

个人感觉, 应该一套写代码规则, 一套读代码规则, 楼主可以看一下 three.js 的代码, 属于那种易读的, 方便其他人看源码, 但是写起来空行太多, 一屏看不到太多的代码. 其实可以做一个工具, 两套规则, 自己写的是一套, 然后提交的是另一套.

不过单靠 eslint fix 不太好搞.

[rashawn]

另外, 楼主你这个规则本身为什么有的最后有逗号有的没有, 我还是习惯最后加逗号的

[xcatliu]

@fy 感觉现在 js 还是两个空格缩进的人多一些

[xcatliu]

@rashawn 我习惯于最后一项没有逗号，不过规则中没有开启这个检查，有没有逗号都允许吧。示例代码中最后有代码是因为是复制的代码。

[exoticknight]

@xcatliu 自从用了两个，就觉得四个太占位置了

[si]

我一般用 4 个空格，2 个不够明显.

[fy]

@xcatliu 是呀两个的人很多 但我也觉得两个不明显。而且 json 这种两格不难受吗？
可能也跟我 es6 之前长期用 coffee 有关吧

[chuanqirenwu]

大神，mobi.css 还在开发中么？

[ajan]

只用 tab

[zhea55]

本来一直都是四个空格。直到 nodejs 出来以后，异步 callback 层层堆叠


演变成 2 个了

[xcatliu]

@chuanqirenwu 在呀，现在已经可以用了呀。主要在做一些推广工作

[mosliu]

写 java 时习惯 4 个
写 js 直接用了 air-bnb 的规则
自动格式化成两个 看多了也习惯。

[whypool]

4 空格+分号

[bzw875]

一行代码也不看，直接 copy 过来

[icedx]

xcat 每次来都有干货

[BearD01001]

ESLint 本身不就是规范代码书写的吗, 搞自定义规则感觉像是推翻了它本身存在的意义, 无法理解 😟

[SourceMan]

从你的标题，我就觉得不完美了，4 空格缩进

[xcatliu]

@icedx 😃

[xcatliu]

@BearD01001 ESLint 的设计初衷就是 pluggable, configurable 吧，自定义规则恰恰是应用 ESLint 的优势。

[jimmy]

空格缩进？
异教徒，要烧死（认真脸.jpg

[66beta]

standard 路过，其他都是异教徒

[mosliu]

感觉 还是和团队一起定一个下来以后 从始至终坚持就好了。

[Heanes]

2 格缩进 2k 分辨率上面看得难受，感觉总是找不到缩进