Question

我正在尝试为基于打字稿的项目编写一些自定义ESLint规则。在我的项目中，我使用eslint / typescript进行掉毛。

我已经编写了一个自定义eslint插件，用于验证自定义规则。现在，我要为该自定义规则编写单元测试。我的测试文件如下：

/**
 * @fileoverview This rule verifies that logic can only depend on other logic
 * @author Dayem Siddiqui
 */
"use strict";

//------------------------------------------------------------------------------
// Requirements
//------------------------------------------------------------------------------
const typescriptParser = require('@typescript-eslint/parser')
var rule = require("../../../lib/rules/logic-dependency"),
  RuleTester = require("eslint").RuleTester;

//------------------------------------------------------------------------------
// Tests
//------------------------------------------------------------------------------
typescriptParser.parseForESLint()
var ruleTester = new RuleTester({ parserOptions: {} });
ruleTester.run("logic-dependency", rule, {
  valid: [
    `class DeleteLogic {

        }
    class CreateLogic {
            constructor(private deleteLogic: DeleteLogic) {}
    }`
  ],

  invalid: [
    {
      code: `class ExternalClient {

            }
            
            class UpdateLogic {
                constructor(private externalClient: ExternalClient) {}
            }`,
      errors: [
        {
          message: "Logic cannot have a dependency on client",
          type: "MethodDefinition"
        }
      ]
    }
  ]
});

现在我的测试失败了，因为默认情况下eslint仅理解纯Javascript代码。我了解我需要以某种方式配置它以使用自定义解析器，以使其能够理解/解析打字稿代码。但是我无法在网上找到有关如何做到这一点的好例子

Answer 1

RuleTester构造函数采用eslint的parser options，它可以配置parser itself。所以像这样传递它，鲍勃是你的叔叔：

const ruleTester = new RuleTester({
  parser: '@typescript-eslint/parser',
});

typescript-eslint自己的规则测试（例如this one）正是使用此规则。

（一直在寻找这个问题的答案，并一直到这里结束，所以我在这里发布了我找到的解决方案，希望它会有用。）

Answer 2

使用诸如typescript-eslint/parser之类的软件包。在这种情况下，我只能提供一个链接。如果您需要使用它的帮助，请告诉我。

Answer 3

我对Typescript不太熟悉，但是像eslint-config-typescript这样的东西会有所帮助吗？

Answer 4

来自 https://github.com/typescript-eslint/typescript-eslint 下面的文档将为您概述该项目的内容，其存在的原因以及它在更高层次上的工作方式。

在报告问题之前熟悉这些概念至关重要，因此在提出问题之前先阅读它们是个好主意。

什么是ESLint和TypeScript，它们如何比较？ ESLint是JavaScript代码的出色工具。

在后台，它使用解析器将您的源代码转换为称为抽象语法树（AST）的数据格式。然后，插件会使用这种数据格式来围绕代码的外观或行为创建称为lint规则的断言。 TypeScript是一个很棒的JavaScript代码静态代码分析器，它在基础JavaScript语言的基础上提供了一些其他语法。

在后台，它使用解析器将您的源代码转换为称为抽象语法树（AST）的数据格式。然后，TypeScript编译器的其他部分使用此数据格式来执行诸如向您提供有关问题的反馈，使您轻松进行重构等工作。听起来很像吧？他们是！这两个项目最终都在努力帮助您编写可能的最佳JavaScript代码。

typescript-eslint如何工作？为什么要有多个软件包？如上所述，TypeScript生成与ESLint需要的格式不同的AST格式。

这意味着默认情况下，TypeScript AST与项目进行了多年的ESLint用户编写的1000条规则不兼容。

TypeScript在某种程度上具有不同的AST格式，因为它是JavaScript的超集。换句话说，它包含所有JavaScript语法以及一些其他内容。

例如：

var x：数字= 1; 这不是有效的JavaScript代码，因为它包含所谓的类型注释。当TypeScript编译器解析此代码以生成TypeScript AST时，：number语法将在树中表示，这在没有其他帮助的情况下ESLint根本无法理解。

但是，我们可以利用ESLint在设计时考虑到这些用例这一事实！

事实证明，ESLint不仅仅是一个库。相反，它由一些重要的运动部件组成。这些运动部件之一是解析器。 ESLint附带一个内置的解析器（称为espree），因此，如果您只编写标准的JavaScript，则无需关心此实现细节。

但是，很棒的是，如果我们要支持非标准的JavaScript语法，我们要做的就是为ESLint提供一个可供使用的替代解析器-这是ESLint提供的一流用例。 / p>

知道我们可以做到这一点只是一个开始，当然，我们接下来需要开始创建一个能够解析TypeScript源代码的解析器，并提供与ESLint期望的兼容的AST（还有一些附加功能）例如：数字，如上所述）。

实际上，此monorepo中的@ typescript-eslint / parser包是在此情况下我们提供给ESLint的自定义ESLint解析器实现。

发生的流程和转换看起来像这样：

ESLint调用在您的ESLint配置（@ typescript-eslint / parser）中指定的解析器

@ typescript-eslint / parser处理所有ESLint特定的配置，然后调用@ typescript-eslint / typescript-estree，这是一个不可知的软件包，仅与获取TypeScript源代码并生成适当的AST有关。

@ typescript-eslint / typescript-estree的工作方式是在给定的源代码上调用TypeScript编译器，以生成TypeScript AST，然后将该AST转换为ESLint期望的格式。

注意：这种AST格式的使用范围不仅限于ESLint。它甚至有自己的规范，被称为ESTree，这就是为什么我们的软件包被称为typescript-estree。

由于@ typescript-eslint / typescript-estree具有非常特定的用途，因此可用于与ESLint具有类似要求的工具。因此，它还可以为功能强大的自以为是的代码格式化程序Prettier的TypeScript用例提供动力。

这几乎涵盖了解析部分！但是规则呢？这是我们的插件发挥作用的地方。

此项目中包含的包裹请按照下面的链接获取您关心的软件包。

@ typescript-eslint / typescript-estree-一个完全通用的TypeScript解析器，它使用TypeScript源代码并生成与ESTree兼容的AST

此软件包还用于增强固执的代码格式化器Prettier自己的TypeScript用例。 @ typescript-eslint / parser-一种ESLint专用的解析器，它利用typescript-estree来代替ESLint的默认解析器espree。

@ typescript-eslint / eslint-plugin-ESLint特定的插件，当与@ typescript-eslint / parser结合使用时，可以运行TypeScript特定的插入规则。

@ typescript-eslint / eslint-plugin-tslint-一个特定于ESLint的插件，该插件在您的ESLint设置内运行TSLint实例，以使用户能够更轻松地从TSLint迁移到ESLint。

配置ESLint RuleTester以使用Typescript解析器

4 个答案: