ESLint 规则中的 max-len 详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，代码质量的好坏关系到项目的稳定性、可维护性和扩展性。ESLint 作为一款静态代码检查工具之一，能够提高代码质量、减少错误和调试时间。而其中的 max-len 规则则是其中非常重要的规则之一。

什么是 max-len 规则？

简单来说，max-len 规则是用于限制代码行的最大长度的。在 JavaScript 语言中，一行代码的长度是没有上限的，但是过长的代码往往难以阅读和理解，使得代码变得头疼和乱糟糟的。因此，ESLint 提供了 max-len 规则来控制代码行的最大长度。

max-len 规则的作用

max-len 规则有两个主要作用：

提高代码可读性
减少错误

通过限制单行代码长度，有助于避免代码的可读性下降的问题，使代码更易于阅读和理解。另一方面，由于长代码往往包含更多的错误，因此通过 max-len 规则限制代码行的长度也能减少这些错误。

max-len 规则的配置

在 ESLint 中启用 max-len 规则需要在 .eslintrc 文件中配置规则：

{
  "rules": {
    "max-len": ["error", { "code": 80 }]
  }
}

其中，"max-len" 为规则名，"error" 为错误等级，表示当代码行长度超过规定长度时，ESLint 将会显示错误信息。在规则的配置对象中，指定了 code 参数为 80，表示允许单行代码长度最大为 80 字符。

也可以使用 off 关闭 max-len 规则。

{
  "rules": {
    "max-len": "off"
  }
}

对于参数的详细包涵

option	default	description
code	80	必需。指定单行代码允许的最大宽度。
tabWidth	2	可选。使用时需要指定，可替代 `indent` 来区分空格和制表符
comments	80	可选。指定注释允许的最大宽度。默认情况下，当允许的宽度为 `tobuf(80)` 时，注释允许的最大宽度为 `80`。如果设置为 `Number.MAX_SAFE_INTEGER`，注释则可以无限宽。
ignoreRegExpLiterals	false	可选。是否应忽略正则表达式文字的长度。
ignoreUrls	false	可选。是否应忽略所有 URL 文字的长度。
ignorePattern		可选。忽略的某些行的正则表达式。【优先级高】
ignoreComments	false	可选。是否应忽略以某些字符序列开头的注释的长度。
ignoreTrailingComments	false	可选。是否应忽略某些字符序列之后的注释的长度。
ignoreUrls	false	可选。是否应忽略所有 URL 文字的长度。
ignoreStrings	false	可选。是否应忽略所有字符串文字的长度。
ignoreTemplateLiterals	false	可选。是否应忽略所有模板文字的长度。

ignorePattern 可以用于忽略一些行的检查，详细的可以查看官方文档。

max-len 规则的使用

使用 max-len 规则分为几种情况：

知道规则

如果你非常清楚你们团队通常都是多少长度，那么用默认的配置（80）即可。

{
  "rules": {
    "max-len": "error"
  }
}

不知道规则也不太需要

如果你们团队不是太在意这一点，只是想开启规则投机取巧，并不需要太多的额外配置，你可以选择更加宽松的规则字数，比如：

{
  "rules": {
    "max-len": ["warn", 120]
  }
}

“warn” 是建议性错误，不会造成当前构建的失败，只是 eslint 告诉你目前的代码写的不太好，需要像前面的审核团队提交代码质量好的重新提交。

更加规范的写法

如果你们团队非常在意代码规范，你可以采用更加严格的写法，这个时候你需要对 ignore 进行配置。

// javascriptcn.com 代码示例
{
  "rules": {
    "max-len": [
      "error",
      {
        "code": 80,
        "tabWidth": 2,
        "ignorePattern": "^\\s*(\\[[^\\]]*\\]|<[^<>]*>|#[^#]*|\\s*//.*)$",
        "ignoredComments": ["1", "2"]
      }
    ]
  }
}

该配置：

将每行代码的长度限制为 80 个字符；
指定 tab 宽度为 2；
使用 ignorePattern 忽略某些代码行，它的值是一个正则表达式，将忽略不匹配的内容；
忽略以 \\s*(\\[[^\\]]*\\]|<[^<>]*>|#[^#]*|\\s*//.*)$ 开头的代码行；
忽略注释（例如标签 1 和标签 2）。

示例代码

下面的代码演示了如何使用 max-len 规则。

// javascriptcn.com 代码示例
// bad
var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

// good
var x = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
  11, 12, 13, 14, 15, 16, 17, 18, 19, 20
];

// bad
function myFunction(arg1, arg2, arg3, arg4, arg5, arg6) {
  
}

// good
function myFunction(
  arg1, arg2, arg3,
  arg4, arg5, arg6
) {
  
}

// bad
var x = "This is a very long string, it goes on and on and on and on and on and on.";

// good
var x = "This is a very long string, " +
    "it goes on and on and on and " +
    "on and on and on.";

总结

ESLint 中的 max-len 规则能够限制代码行的最大长度，有助于提高代码的可读性和减少错误。你可以根据需求配置合适的参数，以达到更好的效果。同时，在编写过长的代码行时，你应该考虑对代码进行适当地拆分，这有助于提高代码的质量和易于维护。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540b44f7d4982a6eba3d519