Лучший способ просмотра ошибок в VS Code с помощью Error Lens

Вы пишете React-компонент, ESLint обнаруживает проблему, и вы не узнаете об этом, пока не взглянете на строку состояния — или того хуже, пока не упадёт сборка. Стандартный способ отображения ошибок в VS Code полагается на волнистые подчёркивания и панель Problems, и то и другое легко пропустить во время интенсивной разработки. Error Lens решает эту проблему, выводя диагностические сообщения прямо в редактор, на строку, где находится проблема.

Вот что он делает, как работает и что нужно учесть перед установкой.

Что на самом деле делает VS Code Error Lens

Error Lens — это расширение для VS Code, которое улучшает видимость ошибок, отображая диагностические сообщения инлайн — прямо в конце проблемной строки — вместо того чтобы прятать их за всплывающими подсказками или панелью Problems.

Когда языковой сервер или линтер сообщает о проблеме, Error Lens:

• Подсвечивает всю строку цветным фоном (красный для ошибок, жёлтый для предупреждений, синий для информационных сообщений)
• Добавляет диагностическое сообщение в виде текста в конце этой строки
• Показывает иконки в желобе рядом с номерами строк (опционально)
• Выводит сводку в строке состояния (опционально)

Важно понимать: Error Lens не генерирует диагностику самостоятельно. Он показывает то, что уже сообщают ваш языковой сервер, компилятор TypeScript, ESLint или другие инструменты линтинга. Если инструмент не обнаруживает проблему, Error Lens тоже её не покажет.

Почему инлайн-ошибки VS Code важны для фронтенд-разработки

Фронтенд-разработка движется быстро. Вы жонглируете типами TypeScript, правилами ESLint, CSS-in-JS и пропсами компонентов — часто одновременно в нескольких файлах. Стандартный интерфейс VS Code требует либо наводить курсор на подчёркивания, либо держать один глаз на панели Problems. Ни то, ни другое не идеально, когда вы в потоке.

С инлайн-ошибками VS Code, видимыми прямо в редакторе, вы замечаете проблемы в момент их появления. Опечатка в имени пропса, отсутствующая зависимость в useEffect, неиспользуемый импорт, отмеченный ESLint — всё это появляется немедленно, в контексте, без необходимости отвлекаться и смотреть в другое место.

Именно эта более тесная обратная связь делает Error Lens ценным инструментом во фронтенд-разработке.

Настраиваемые уровни диагностики и параметры отображения

Error Lens даёт вам контроль над тем, что показывается и как. Настройка errorLens.enabledDiagnosticLevels принимает любую комбинацию из "error", "warning", "info" и "hint". Если сообщения уровня hint загромождают экран, вы можете полностью исключить их из списка.

Несколько полезных настроек:

{
  "errorLens.enabledDiagnosticLevels": ["error", "warning"],
  "errorLens.messageBackgroundMode": "message",
  "errorLens.followCursor": "activeLine",
  "errorLens.delay": 500
}

• messageBackgroundMode контролирует, подсвечивается ли вся строка или только текст сообщения. Установка значения "message" значительно снижает визуальный шум.
• followCursor со значением "activeLine" показывает инлайн-сообщения только для строки, на которой находится курсор — хороший вариант, если подсветка всего файла кажется избыточной.
• delay добавляет паузу (в миллисекундах) перед появлением декораций, что помогает на больших файлах, где постоянная перерисовка может отвлекать.

Вы также можете исключить определённые файлы, используя glob-шаблоны с errorLens.excludePatterns, или подавить диагностику от конкретных инструментов с помощью errorLens.excludeBySource.

Лучшая видимость ошибок без информационного шума

Самая частая жалоба на расширение Error Lens для VS Code — информационная перегрузка, особенно в файлах с большим количеством существующих предупреждений. Решение не в том, чтобы удалить его, а в том, чтобы настроить.

Начните только с ошибок и предупреждений. Используйте "followCursor": "activeLine", если отображение всего файла слишком избыточно. Постепенно расширяйте то, что показываете, по мере привыкания. Большинство разработчиков находят комфортную конфигурацию в течение одного-двух дней.

Заключение

Встроенная диагностика VS Code функциональна, но пассивна. Error Lens делает её активной — размещая сообщение там, где уже находятся ваши глаза. Для фронтенд-разработчиков, которым нужна более быстрая и чёткая обратная связь от ESLint, TypeScript и других языковых инструментов, это одно из самых практичных расширений, которые можно добавить в свою настройку.

Установите его из VS Code Marketplace, оставьте настройки по умолчанию на день, затем настройте под себя.

Часто задаваемые вопросы

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.