ESLint 使用教程（二）：一步步教你编写 Eslint 自定义规则

前言

在现代前端开发中，代码质量和一致性是成功项目的关键因素之一。Eslint 是一个广泛使用的 JavaScript 代码静态分析工具，它能帮助我们保持代码整洁和一致。然而，有时候内置的规则并不能完全满足我们的需求，这时候我们就需要自定义规则来解决特定的问题。本文将带你一步步了解如何为 Eslint 自定义规则。

系列文章

为什么要自定义 Eslint 规则？

Eslint 提供了许多内置规则，但每个项目都有其独特的需求。有时候，我们需要：

符合团队的代码风格指南：每个开发团队都有自己的代码风格指南，而不是所有风格都能通过现有规则覆盖。
捕捉特定的反模式：在特定项目中，可能有一些反模式需要特别注意。
提高代码的可维护性和可读性：通过自定义规则，可以让代码更符合项目的具体要求，提高可读性和可维护性。

自定义步骤

步骤 1：创建 Eslint 插件
首先，你需要一个 Eslint 插件。插件实际上是一个 npm 包，它可以包含多个规则。创建一个新的 npm 包，并在其中初始化 Eslint 插件。

1. 创建一个目录并初始化 npm 包：

 mkdir eslint-plugin-myplugin     
 cd eslint-plugin-myplugin     
 npm init -y

安装 Eslint 作为开发依赖：

npm install eslint --save-dev

在 package.json 中添加 Eslint 插件的元数据：

 "eslintConfig": {       
     "plugins": ["myplugin"]     
  }

步骤 2：创建自定义规则文件

在插件目录下创建一个 rules 目录，并在其中创建自定义规则文件。例如，我们要创建一个名为 no-console 的规则，以禁止使用 console 语句。

1. 创建规则目录和文件：

mkdir -p lib/rules     
touch lib/rules/no-console.js

2. 在 no-console.js 文件中定义规则：

module.exports = {
    meta: {
        type: 'problem',
        docs: {
            description: 'disallow the use of `console`',
            category: 'Possible Errors',
            recommended: true,
        },
        schema: [],
    },
    create: function(context) {
        return {
            CallExpression(node) {
                if (node.callee && node.callee.object && node.callee.object.name === 'console') {
                    context.report({
                        node,
                        message: 'Unexpected console statement.',
                    });
                }
            },
        };
    },
};

步骤 3：配置 Eslint 插件

在插件主目录下创建一个 index.js 文件，并在其中导出自定义规则。
1. 创建 index.js 文件：

touch lib/index.js

2. 在 index.js 文件中导出规则：

module.exports = {
    rules: {
        'no-console': require('./rules/no-console'),
    },
};

步骤 4：使用自定义规则

在你项目的 Eslint 配置文件中，引用自定义规则。首先，安装你创建的插件：

npm install path/to/eslint-plugin-myplugin

然后，在 Eslint 配置中启用规则：

{
"plugins": [
    "myplugin"
    ], 
"rules": {
"myplugin/no-console": "error"
 }
}

步骤 5：测试自定义规则

在将自定义规则应用到实际项目之前，最好先编写一些测试来验证这些规则的行为是否符合预期。这样可以确保规则在各种情况下都能正确运行，并减少意外的错误。

首先，安装 Mocha 和 Eslint 的测试工具：

npm install mocha eslint --save-dev

mkdir -p tests/lib/rules     
touch tests/lib/rules/no-console.js

在 no-console.js 文件中编写测试：

 const { RuleTester } = require('eslint');
    const rule = require('../../../lib/rules/no-console');

    const ruleTester = new RuleTester();

    ruleTester.run('no-console', rule, {
      valid: [
        // 这里放置有效的代码例子
        'alert("Hello world!")',
      ],
      invalid: [
        // 这里放置无效的代码例子
        {
          code: 'console.log("Hello world!")',
          errors: [{ message: 'Unexpected console statement.' }],
        },
      ],
    });

在 package.json 文件中添加测试脚本：

 "scripts": {       
     "test": "mocha tests/**/*.js"     
 }

运行测试：

npm test

如果一切正常，测试应该通过并显示如下输出：

 > [email protected] test /path/to/eslint-plugin-myplugin
    > mocha tests/**/*.js

      no-console
        ✓ should not report alert statements
        ✓ should report console statements

通过编写测试，你不仅确保了自定义规则的正确性，还为未来的开发和维护提供了可靠的验证手段。

扩展自定义规则

现在你已经掌握了基本的自定义 Eslint 规则的方法，接下来可以尝试一些更复杂的规则。例如，检查函数的参数数量、变量命名规范、禁止特定的语法结构等。

以下是一些扩展思路：

检查函数的参数数量：

module.exports = {
    meta: {
        type: 'suggestion',
        docs: {
            description: 'enforce a maximum number of parameters in function definitions',
            category: 'Best Practices',
            recommended: false,
        },
        schema: [{
            type: 'integer',
            minimum: 0,
        },
        ],
    },
    create: function(context) {
        const maxParams = context.options[0] || 3;
        return {
            FunctionDeclaration(node) {
                if (node.params.length > maxParams) {
                    context.report({
                        node,
                        message: `Function has too many parameters(maximum allowed is $ {
                            maxParams
                        }).`,
                    });
                }
            },
        };
    },
};

变量命名规范：

module.exports = {
    meta: {
        type: 'suggestion',
        docs: {
            description: 'enforce camelCase naming convention for variables',
            category: 'Stylistic Issues',
            recommended: false,
        },
        schema: [],
    },
    create: function(context) {
        const camelCase = /^[a-z][a-zA-Z0-9]*$/;
        return {
            VariableDeclarator(node) {
                if (!camelCase.test(node.id.name)) {
                    context.report({
                        node,
                        message: 'Variable names should be in camelCase.',
                    });
                }
            },
        };
    },
};

通过这些例子，你可以看到自定义规则的灵活性和强大功能。Eslint 提供了丰富的 API 来实现各种类型的代码检查，你可以根据项目的需求自由发挥。

总结

自定义 Eslint 规则是提升代码质量和一致性的强大工具。通过定义特定规则，你不仅可以确保代码符合团队的编码规范，还可以避免常见的错误和反模式。希望这篇教程能为你提供一个良好的起点，让你在项目中更好地利用 Eslint 的自定义规则功能。