amorgunov

Свои правила в ESLint

Вчера писал про @deprecated из JSDoc. Его просто использовать, но он не защитит использование компонента на уровне автоматизации. В CI не будет никаких ворнингов и ошибок, что задепрекейченный компонент или функция используется. Так же бывают кейсы, что нужно запретить что-то сложнее, чем использование компонента: например, не позволять вызывать функцию внутри какой-нибудь другой или, допустим, использовать название переменных меньше двух символов.

Все это можно сделать на уровне ESlint. Можно найти уже готовые статьи на эту тему (например, https://blog.scottlogic.com/2021/09/06/how-to-write-an-es-lint-rule-for-beginners.html). Основной алгоритм: (1) построить абстрактное синтаксическое дерево (AST) JS-фрагмента, (2) на основе него написать правило.

AST - это способ представления исходного кода в виде структуры (дерева), которое потом преобразуется в байт-код. Онлайн его можно построить тут: https://astexplorer.net/. Например, запись const a = 1 будет выглядеть следующим образом:

{
  "type": "Program",
  "body": [{
    "type": "VariableDeclaration",
    "declarations": [{
      "type": "VariableDeclarator",
      "id": {"type": "Identifier", "name": "a"},
      "init": {
        "type": "Literal",
        "value": 1,
        "raw": "1"
      }
    }],
    "kind": "const"
  }]
}

Корень дерева всегда будет нодой с типом Program. У каждой ноды есть поле type (*Declaration, *Expression, Literal и т.д.) и свои дополнительные поля.

Правила, которые должны что-то запрещать (хотя о чем я, весь ESLint построен на запрете всего) можно описывать в виде JavaScript-функции. Так же можно описать в сокращенном виде строкой через правило no-restricted-syntax. Для этого нужно описать так называемый selector (по аналогии с css, нужно описать селектор, только в данном случае такой, использование которого нельзя допустить):

Несколько примеров:

- FunctionExpression - запретить функциональные выражения
- CallExpression[callee.name='require'] - запретить использование require
- CallExpression[callee.name='setTimeout'][arguments.length!=2] - разрешить использовать setTimeout только с двумя параметрами
- FunctionDeclaration[params.length>3] - не допускать объявление функции с более, чем тремя аргументами.

Так же помимо селектора можно указать message и описать ошибку, почему функциональность не разрешена. В моем кейсе нужно было для определённых тестов запретить использование стандартного describe (из jest). Для этого было написано следующе правило:

{
  "rules": {
    "no-restricted-syntax": [
      "error", {
        "selector": "CallExpression[callee.name=\"describe\"]",
        "message": "Используйте ??? вместо describe",
      }
    ]
  }
}

По итогу несколько строчек кода и получаем свое кастомное ESlint-правило, что очень круто на мой взгляд. Если нужно запретить импорт какого-нибудь файла, то можно воспользоваться правилом no-restricted-imports, в котором достаточно указать только путь.

874 views17:44