18

情况

在我们当前的项目中，我们遇到了一些反复出现的问题，人们使用无缝不可变的“asMutable”，而实际上并没有必要。这导致“字符串“asMutable”的搜索项目”成为每个拉取请求的一部分。为了加快速度，我们想在我们的 eslint 中添加一个规则警告。但我还没弄清楚怎么做。

问题

尽管我愿意接受建议，但现在对我来说似乎最好的解决方案是允许我指定要禁止的函数名称的规则。ESlint 或插件是否具有这种功能？

补充说明

我已经考虑过编写我们自己的规则，但我被AST和编写我的第一条规则的启动困难吓倒了。如果我找不到更好的答案，我可能会冒险，是的，我们在 PR 中得到了足够的保证。不过，这似乎是比我聪明得多的人已经解决的问题，所以我宁愿追随他们的脚步，然后建立自己的。

4

3 回答 3

24

不久前我遇到了同样的问题，所以我可以帮助您编写自己的问题。

所以，首先，让我们解释一些基本结构：

  1. ESLint有插件，每个插件都有规则。
  2. ESLint使用AST（一种语法树）来查找代码中的特定部分。这有助于 ESLint 找到每个规则正在寻找的内容。

所以，让我们从创建一个包含规则的插件开始：

1. 使用 Yeoman 的 ESLint 生成器

这使事情变得容易得多。在这里查看。

安装yeoman后yeoman eslint generator：

  • 进入您要在其中创建项目的文件夹
  • 运行yo eslint:plugin以创建一个新ESLint插件
  • 创建插件后，yo eslint:rule在同一文件夹中运行

我用作suni插件名称，并check-as-mutable用作规则名称。现在我们有了编写规则所需的所有初始文件。

2. 知道使用 AST Explorer 需要寻找什么

AST Explorer可以帮助我们找到我们正在寻找的东西类型。这很重要，因此我们可以告诉ESLint我们希望函数在代码中运行的内容。

当您将代码粘贴到AST Explorer中时，它会向您显示所ESLint看到的内容。我们要针对所有MemberExpressions：

something.asMutable();

在里面，我们想要Identifier node检查函数名

3.编写插件本身

打开lib/rules/check-as-mutable.js并检查一下。您提供的所有数据Yeoman都用于填写此处的某些字段。

在规则内部，您有一个create属性。在这里，我们编写代码。这个函数应该返回一个对象，我们希望我们的规则作为属性运行。所以，在这种情况下，它看起来像这样：

create: function(context) {

    return {
      MemberExpression: function(node)...

    };
}

在编写规则时，您应该使用AST Explorer.

这是实现：

create: function(context) {
  var UNWANTED_FUNCTION_NAME = 'asMutable';
  return {
    MemberExpression: function reportUnwantedName(node) {
      var functionName = node.property.name;

      if (functionName === UNWANTED_FUNCTION_NAME) {
        context.report({
          node: node,
          message: [
            'Please don\'t use ',
            UNWANTED_FUNCTION_NAME,
            '. We don\'t like it!'].join('')
        });
      }
    }
  };
}

之后，您需要在项目中安装插件。为此，请将其上传到 GitHub，并使用 npm 安装：

npm install --save-dev <user_name>/<repository_name>

并将规则也包含在您的.eslintrc文件中：

{
    'plugins': ['suni'],
    'rules': {
      'suni/check-as-mutable': 1
    }
}

请注意，我给了它 value 1。这使得该规则显示为警告而不是错误

在此处输入图像描述

请注意，警告突出显示了 Immutable 本身，因为那是node我们传递给context.report. 您可以调整它以突出显示id node。

这是我为此答案创建的插件

祝你好运！

于 2016-12-05T17:10:06.113 回答
19

当你将 ESLint 的no-restricted-syntax规则与selectors. 在您的情况下，您应该能够在不编写自己的插件的情况下实现所需的 linting。规则看起来像：

{
  rules: {
    'no-restricted-syntax': [
      'error',
      {
        message: "Please don't use asMutable. We don't like it!",
        selector:
          'MemberExpression > Identifier[name="asMutable"]'
      }
    ]
  }
}

研究文档页面selectors；它非常灵活！

于 2020-12-08T18:53:45.717 回答
3

在@Eric Simonton 的回答之上，自 ESLint 3.5.0 以来，我们有专门构建的no-restricted-properties：

"no-restricted-properties": [ "error", {
    "object": "Immutable",
    "property": "asMutable",
    "message": "optional explanation to the recurring problems we've had"
}]

如果有人来这里寻找阻止不是类方法的函数的方法，您同样可以使用no-restricted-globals

于 2021-08-04T09:07:32.027 回答