Код-ревью является важнейшим этапом разработки программного обеспечения, позволяющим обнаруживать ошибки, обеспечивать соблюдение конвенций и поддерживать здоровье кодовой базы. Однако люди склонны быть непоследовательными, что может привести к пропуску важных деталей. Абстрактное синтаксическое дерево (AST) позволяет автоматизировать рутинные части код-ревью с высокой точностью.
Что такое AST и почему он важен?
Когда движки JavaScript выполняют код, они не читают текст напрямую. Вместо этого, они парсят код в дерево структуры, представляющее смысл программы. Это дерево и есть абстрактное синтаксическое дерево. Например, строка кода const apiKey = "sk-abc123"; может быть преобразована в дерево узлов:
VariableDeclaration
└─ VariableDeclarator
├─ Identifier (name: "apiKey")
└─ StringLiteral (value: "sk-abc123")
Каждая переменная, функциональный вызов, оператор импорта и оператор становится узлом с типом, местоположением и дочерними узлами. Эта структура позволяет создавать инструменты, такие как ESLint, Prettier, Babel и webpack, которые парсят код в AST, анализируют или преобразуют его и могут генерировать новый код из результата.
Настройка парсера и обхода дерева
Для начала работы с AST необходимо установить два пакета: @babel/parser и @babel/traverse. Первый пакет преобразует исходный код в AST, а второй позволяет обходить дерево и посещать конкретные типы узлов. Минимальная настройка может выглядеть следующим образом:
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const fs = require("fs");
function parseFile(filePath) {
// ...
}
Эта настройка позволит нам прочитать файл и преобразовать его в AST, который можно затем проанализировать и обработать.
Создание пользовательских правил
Одним из ключевых преимуществ использования AST является возможность создания пользовательских правил для анализа кода. Например, мы можем создать правило, которое проверяет наличиеconsole.log в производственном коде. Для этого мы можем использовать функцию traverse для обхода дерева и поиска узлов типа ConsoleStatement.
traverse(ast, {
ConsoleStatement: function(path) {
// ...
}
});
Эта функция позволит нам обнаруживать и обрабатывать узлы, соответствующие нашему правилу.
Создание CLI-инструмента
Чтобы сделать наш инструмент более удобным в использовании, мы можем создать CLI-интерфейс, который позволяет пользователям запускать наш инструмент из командной строки. Для этого мы можем использовать пакет commander и создать интерфейс, который принимает имя файла в качестве аргумента.
const program = require('commander');
program
.version('1.0.0')
.option('-f, --file <file>', 'Имя файла для анализа')
.parse(process.argv);
if (program.file) {
parseFile(program.file);
} else {
console.error('Не указан файл для анализа');
}
Этот интерфейс позволит пользователям запускать наш инструмент из командной строки и указывать имя файла для анализа.
Автоматизация код-ревью с помощью парсинга AST является мощным инструментом для обнаружения ошибок и обеспечения качества кода. С помощью этого подхода мы можем создавать пользовательские правила и обрабатывать код с высокой точностью, что делает его незаменимым инструментом для разработчиков.