Отображение ошибок и предупреждений

Одной из ключевых возможностей ESLint является отображение результатов статического анализа исходного кода. После проверки файлов линтер формирует набор сообщений, позволяющих быстро определить проблемные места, оценить серьёзность нарушений и принять решение о необходимых исправлениях. Система отображения ошибок и предупреждений является важной частью рабочего процесса разработки, поскольку обеспечивает обратную связь как при локальном запуске инструментов, так и в редакторах кода, системах непрерывной интеграции и автоматизированных конвейерах сборки.

Категории сообщений ESLint

Каждое сообщение, создаваемое ESLint, относится к одной из двух основных категорий:

Ошибка (error) — нарушение, которое считается критическим.
Предупреждение (warning) — нарушение, требующее внимания, но не блокирующее работу приложения.

Уровень серьёзности задаётся в конфигурации для каждого правила отдельно.

Пример:

module.exports = {
    rules: {
        semi: "error",
        no-console: "warn"
    }
};

В данном случае:

отсутствие точки с запятой считается ошибкой;
использование console.log() считается предупреждением.

Формат вывода в консоли

При запуске ESLint через командную строку результаты отображаются в текстовом виде.

Исходный код:

const user = "Alex"

console.log(user)

Команда проверки:

npx eslint app.js

Возможный результат:

app.js
  1:20  error    Missing semicolon           semi
  3:18  error    Missing semicolon           semi
  3:1   warning  Unexpected console statement no-console

✖ 3 problems (2 errors, 1 warning)

Каждая строка содержит несколько важных элементов:

Элемент	Описание
`1:20`	строка и позиция ошибки
`error`	уровень серьёзности
`Missing semicolon`	описание проблемы
`semi`	правило, вызвавшее сообщение

Подобный формат позволяет быстро определить источник нарушения.

Указание строки и столбца

ESLint старается максимально точно определить место возникновения проблемы.

Пример:

const result = value + 10

Сообщение:

1:26 error Missing semicolon

Число до двоеточия обозначает строку:

Число после двоеточия обозначает позицию символа:

Такая детализация особенно полезна при работе с большими файлами, содержащими сотни или тысячи строк.

Цветовое выделение сообщений

В терминалах, поддерживающих ANSI-цвета, ESLint автоматически выделяет результаты проверки:

ошибки — красным цветом;
предупреждения — жёлтым цветом;
итоговую статистику — контрастным выделением.

Пример визуального представления:

error     Missing semicolon
warning   Unexpected console statement

Цветовое разделение помогает мгновенно отличать критические проблемы от менее значимых замечаний.

Итоговая статистика

После завершения анализа ESLint выводит сводную информацию.

Пример:

✖ 12 problems (8 errors, 4 warnings)

Здесь отображается:

общее количество проблем;
число ошибок;
число предупреждений.

Если нарушений не найдено:

✔ No problems found.

или

0 problems

в зависимости от версии ESLint и используемого форматтера.

Влияние ошибок и предупреждений на код возврата

По умолчанию ошибки влияют на результат выполнения процесса.

Пример:

npx eslint src

Если обнаружены ошибки:

Exit code: 1

Если ошибок нет:

Exit code: 0

Предупреждения обычно не приводят к аварийному завершению процесса.

Это особенно важно для:

CI/CD-систем;
GitHub Actions;
GitLab CI;
Jenkins;
Azure Pipelines.

Сборка может быть настроена таким образом, чтобы завершаться неудачей при наличии ошибок линтера.

Управление уровнями серьёзности

Каждое правило может быть настроено тремя способами.

Выключено

{
    "no-console": "off"
}

или

{
    "no-console": 0
}

Нарушения отображаться не будут.

Предупреждение

{
    "no-console": "warn"
}

или

{
    "no-console": 1
}

ESLint покажет сообщение, но не будет считать его критическим.

Ошибка

{
    "no-console": "error"
}

или

{
    "no-console": 2
}

Нарушение будет отображено как ошибка.

Одновременное отображение нескольких проблем

Одно место в коде может нарушать несколько правил одновременно.

Пример:

var user = "Alex"

console.log(user)

Результат:

1:1   error    Unexpected var, use let or const instead   no-var
1:18  error    Missing semicolon                          semi
3:1   warning  Unexpected console statement               no-console
3:18  error    Missing semicolon                          semi

Каждое правило формирует собственное сообщение.

Вывод идентификатора правила

Последняя колонка содержит имя правила.

Пример:

error Missing semicolon semi

Здесь:

semi

является идентификатором правила.

Это позволяет:

быстро находить документацию;
изменять конфигурацию;
отключать правило;
менять уровень серьёзности.

Отображение ошибок парсинга

Перед запуском большинства правил ESLint должен успешно разобрать исходный код.

Если синтаксис некорректен, появляется ошибка парсинга.

