在前端开发中，代码质量和规范性是很重要的，而 ESLint 是一个 JavaScript 代码检查工具， 能够自动发现代码中的问题，并规定一些规范，使得代码更加易于维护和阅读。针对项目中的各种代码问题，我们可以使用 ESLint 插件定制规则来自定义 ESLint，并提供更好的帮助。本文介绍一个常用的 ESLint 插件 —— eslint-plugin-no-length。
1. 安装
在使用 eslint-plugin-no-length 之前，你需要通过 npm 安装它。在终端输入：
$ npm install --save-dev eslint eslint-plugin-no-length
2. 配置
在项目 .eslintrc 配置文件中配置插件，添加插件规则。
{
"plugins": [
"no-length"
],
"rules": {
"no-length/no-length": ["error"]
}
} 这里的 no-length 对应我们所安装的插件包名， - 被转换成了驼峰写法。
rules 中的 no-length/no-length 是规则名，被配置为 "error"，表示该规则检测到问题时会有错误级别的提示。
3. 规则说明
使用 eslint-plugin-no-length 的主要用途是规范代码中长度的使用。这个插件主要关注于 Array.length 和 String.length 的使用，而其他场景需要使用 no-restricted-properties 规则。该规则主要防止选择器或大量空格等实现的 CSS 代码在代码中使用。
例如：
const arr = [1, 2, 3, 4];
const len = arr.length;
if (len > 0) {
console.log('Array is not empty');
}在上面的示例中，我们通过使用数组的 length 属性来判断其是否为空。这是一种常见并且有效的方式。但在某些场景下，使用 Array.length 会导致代码难以维护和异常的情况（例如当数组长度超过2^53）。因此，该插件提供了 eslint 规则，以帮助开发者检查并修改这些代码。
4. 举个例子
如果我们有如下代码：
const str = 'hello world';
if (str.length > 5) {
console.log('字符串长度大于 5');
}在 ESLint 的默认规则中，这段代码是没有问题的，并且也符合代码规范的。但是，如果我们启用 eslint-plugin-no-length 后，会发现 str.length 将会被拒绝。
5. 配置参数
该插件中，我们可以设置一些参数，以定义代码检测的更多方面。
type 属性可选值为 "string" 和 "array"，用于指定代码中需要禁用的类型，如果设置为 "string"，那么仅禁用字符串的长度检测，如果设置为 "array"，那么仅禁用数组的长度检测。
下面是一个配置的示例：
{
"rules": {
"no-length/no-length": ["error", { "type": "string" }]
}
} 6. 总结
通过本文的介绍，大家应该已经掌握了 eslint-plugin-no-length 的使用方法和规则说明。该插件旨在规范代码中 length 属性的使用，避免过度使用，在代码中引发各种问题。针对以上情况，我们可通过 eslint-plugin-no-length 插件定制自定义校验规则，使得代码更加规范和易于维护。
希望在你的日常开发中，合理使用 ESLint 及其插件，提高代码规范和效率，同时也能够避免日后 Bug 的发生。
参考：
eslint-plugin-no-restricted-properties
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc40b5cbfe1ea0612718