Дослідник AST для JavaScript

Як дослідити AST коду JavaScript

1. Вставте код у поле Код JavaScript або натисніть Завантажити приклад, щоб почати з невеликого модуля.
2. Виберіть Тип джерела: Модуль (import/export, суворий режим) для модулів ES або Скрипт (класичний) для звичайних скриптів, які можуть використовувати можливості нестрогого режиму, як-от with.
3. Дерево оновлюється за мить після того, як ви припиняєте друкувати. Натисніть Розібрати, щоб виконати розбір негайно.
4. У розділі Синтаксичне дерево натисніть маленьку стрілку, щоб розгорнути чи згорнути вузол. Натисніть назву вузла, щоб виділити відповідний код у редакторі; панель Вибраний вузол показує його тип, властивість, якій він належить, діапазон символів, рядок і стовпець, прості властивості (ім’я, оператор, необроблене значення…) та вихідний текст.
5. Це працює й навпаки: натисніть будь-де в коді, перемістіть курсор клавіатурою чи виділіть фрагмент коду, і найглибший вузол, що його містить, буде розгорнуто й підсвічено в дереві.
6. Відкрийте JSON ESTree, щоб побачити повне дерево як JSON, з опцією Включити позиції (start, end, loc) або без неї, а потім Копіювати його чи Завантажити JSON.

Лічильники показують кількість Вузлів, Максимальна глибина дерева та кількість Інструкцій верхнього рівня.

Що таке абстрактне синтаксичне дерево

Перш ніж рушій JavaScript, лінтер чи збирач зможе щось зробити з вашим кодом, він розбирає текст у дерево вузлів. Кожен вузол має type (VariableDeclaration, CallExpression, Identifier…) і дочірні вузли, що зберігаються в іменованих властивостях. Для total += size; ви отримаєте ExpressionStatement, чий expression – це AssignmentExpression з оператором +=, ідентифікатором total у left та ідентифікатором size у right. Дужки, крапки з комою й коментарі зникають: дерево зберігає лише суттєву структуру, тому його й називають абстрактним.

Цей інструмент використовує Acorn – невеликий і швидкий аналізатор, що лежить в основі багатьох інструментів JavaScript, з ecmaVersion: "latest". Результат відповідає ESTree – спільному формату, який також створює Espree (ESLint) і який розуміє більшість інструментів перетворення коду. Знання точних типів вузлів потрібне, коли ви пишете правило ESLint, кодмод для Babel чи jscodeshift, плагін Prettier або будь-який скрипт, що аналізує код.

Позиції, діапазони та експорт у JSON

Кожен вузол має start і end – зсуви його першого символу та символу після останнього в коді – і об’єкт loc з рядками (від 1) і стовпцями. У JSON стовпці починаються з 0, як у виводі Acorn; панель Вибраний вузол показує їх від 1, як більшість редакторів. Зніміть позначку Включити позиції (start, end, loc), щоб отримати легший JSON, який простіше порівнювати між двома версіями коду.

Деякі значення не можна записати як JSON: літерали регулярних виразів отримують "value": null (їхня властивість regex зберігає шаблон і прапорці), а літерали BigInt записуються як рядки, як рекомендує специфікація ESTree.

Обмеження та конфіденційність

Код розбирається у вашому браузері й ніколи не виконується та нікуди не надсилається: аналізатор лише читає текст. Вхідні дані обмежено одним мільйоном символів. Дуже великі дерева відображаються на вимогу, пакетами дочірніх вузлів, а JSON, завеликий для попереднього перегляду, усе одно можна завантажити. JSX і TypeScript не є стандартним JavaScript, тому Acorn повідомляє про них як про синтаксичні помилки. Повідомлення Acorn про помилки формуються англійською мовою.