《利用 ESLint 中每一个 rule 与 plugin 构建自己的代码规范》-JavaScript中文网-JavaScript教程资源分享门户

前端开发在不断迭代的过程中，代码规范是保证代码质量的重要一环。而 ESLint 可以帮助我们规范化，它内置了大量的规则，也可以通过插件来扩展规则。

本文将介绍如何利用 ESLint 中每一个 rule 与 plugin，构建自己的代码规范。

ESLint 原理

ESLint 是一个以 ECMAScript 代码为基础的静态检查工具，它通过采用纯 JavaScript 实现的插件和扩展规则来实现代码检查和提示。

语法解析的过程中，对于经过本地已配置规则的代码，对于违反规则的部分，都将提供相应的错误和警告信息。

在运行时，ESLint 将会使用 CLI 或脚本文件配置，实现对应用程序的检查与修复。

如何为 ESLint 自定义规则

以上文提到的运行时维护 ESLint 的检查与修复，我们可以通过自定义规则来帮助我们约束代码。

ESLint 的一个最大的特点，就是你可以为其编写自定义规则来满足与标准规则不一样的需求。

每一个规则均可以用唯一的标识符命名，可以用于判断命名冲突。规则通常由一个或多个模式组成，模式表示了相应规则在源代码中所检查的内容。

ESLint 规则分为三个级别：off、warn 和 error，其中 off 表示关闭这个规则，而 warn 和 error 则表示开启这个规则，并提示警告或错误。

一般情况下，严格要求的规则都是使用 error 级别，一般提示的规则使用 warn 级别。

为 ESLint 编写自定义规则的步骤

编写规则实现。需要实现 RuleTester 与规则函数，必须 export 一个函数，接受一个简单的对象参数，返回一个对象，必须包含一个 RuleTester 和一个规则函数。
编写测试用例。RuleTester 能够自动生成测试用例，要求您为它提供样例代码、规则名称和期望实际错误信息。
导出规则和测试用例。您的规则在代码中定义，而测试用例则必须在文件中。

以上三个步骤就是为 ESLint 定义自定义规则的通用方式。

一个例子

// javascriptcn.com 代码示例
const RuleTester = require('eslint').RuleTester;

const rule = require('../my-rule.js');

const ruleTester = new RuleTester({
  parserOptions: {
    ecmaVersion: 6
  }
});

ruleTester.run('my-rule', rule, {
  valid: [
    'const foo = 1;'
  ],

  invalid: [
    {
      code: 'const foo = 1 foo = 2;',
      errors: [{
        message: 'Cannot assign to constant variable',
        type: 'AssignmentExpression',
      }],
    },
  ],
});

这里定义的自定义规则，如下：

'no-constant-assign': [
  'error',
  {
    // 这个规则应用于内建常量也应该报错
    'consts': true,
  },
],

如何为 ESLint 安装插件

ESLint 内置了许多规则，但是我们还需要更多的规则，供我们使用。插件能够扩展规则，提供其他的规则以帮助我们约束代码。

ESLint 插件本质上就是一组规则（或者是一个规则）。插件能够扩展规则，提供其他的规则以帮助我们约束代码。

安装插件的方式

推荐的方式是使用 npm，npm install xxx，即可安装。安装完毕之后，在 .eslintrc.js 中添加：

module.exports = {
  plugins: ['xxx'],
  rules: {
    // 在此添加由你的插件定义的所有规则
    'xxx/rule': 'error'
  }
}

如何为 ESLint 编写插件

插件的目录结构

ESLint 插件要求我们遵循一定的目录规范，所以，我们需要创建一个目录来保存项目，这个目录至少要有以下文件：

node_modules/
lib/
README.md
package.json

其中 lib 目录要求至少存在一个 index.js 文件。在 index.js 中，我们可以指定我们的规则以及其他的配置项。

如何定义插件规则

定义插件规则跟上面的自定义规则有些类似，但是有一些不同的地方。

ESLint 规则分为三个级别：off、warn 和 error，其中 off 表示关闭这个规则，而 warn 和 error 则表示开启这个规则，并提示警告或错误。

一般情况下，严格要求的规则都是使用 error 级别，一般提示的规则使用 warn 级别。

// javascriptcn.com 代码示例
// my-plugin/lib/rules/my-rule.js
module.exports = {
  meta: {
    docs: {
      description: '防止硬编码的 URLs',
      category: 'Best Practices',
      recommended: true,
    },
    schema: [{
      type: 'object',
      properties: {
        domain: {
          type: 'string',
          description: '一个可被替换成变量的 domain',
        },
      },
    }],
  },
  create: function(context) {
    return {
      Literal: function(node) {
        if (typeof node.value === 'string' && node.value.indexOf('mysite.com') !== -1) {
          context.report({
            node,
            message: `不允许硬编码的 URL：${node.value}`,
          });
        }
      },
    };
  },
};

这个规则函数检查代码中是否包含值为 mysite.com 的字符串。如果是，则会触发错误。

插件的安装与使用

安装：

npm install my-plugin

修改 .eslintrc.js 文件：

module.exports = {
  plugins: ['my-plugin'],
  rules: {
    'my-plugin/my-rule': ['error', { domain: 'mysite.com' }],
  },
};

如何结合插件和自定义规则

自定义规则和插件可以一起使用，更好地实现约束代码的目的。

以 eslint-plugin-import 为例，它可以帮助我们管理模块导入的定义规则，提高模块引用的可维护性。

安装选项：

npx install-peerdeps --dev eslint-plugin-import

配置选项，增加规则：

// javascriptcn.com 代码示例
plugins: ['import'],
rules: {
  'import/no-commonjs': 'off',
  'import/no-unresolved': 'error',
  'import/named': 'error',
  'import/default': 'error',
  'import/namespace': 'error',
  'import/export': 'error'
}

注意：当使用到这个插件时，您必须自行添加 compatible AMD & global 语句，具体请参考该插件的规则。

总结

本文介绍了如何利用 ESLint 中的自定义规则和插件来规范代码。自定义规则和插件扩展了官方的 ESLint 规则集，可以轻松地实现约束代码的目的。

作为一个合格的编程师，应当注重代码规范，并利用 ESLint 等工具来规范代码，为我们的代码保驾护航，增加代码的可读性、可维护性和稳定性。

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