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

Покращити цю статтю

Допрацюйте відповідь до «Що таке AST при написанні плагіна і як з ним працювати?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**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](https://astexplorer.net/) | подивитися AST коду в реальному часі |
| espree (пісочниця ESLint-парсера) | парсить JS в AST |
| ESTree специфікація | описує типи вузлів |

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

---

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

1. В AstExplorer знаходите потрібний вузол за типом (наприклад `CallExpression`).
2. У своєму ESLint-правилі підписуєтеся на цей вузол:

```js
  CallExpression(node) { ... }
  ```
3. Аналізуєте властивості (`node.callee`, `node.arguments`, `node.name` тощо).
4. За потреби викликаєте `context.report`.

---

### **Підсумок**

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

---

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати425 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.