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

Линтинг JavaScript в Visual Studio

  • Статья

Linting JavaScript и TypeScript в Visual Studio осуществляется с помощью ESLint. Если вы не знакомы с ESLint, начните с ознакомления с документацией .

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

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

снимок экрана страницы параметров инструментов анализа кода.

На странице параметров можно также изменить набор файлов, которые требуется выполнить. По умолчанию все расширения файлов, которые могут быть проверены линтером (.js, .jsx, .ts, .tsx, .vue, .html), будут проверены. Редактор на основе HTML LSP должен быть включен для проверки кода в файлах Vue и HTML. Соответствующий параметр можно найти в tools > Options > Environment > Preview Features>редакторе 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\n\nodejs\n\node_modules.

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

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

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

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

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

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

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

снимок экрана. Быстрые действия для линтинга.

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

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

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

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

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