ESLint配置详解(二) - 常用规则(Rules)集合

指路:➡️ ESLint配置详解(一) - 超级深入详细

说明:这边只整理列出相对较常用或者主观性强可根据个人喜好配置的参数项,更推荐保持默认值的规则(比如ESLint最佳实践选项)则省略(谨代表个人观点)。而且如果用了像 vue-cli4脚手架 + Prettier 这种现成配置,就很少需要操心ESLint这些规则的配置,只有当格式不符合自己预期的时候再去额外配规则即可。具体可以参考 ➡️ vue-cli4 ESLint + prettier 修改插件规则实例

ESLint完整规则(rules)地址:https://eslint.org/docs/rules/
中文版:https://cn.eslint.org/docs/rules/

  • array-element-newline<string|object>
    "always"(默认) - 需要数组元素之间的换行符
    "never" - 不允许数组元素之间换行
    "consistent" - 数组元素之间保持一致的换行符
  • array-bracket-newline<string|object> 数组内元素的换行规则
    "always" - 总是在 [] 内换行
    "never" - 禁止在 [] 内换行
    "consistent"(推荐) - 数组两个[ ]之间需要一致的换行符。比如该对中的前一个方括号内有换行符,而另一个方括号内没有换行符,则会报错。
  • block-spacing<string> 规定在代码块的花括号{}开始和结束位置是否有空格
    "always"(默认|推荐) 要求有一致的空格
    "never" 禁止有空格
  • comma-dangle<string|object> 是否在对象/数组的末尾元素后加逗号。当传递的值为 object 时,可以为"arrays"、"objects"、"imports"、"exports"、"functions"分别设置。
    "never" (默认) 禁用末尾逗号
    "always" 要求使用末尾逗号
    "always-multiline" 当最后一个元素或属性与闭括号 ] 或 } 在 不同的行时,要求使用拖尾逗号;当在 同一行时,禁止使用拖尾逗号。
    "only-multiline" 当最后一个元素或属性与闭括号 ] 或 } 在 不同的行时,允许(但不要求)使用拖尾逗号;当在同一行时,禁止使用拖尾逗号。
  • eol-last<string> 文件末尾是否添加换行符(文件最后有一行空行是常见的 UNIX 风格)
    "always" (默认) 强制使用换行符 (LF)
    "never" 强制文件末尾不要有换行符
  • jsx-quotes<string> 强制在 JSX 属性中使用一致的单引号或双引号
    "prefer-double" (默认) 强制所有不包含双引号的 JSX 属性值使用双引号。
    "prefer-single" 强制所有不包含单引号的 JSX 属性值使用单引号。
  • keyword-spacing<object> 强制在关键字(如 if、else、async、await )前后使用一致的空格。其中参数有:
    "before": <boolean> (默认true) 要求在关键字之前至少有一个空格
    "after": <boolean> (默认true) 要求在关键字之后至少有一个空格
    "overrides" 允许覆盖指定的关键字的空格风格,示例:keyword-spacing: ["error", { "overrides": { "for": { "after": false }, "while": { "after": false }} }]
  • multiline-ternary<string> 规定三元操作数(:/ ? / &&)之间换行的规则。bar > baz ? value1 : value2
    "always" (默认) 强制三元操作数之间有换行。
    "always-multiline" 如果表达式跨越多个行,则在三元表达式的操作数之间强制换行。
    "never"(个人习惯这个) 禁止三元操作数之间有换行 (强制整个三元表达式在同一行)
  • newline-per-chained-call<object> 规定链式调用的换行规则,要求在方法链中的每个调用后或深度成员访问之后都有一个换行符。属性访问比如 instance[something] 不适用于此规则。
    { "ignoreChainWithDepth": 2 } (默认) 允许在同一行成链的深度
  • no-mixed-operators<object> 每两个连续的混合操作符,如果没有用括号括起来,可读性差且无法表达执行优先级的意图。比如var foo = a && b || c || d,改成var foo = (a && b) || c || d明显要好得多。建议开启这条规则为error就好,下面的选项按默认值即可。
    groups (string[][]) - 指定要检查的操作符分组。groups 选项是分组的列表,分组是二进制运算符的列表。默认操作符分组定义为算术、位、比较、逻辑和关系运算符。
    allowSamePrecedence <boolean> - 指定是否允许混合运算符具有相同的优先级。默认为 true。
  • no-trailing-spaces<object> 禁用行尾空白。
    "skipBlankLines":<boolean> (默认false) 禁止在空行使用空白符
    "ignoreComments":<boolean> (默认false) 禁止在注释块中使用空白符
  • object-curly-newline<string|object> 强制花括号{}内使用换行符的一致性(即{后,和}前)。该规则同时适用于对象字面量和解构赋值。
    如果值为字符串,"always"要求花括号内有换行符,"never"则禁止有换行符
    如果传递对象,参数有:
    "multiline": true 如果在属性内部(比如属性值为函数/数组/对象)或属性之间有换行符,就要求换行
    "minProperties" <int> 如果属性的数量大于等于这个数值,则要求换行。如果 consistent 选项为 true,则该项将不起作用。
    "consistent": true (默认)前后两个花括号的换行符保持一致,比如{后有换行符,}前也必须换行,否则就都不换行。
    也可以为对象字面量("ObjectExpression") 、解构赋值("ObjectPattern") 和命名的导入("ImportDeclaration")导出("ExportDeclaration") 指定不同的选项。
  • object-property-newline<object> 对象内属性是否强制放在单独的行上
    默认是每个属性都需要单独成行的,可以保证更好的可读性及差异对比的优势。如果实在要禁止它可以设置:
    object-property-newline: ["error", { "allowAllPropertiesOnSameLine": true }]
  • object-curly-spacing<string, object> 强制在花括号{}中使用一致的空格。该规则有两个参数。
    参数一:"never" (默认) 不允许花括号中有空格,"always" 要求花括号内有空格 (除了 {})
    参数二是对象:和参数一有固定配置才能生效,具体组合如下:
    "never", { "arraysInObjects": true } 要求以数组元素开始或结尾的对象的花括号中有空格
    "always", { "arraysInObjects": false } 禁止以数组元素开始或结尾的对象的{}中有空格
    "never", { "objectsInObjects": true } 要求以对象元素开始或结尾的对象的{}中有空格
    "always", { "objectsInObjects": false } 禁止以对象元素开始或结尾的对象的{}中有空格
  • object-property-newline<object> 对象内属性是否强制放在单独的行上
    默认是每个属性都需要单独成行的,可以保证更好的可读性及差异对比的优势。如果实在要禁止它可以设置:
    object-property-newline: ["error", { "allowAllPropertiesOnSameLine": true }]
  • prefer-object-spread<无参数,直接开启该规则就好> 禁止Object.assign的第一个参数使用对象字面量,如{}, { foo: 'bar' },用扩展运算符或者变量代替。如: Object.assign(...foo,)
    Object.assign(foo, { ...baz })
  • quote-props<string, object> 要求对象字面量属性名使用引号。该规则有两个参数。
    参数一:
    "always" (默认) 对象的属性名都使用引号
    "as-needed" 当没有严格要求时,禁止对象属性名使用引号
    "consistent" 要求对象属性名使用一致的引号,要么全部用引号,要么都不用
    "consistent-as-needed" 如果有属性名要求使用引号,则所有的属性名称都要使用引号;否则,禁止所有的属性名使用引号
    参数二是对象,和参数一有固定配置才能生效,具体组合如下:
    "as-needed" | "consistent-as-needed", { "keywords": true } 如果关键字作为对象属性名称,要求使用引号
    "as-needed", { "unnecessary": true } (默认) 如果没有严格要求,禁止对象属性名使用引号,改成 false 就是允许使用引号
    "as-needed", { "numbers": true } 当数字作为对象属性名时,要求使用引号
  • quotes<string, object> 强制使用一致的单/双引号或反勾号(用于字符串模版的 `)。该规则有两个参数。
    参数一:
    "double" (默认) 要求尽可能地使用双引号
    "single" (个人习惯这个) 要求尽可能地使用单引号
    "backtick" 要求尽可能地使用反勾号
    参数二对象,可选值有:
    "avoidEscape": true 允许字符串使用单引号或双引号,只要字符串中包含了一个其它引号,否则需要转义
    "allowTemplateLiterals": true 允许字符串使用反勾号
  • semi<string, object> 强制是否一致使用分号。该规则有两个参数。
    参数一:
    "always" (默认) 要求在语句末尾使用分号
    "never" (个人习惯) 禁止在语句末尾使用分号 (除了消除以 [、(、/、+ 或 - 开始的语句的歧义)
    参数二对象,和参数一有固定搭配,具体组合如下:
    "always", { "omitLastInOneLineBlock": true } 忽略花括号在同一行(内容也就在同一行了)的语句块中的最后一个分号,如:if (foo) { bar(); baz() }
    "never", { "beforeStatementContinuationChars": <"any"|"always"|"never"> } 如果下一句以 [、(、/、+ 或 - 开头,忽略句末分号,反正默认的"any"即可,光写第一个参数 "never" 足矣。
  • space-before-blocks<string|object> 强制在语句块之前使用一致的空格。
    若值是字符串,"always" (默认) 要求块语句({前)总是有一个前置空格 ;"never" 则是禁止{前有空格。
    若传入对象,即可针对 functions (函数块)、keywords (关键字)和classes(类)分别进行设置。值除了 "always"、"never" 还可以是 "ignore"。
    比如:{ "functions": "never", "keywords": "always", classes: "always" }
  • space-before-function-paren<string|object> 强制在 function的左括号之前使用一致的空格。
    若值是字符串,"always" (默认) 要求在参数的 ( 前面有一个空格;"never" 则是禁止在参数的 ( 前面有空格。
    若传入对象,即可针对 anonymous (匿名函数表达式 function () {})、
    named (具名函数表达式 function foo () {})、asyncArrow (异步的箭头函数表达式 async () => {})分别进行设置。值除了 "always"、"never" 还可以是 "ignore"。
    这是我的配置:
    'space-before-function-paren': ['error', { anonymous: 'never', named: 'never', asyncArrow: 'always' }], // 在具名函数/和匿名函数名(function)后面不要留空格
  • class-methods-use-this<object> 强制类(Class)的方法使用this,否则就必须定义为为静态方法(static fun() {})。
  • no-else-return<object> 禁止 if 语句中有 return 的情况下,if 之后有 else 块。
    allowElseIf:<boolean> (默认true) 允许在 if 块中有 return 的情况,if 后跟 else if 块。
  • no-implicit-globals<无参,直接开启即可(error 或 warn)> 禁止在顶级作用域下使用 var 和命名的 function 声明。
  • no-return-await<无参,直接开启即可(error 或 warn)> 禁用不必要的 return await。
  • no-useless-return<无参,直接开启即可(error 或 warn)> 禁止多余的 return。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,122评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,070评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,491评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,636评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,676评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,541评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,292评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,211评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,655评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,684评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,295评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2 355

推荐阅读更多精彩内容

  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,566评论 0 11
  • 彩排完,天已黑
    刘凯书法阅读 4,218评论 1 3
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 125,038评论 2 7