Поделиться через

Линтинг кода на JavaScript в Visual Studio

  • Статья

Линтинг JavaScript и TypeScript в Visual Studio основан на ESLint. Если вы не знакомы с ESLint, вы можете начать с ознакомления с их документацией.

Включение поддержки подкладок

Чтобы включить поддержку линтинга в Visual Studio 2022 или более поздних версиях, включите параметр Включить ESLint в разделе Инструменты > Параметры > Текстовый редактор > JavaScript/TypeScript > Линтинг.

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

На странице параметров вы также можете изменить набор файлов, которые нужно проверить. По умолчанию все расширения файлов, которые могут быть подвержены проверке (,.js,, , .jsx,, , .ts,, , .tsx,, , .vue,, ,.html,), будут проверены. Редактор на основе HTML LSP должен быть включен для проверки кода в файлах Vue и HTML. Соответствующий параметр можно найти в Инструменты > Параметры > Среда > Предварительные возможности>редакторе HTML на основе LSP.

Эти параметры можно переопределить в некоторых типах проектов, таких как автономные шаблоны проектов React. В этих проектах можно переопределить параметры на странице параметров Tools > с помощью свойств проекта:

снимок экрана свойств проекта линтинга.

Установка зависимостей ESLint

После включения линтинга необходимо установить соответствующие зависимости. Зависимости включают пакет ESLint npm и другие подключаемые модули, применимые к проекту. Этот пакет можно установить в каждом проекте локально, где требуется включить линтинг, или установить глобально с помощью npm install -g eslint. Однако глобальная установка не рекомендуется, так как подключаемые модули и доступные для общего доступа конфигурации всегда должны быть установлены локально.

Начиная с Visual Studio 2022 версии 17.7 ( предварительная версия 2), можно также использовать параметр пути ESLint в разделе "Средства средства >> параметры > текстовый редактор > JavaScript/TypeScript Linting для указания каталога, из которого требуется загрузить ESLint. Этот параметр полезен при глобальной установке ESLint, где вы можете задать соответствующий путь к C:\Program Files\nodejs\node_modules.

В зависимости от файлов, которые требуется выполнить, могут потребоваться другие подключаемые модули ESLint. Например, может потребоваться TypeScript ESLint, что позволяет ESLint работать в коде TypeScript и включать правила, относящиеся к дополнительным сведениям о типе.

Если ESLint включен, но пакет ESLint npm не найден, отображается золотой бар. Это сообщение позволяет установить ESLint в качестве локальной npm зависимости разработки.

снимок экрана: установка золотой панели ESLint.

Аналогичным образом, когда не найден файл .eslintrc, отображается золотой бар. Это сообщение позволяет запустить мастер настройки, который устанавливает подключаемые модули, применимые к текущему проекту.

снимок экрана: золотой бар мастера запуска ESLint.

Отключение правил линтинга и автоматических исправлений

Вы можете отключить ошибки подстроки в определенной строке или файле. Ошибки можно отключить с помощью меню "Быстрые действия", обозначенного значком в виде лампочки:

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

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

снимок экрана отключенного правила линтинга.

Кроме того, действия автофиксации кода позволяют применить автоматическое исправление для устранения соответствующей ошибки линтинга.

Устранение неполадок

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