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


Linting JavaScript в Visual Studio

Linting JavaScript и TypeScript в Visual Studio работает под управлением ESLint. Если вы не знакомы с ESLint, вы можете начать с проверка их документации.

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

Чтобы включить поддержку подстроек в Visual Studio 2022 или более поздних версиях, включите параметр Enable ESLint в >> текстовом редакторе > инструментов JavaScript/TypeScript > Linting.

Screenshot of linting Tools Options page.

На странице параметров можно также изменить набор файлов, которые требуется выполнить. По умолчанию все расширения файлов, которые могут быть вылинены (JS, JSX, TS, TSX, VUE, .HTML) будут вылинены. Редактор на основе HTML LSP должен быть включен для linting Vue и HTML-файлов. Соответствующий параметр можно найти в > параметрах параметров > среды > предварительной версии инструментов.

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

Screenshot of linting project properties.

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

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

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

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

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

Screenshot of Install ESLint gold bar.

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

Screenshot of Run ESLint wizard gold bar.

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

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

Screenshot of linting Quick Actions.

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

Screenshot of disabled linting rule.

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

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

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