一些低调的ESlint规则

前言

ESlint的重要性我就不说了，基本上每家公司的前端团队都会有自己的一套规范。要么是用Google的，要么是用Airbnb的，或者是自己配置一个。

曾经我用的是Google的规范，但是4月初的时候我在Medium上看到一篇关于Google代码规范的文章，顺带翻译了一下。感觉有的规则我并不太认同，所以为了以后不被这些规则所困扰，我决定自己配置一套。

环境配置

个人规范其实配合eslint的recommended配置挺不错的，但是我希望有一天能够脱离这个官方推荐配置，我还是给规范添加了环境。

env: {
    'browser': true,
    'node': true,
    'jest': true,
    'jquery': true,
    'mongo': true,
    'es6': true,
    'mocha': true,
},
parserOptions: {
    'ecmaFeatures': {
        'experimentalObjectRestSpread': true,
        'jsx': true
    },
    'sourceType': 'module'
}

可以看出这份规范支持浏览器、Node、Jest、jQuery等环境，还支持jsx和ESM。

不过这不是重点，本文要讲的还是我在阅读规则文档时看到的一些奇怪的规则。虽然数量不多，但是在枯燥的复制、粘贴的过程中突然看见它们，能够让我的心情也缓和了许多。

规则

no-div-regex

no-div-regex的意思是禁止在正则表达式前出现疑似/的符号。

比如/=123/，正则前的等号使得整个表达式像是一个除法表达式。虽然这种情况并不会影响代码的结果，但为了可读性还是建议加上转义字符/\=123/。

no-extend-native

no-extend-native的意思是禁止扩展原生对象，因为这样会影响到代码的其他部分。之所以觉得有趣，是因为想到之前在掘金上看到一篇扩展Date对象的文章，然后评论里各种质疑这件行为是否有意义。反正作者觉得有用，我是不想在网上争论这种事情的。

yoda

如果说什么电影是西方人心目中最好的科幻片，那答案一定是《星球大战》。yoda这个规则说得就是《星球大战》里的倒装大师yoda的说话方式。

比如判断语句：

// yoda体
if(1 === a)
// 正常
if(a === 1)

在其他语言中，一般会推荐用yoda体，因为这样避免省略等号，误将1赋值给变量a。但是在JS里并不需要，毕竟我们使用的是===。如果还能做到省略两个等号的话，那我也无fu**k说。

max-nested-callbacks

回调地狱是ES5让人诟病的地方。为了顺序执行一系列的异步操作，只能通过回调嵌套的方式来实现。也就出现了下面的代码：

foo(function () {
    bar(function () {
        baz(function() {
            qux(function () {

            });
        });
    });
});

不得不说这让我想起才学前端时写的辣鸡代码，摇头苦笑之余不忘给这条规则加了max:3的限制。

array-element-newline

array-element-newline规定代码中的数组项必须换行。如果设置为always的话，正确的代码是下面这样的：

const arr = [
    1,
    2
];

真的有人会写出这种代码吗……

总结

闲来无事，所以写写这种没什么技术含量的文章调节下心情。规范这种事情，主观意愿太强，好坏各有各的看法。

在做这种项目基础的时候，其实是很容易感到枯燥乏味的。不过呢，多发现一些小小的闪光点，往往就能让自己的疲惫一扫而空。