Настройте ESLint RuleTester для использования анализатора Typescript

Question

Я пытаюсь написать несколько собственных правил ESLint для моего проекта на основе машинописи. В моем проекте я использую eslint / typescript для linting.

Я уже написал собственный плагин 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 , которые позволяют настроить сам синтаксический анализатор . Поэтому передайте это следующим образом, и ваш дядя Боб:

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

собственные тесты правил typcript-eslint (например, this ) используют именно это.

(искал для ответа на этот вопрос и продолжал заканчиваться здесь, поэтому я опубликовал решение, которое нашел здесь, в надежде, что оно будет полезно.)

Answer 2

Я не очень знаком с Typescript, но было бы полезно что-то вроде eslint-config-typescript ?

Answer 3

С https://github.com/typescript-eslint/typescript-eslint Документация ниже предоставит вам обзор того, что это за проект, почему он существует и как он работает на высоком уровне.

Очень важно, чтобы вы были знакомы с этими концепциями до того, как сообщать о проблемах, поэтому рекомендуется прочитать их, прежде чем поднимать проблемы.

Что такое ESLint и TypeScript и как они сравниваются? ESLint - это потрясающий линтер для кода JavaScript.

За кулисами он использует анализатор для преобразования исходного кода в формат данных, называемый абстрактным синтаксическим деревом (AST). Этот формат данных затем используется плагинами для создания утверждений, называемых правилами lint, относительно того, как должен выглядеть или вести себя ваш код. TypeScript - это потрясающий анализатор кода stati c для кода JavaScript и некоторый дополнительный синтаксис, который он обеспечивает поверх базового языка JavaScript.

За кулисами он использует анализатор для поворота вашего кода. исходный код в формат данных, называемый абстрактным синтаксическим деревом (AST). Этот формат данных затем используется другими частями компилятора TypeScript для таких вещей, как предоставление обратной связи по проблемам, упрощение рефакторинга и т. Д. c. Они звучат похоже, верно? Они есть! Оба проекта в конечном итоге стремятся помочь вам написать лучший код JavaScript, какой только возможно.

Как работает typcript-eslint и почему у вас несколько пакетов? Как упоминалось выше, TypeScript создает другой формат AST, чем тот, который требуется для работы ESLint.

Это означает, что по умолчанию TypeScript AST несовместим с тысячами правил, которые были написаны для ESLint и для него. В течение многих лет этот проект осуществлялся пользователями.

У TypeScript, в частности, другой формат AST, поскольку он является надмножеством JavaScript. Другими словами, он содержит весь синтаксис JavaScript, а также некоторые дополнительные вещи.

Например:

var x: number = 1; Это недопустимый код JavaScript, поскольку он содержит так называемую аннотацию типа. Когда компилятор TypeScript анализирует этот код для создания TypeScript AST, синтаксис: number будет представлен в дереве, и ESLint просто не сможет это понять без дополнительной помощи.

Однако мы можем использовать тот факт, что ESLint был разработан с учетом этих вариантов использования!

Оказывается, ESLint - это не просто одна библиотека. Вместо этого он состоит из нескольких важных движущихся частей. Одной из таких движущихся частей является парсер. ESLint поставляется со встроенным синтаксическим анализатором (называемым espree), и поэтому, если вы пишете только стандартный JavaScript, вам не нужно заботиться об этой детали реализации.

Самое замечательное, однако, если мы хотим поддерживать нестандартный синтаксис JavaScript, все, что нам нужно сделать, - это предоставить ESLint альтернативный синтаксический анализатор для использования - это первоклассный вариант использования, предлагаемый ESLint.

Знание того, что мы можем сделать это - только начало, конечно, тогда нам нужно приступить к созданию синтаксического анализатора, который способен анализировать исходный код TypeScript, и предоставлять AST, совместимый с ожидаемым ESLint (с некоторыми дополнениями для таких вещей, как: число , как упомянуто выше).

Пакет @typecript-eslint / parser в этом monorepo фактически является пользовательской реализацией синтаксического анализатора ESLint, которую мы предоставляем ESLint в этом сценарии.

Поток и происходящие преобразования выглядят примерно так:

ESLint вызывает синтаксический анализатор, указанный в вашей конфигурации ESLint (@typescript -eslint / parser)

@ typescript-eslint / parser обрабатывает всю конфигурацию ESLint, заданную c, а затем вызывает @ typescript-eslint / typescript-estree, пакет agnosti c, который касается только взятие исходного кода TypeScript и создание соответствующего AST.

@ typescript-eslint / typescript-estree работает, вызывая компилятор TypeScript для данного исходного кода для создания TypeScript AST, а затем преобразовывая этот AST в формат что ожидает ESLint.

Примечание. Этот формат AST более широко используется, чем просто для ESLint. Он даже имеет свое собственное spe c и известен как ESTree, поэтому наш пакет называется typescript-estree.

Поскольку @ typescript-eslint / typescript-estree имеет очень конкретную c цель, он может быть использован для инструментов с аналогичными требованиями к ESLint. Поэтому он также используется для питания удивительного самоуверенного форматера кода Prettier в сценарии использования TypeScript.

Это примерно охватывает часть анализа! Но как насчет правил? Именно здесь наши плагины вступают в игру.

Пакеты, включенные в этот проект Пожалуйста, перейдите по ссылкам ниже для пакетов, которые вам интересны.

@ typescript-eslint / typescript-estree - полностью универсальный c Синтаксический анализатор TypeScript, который принимает исходный код TypeScript и создает EST-совместимый AST

Этот пакет также используется для обеспечения возможности использования собственного замечательного сценария использования TypeScript Преобразователем форматированного кода. @ typescript-eslint / parser - анализатор ESLint-speci c, который использует typcript-estree и предназначен для использования в качестве замены стандартного синтаксического анализатора ESLint, espree.

@ typescript-eslint / eslint-plugin - Плагин ESLint-speci c, который при использовании вместе с @ typescript-eslint / parser позволяет запускать правила линерования TypeScript c.

@ typescript-eslint / eslint-plugin -tslint - плагин ESLint-speci c, который запускает экземпляр TSLint в настройках ESLint, чтобы пользователям было проще переходить с TSLint на ESLint.

Answer 4

Используйте пакет, такой как typescript-eslint / parser . Я не могу предоставить гораздо больше, чем ссылку в этом случае. Если вам нужна помощь в его использовании, дайте мне знать.