Skip to main content

Що таке AST при написанні плагіна і як з ним працювати?

Frontend-інструментиJunior~2 хв читання
Запропонувати правку

AST (Abstract Syntax Tree, абстрактне синтаксичне дерево) - це деревоподібне представлення вихідного коду, у якому кожна конструкція програми (змінна, функція, оператор, вираз) представлена у вигляді вузла дерева з описом типу і своїх властивостей. ESLint під час аналізу не працює з рядками коду напряму, він спочатку перетворює код на AST, а плагін взаємодіє вже з цим деревом.

Навіщо потрібен AST при написанні правил ESLint

Коли ви створюєте правило, вам потрібно зловити певну ділянку коду, наприклад:

  • виклик функції,
  • оголошення змінної,
  • використання ідентифікатора,
  • if, return, console.log, JSX-елемент тощо.

AST дає це зробити, тому що кожен з цих елементів - це вузол з типом, і ESLint дозволяє "підписатися" на такі вузли під час обходу дерева.

Як виглядає робота правила з AST (концептуально)

  1. ESLint парсить код → будує AST.
  2. Ваше правило каже ESLint: "коли зустрінеш вузол типу Identifier, виклич мій код".
  3. ESLint викликає ваш callback з інформацією про вузол.
  4. Ви вирішуєте, репортити помилку, ігнорувати чи фіксити код.

Приклад AST-вузла (для змінної const x = 10)

javascript
VariableDeclarator ├─ id: Identifier (name: "x") └─ init: Literal (value: 10)

Це означає: декларується змінна x зі значенням 10.

Базовий приклад правила, що працює з AST

js
create(context) { return { Identifier(node) { if (node.name === "foo") { context.report({ node, message: "Identifier 'foo' is forbidden." }); } } }; }

Тут:

  • Identifier - тип AST-вузла
  • node - сам об'єкт вузла (у ньому є name, loc, parent тощо)
  • context.report() - спосіб повідомити ESLint про помилку

Як розуміти AST і писати правила швидше

Щоб розуміти дерево і вузли, зручно використовувати:

ІнструментЗавдання
https://astexplorer.netподивитися AST коду в реальному часі
espree (пісочниця ESLint-парсера)парсить JS в AST
ESTree специфікаціяописує типи вузлів

AstExplorer - головний інструмент: пишете код зліва → отримуєте AST справа → обираєте потрібні вузли → пишете правило.

Робочий процес при створенні правила з AST

  1. В AstExplorer знаходите потрібний вузол за типом (наприклад CallExpression).
  2. У своєму ESLint-правилі підписуєтеся на цей вузол:
js
CallExpression(node) { ... }
  1. Аналізуєте властивості (node.callee, node.arguments, node.name тощо).
  2. За потреби викликаєте context.report.

Підсумок

AST - це структуроване дерево коду, і правило ESLint працює, обходячи це дерево і реагуючи на потрібні вузли. Робота з AST - це фундамент створення будь-яких кастомних правил ESLint.

Якщо потрібно, можу далі показати як підписуватися на складніші вузли, наприклад CallExpression або JSX, або як зробити autofix (fix у context.report). Продовжити?

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку