Процессор в ESLint представляет собой механизм предварительной обработки файлов, позволяющий преобразовывать исходный текст в набор виртуальных JavaScript-фрагментов, которые затем проходят стандартный цикл линтинга. Такая модель необходима в ситуациях, когда исходный файл содержит не чистый JavaScript, а смешанный или контейнерный формат.
Ключевая задача процессора заключается в двух этапах:
Таким образом ESLint получает возможность анализировать структуры, которые формально не являются JavaScript-файлами, но содержат JS-код внутри.
Сопоставление процессоров с типами файлов строится через конфигурацию ESLint и механизм выбора правил по расширению или шаблону пути.
Основной принцип:
*.md,
*.vue, *.html)Такой подход позволяет единообразно применять правила ESLint к разнородным источникам кода.
При запуске анализа ESLint выполняет несколько стадий:
Важно, что ESLint не «понимает» структуру контейнерных файлов без процессора — он работает только с уже извлечённым JavaScript.
В классической конфигурации ESLint (eslintrc) процессоры применяются
через поле processor внутри overrides.
Принцип работы:
Пример логики конфигурации:
*.md → markdown-процессор*.vue → vue-процессор*.html → html-процессорВажный момент: процессор всегда применяется на уровне файла, а не отдельного правила.
В flat-конфигурации ESLint (используемой в новых версиях) процессоры
задаются напрямую в объекте конфигурации через поле
processor.
Структура:
files и
processorЭто устраняет необходимость в overrides и делает
конфигурацию более линейной.
Особенность flat-конфигурации:
Функция preprocess получает на вход:
Результатом является массив виртуальных файлов:
Пример логики:
<script> блоки из HTML<script> из Vue SFCПосле линтинга всех виртуальных блоков ESLint возвращает результаты в виде массива сообщений. Postprocess:
Без этого шага результаты были бы разрозненными и непривязанными к оригинальному документу.
Markdown-файлы часто содержат JavaScript внутри блоков:
# Example
```js
const a = 1;
console.log(a);
Процессор:
- находит fenced code blocks
- извлекает содержимое JavaScript
- передаёт его ESLint как отдельные виртуальные файлы
Результат: ESLint анализирует только кодовые секции, игнорируя текст.
---
### Vue Single File Components
Vue-файлы содержат несколько секций:
- `<template>`
- `<script>`
- `<style>`
Процессор для Vue:
- извлекает `<script>` как JS или TS
- при необходимости преобразует Composition API
- связывает ошибки с оригинальными строками `.vue`
Особенность:
- один файл превращается в несколько виртуальных модулей
- линтинг происходит только для JS-части
---
### HTML
HTML может содержать встроенные скрипты:
```html
<script>
const x = 10;
</script>HTML-процессор:
<script>type="module"Процессор реализуется как объект с методами:
preprocesspostprocesssupportsAutofix (опционально)function preprocess(text, filename) {
return [
{ text: extractedCode, filename: filename + '#block1' }
];
}Функция может:
function postprocess(messages, filename) {
return messages.flat();
}Основная задача — восстановление контекста и корректировка позиций.
ESLint не использует напрямую таблицу расширений для процессоров. Вместо этого применяется комбинация:
files)Типичная схема:
*.md → markdown processor*.vue → vue processor*.html → html processorФактическое сопоставление происходит на этапе разрешения конфигурации.
Процессоры в ESLint имеют ряд архитектурных ограничений:
Дополнительная сложность возникает при:
В сложных проектах процессоры используются для:
Такие сценарии требуют строгой синхронизации между исходным и виртуальным представлением файла, иначе теряется точность диагностики.