Пример:

function test( {
    return 1;
}

Результат:

Parsing error: Unexpected token {

Подобные сообщения возникают ещё до выполнения большинства правил анализа.

Типичные причины:

пропущенные скобки;
незакрытые строки;
ошибки в импортах;
неверная структура объектов;
некорректный синтаксис ECMAScript.

Ошибки конфигурации

Некоторые сообщения относятся не к исходному коду, а к настройкам ESLint.

Пример:

Definition for rule 'custom-rule' was not found

Причины:

отсутствующий плагин;
опечатка в названии правила;
неверная конфигурация расширения.

Другой пример:

ESLint couldn't find the plugin "eslint-plugin-react"

В подобных ситуациях требуется исправление конфигурации проекта.

Отображение предупреждений в редакторе кода

Современные редакторы интегрируют ESLint напрямую.

Наиболее распространённые варианты:

Visual Studio Code;
WebStorm;
Sublime Text;
Neovim.

После подключения расширения сообщения отображаются непосредственно рядом с проблемным кодом.

Пример:

console.log("test")

Редактор может показать:

подчёркивание строки;
значок предупреждения;
всплывающую подсказку;
сообщение в панели Problems.

Благодаря этому разработчик получает информацию о нарушении сразу во время набора текста.

Подсветка ошибок в редакторе

Для визуального обозначения проблем используются различные виды маркировки.

Распространённые варианты:

Красное подчёркивание

Обычно обозначает ошибку.

const user = "Alex"

Отсутствующая точка с запятой может быть выделена красным цветом.

Жёлтое подчёркивание

Обычно обозначает предупреждение.

console.log(user)

Использование console.log() может быть отмечено как менее критичная проблема.

Маркеры на полях редактора

Многие IDE показывают индикаторы рядом с номерами строк:

1 ●
2 ●
3 ▲

Где:

● — ошибка;
▲ — предупреждение.

Панель проблем

Большинство редакторов имеют специальное окно для просмотра нарушений.

Типичная запись содержит:

Файл	Строка	Тип	Сообщение
app.js	12	Error	Missing semicolon
app.js	15	Warning	Unexpected console statement

Панель позволяет:

сортировать сообщения;
фильтровать результаты;
переходить к нужной строке;
анализировать весь проект.

Форматтеры вывода

ESLint поддерживает различные способы представления результатов анализа.

Стандартный вариант:

npx eslint src

Использование конкретного форматтера:

npx eslint src --format stylish

Другие популярные варианты:

npx eslint src --format json

npx eslint src --format html

npx eslint src --format compact

Форматтер определяет исключительно способ отображения информации и не влияет на сам процесс проверки.

JSON-представление ошибок

Формат JSON удобен для автоматической обработки результатов.

Пример:

[
  {
    "filePath": "app.js",
    "messages": [
      {
        "ruleId": "semi",
        "severity": 2,
        "message": "Missing semicolon",
        "line": 1,
        "column": 20
      }
    ]
  }
]

Такой формат часто используется:

внешними инструментами анализа;
CI/CD-платформами;
системами контроля качества кода;
собственными скриптами обработки результатов.

Ограничение количества предупреждений

ESLint позволяет завершать проверку ошибкой при превышении допустимого числа предупреждений.

Пример:

npx eslint src --max-warnings 0

Теперь любое предупреждение будет считаться причиной неуспешного завершения проверки.

Пример результата:

ESLint found too many warnings (maximum: 0)

Подобный подход часто применяется в проектах с высокими требованиями к качеству кода.

Автоматически исправляемые сообщения

Некоторые нарушения могут сопровождаться возможностью автоматического исправления.

Пример:

const user = "Alex"

Сообщение:

Missing semicolon

Команда:

npx eslint src --fix

После исправления:

const user = "Alex";

Хотя ошибка отображается при первоначальной проверке, ESLint способен автоматически устранить многие подобные нарушения.

Подавление отдельных сообщений

Иногда требуется временно скрыть предупреждение или ошибку.

Для одной строки:

// eslint-disable-next-line no-console
console.log("debug");

Для блока:

/* eslint-disable no-console */

console.log("a");
console.log("b");

/* eslint-enable no-console */

После подавления соответствующие сообщения перестают отображаться в результатах проверки.

Анализ больших отчётов

В крупных проектах количество сообщений может исчисляться тысячами.

Для эффективного анализа обычно используются следующие подходы:

сортировка по типу нарушения;
устранение ошибок перед предупреждениями;
группировка по файлам;
применение автоматического исправления;
постепенное ужесточение конфигурации.

Грамотная организация отображения ошибок и предупреждений позволяет использовать ESLint не только как инструмент поиска синтаксических и стилистических проблем, но и как полноценную систему контроля качества исходного кода на всех этапах разработки.