Плагин ESLint для VS Code

Плагин ESLint для Visual Studio Code обеспечивает тесную интеграцию линтера ESLint со средой разработки. Вместо ручного запуска команд проверки разработчик получает информацию о нарушениях непосредственно в редакторе кода: ошибки подсвечиваются в реальном времени, отображаются предупреждения, доступны быстрые исправления и автоматическое форматирование.

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

Основные возможности расширения:

проверка файлов во время редактирования;
отображение ошибок и предупреждений в редакторе;
автоматическое исправление поддерживаемых нарушений;
интеграция с настройками рабочей области;
поддержка JavaScript, TypeScript и других технологий через соответствующие парсеры и плагины;
работа с монорепозиториями и многоуровневыми конфигурациями.

Установка расширения ESLint

Установка выполняется через Marketplace Visual Studio Code.

Последовательность действий:

Открыть раздел Extensions.
В строке поиска ввести ESLint.
Найти официальное расширение ESLint.
Нажать кнопку Install.
При необходимости перезапустить редактор.

После установки расширение начинает искать конфигурационные файлы ESLint внутри открытого проекта.

Для корректной работы в проекте должен присутствовать установленный пакет ESLint:

npm install eslint --save-dev

или

yarn add eslint --dev

или

pnpm add eslint -D

Принцип работы расширения

После открытия проекта расширение запускает отдельный ESLint Server. Этот процесс анализирует файлы и передает результаты обратно в VS Code через протокол Language Server Protocol (LSP).

Схема взаимодействия выглядит следующим образом:

VS Code
   ↓
ESLint Extension
   ↓
ESLint Server
   ↓
Конфигурация ESLint
   ↓
Исходный код

Каждое изменение файла может инициировать повторную проверку.

Если правило обнаруживает проблему, информация отображается:

в редакторе;
в панели Problems;
в строке состояния;
в подсказках при наведении курсора.

Отображение ошибок в редакторе

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

Пример:

const userName = "Alex"

console.log(userName)

При наличии правила:

{
  "semi": ["error", "always"]
}

редактор покажет ошибку отсутствия точки с запятой.

Визуально нарушения могут отображаться:

красным подчеркиванием — ошибки;
желтым подчеркиванием — предупреждения;
значками на полях редактора;
записями в панели проблем.

Каждая запись содержит:

описание проблемы;
имя правила;
уровень серьезности;
место возникновения.

Панель Problems

Все найденные нарушения собираются в панели Problems.

Открытие:

View → Problems

или сочетанием клавиш:

Ctrl + Shift + M

Панель предоставляет:

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

Пример отображения:

src/app.js

[eslint] Missing semicolon
[eslint] Unexpected console statement

Это позволяет быстро оценить общее состояние проекта.

Быстрые исправления (Quick Fix)

Одним из наиболее полезных механизмов является система Quick Fix.

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

Пример:

const user = "Alex"

Ошибка:

Missing semicolon

После вызова Quick Fix:

const user = "Alex";

Многие правила ESLint поддерживают автоматическое исправление.

Типичные автоматически исправляемые нарушения:

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

Команда Fix All ESLint Problems

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

Вызов:

ESLint: Fix all auto-fixable Problems

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

Пример.

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

const name = "Alex"

console.log(name)

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

const name = "Alex";

console.log(name);

Команда позволяет быстро привести файл к требованиям конфигурации.

Автоматическое исправление при сохранении

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

Настройка:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Теперь при сохранении документа выполняется:

запуск ESLint;
поиск исправляемых нарушений;
автоматическое применение исправлений.

Пример рабочего процесса:

const user = "Alex"

После нажатия Ctrl + S:

const user = "Alex";

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

Форматирование через ESLint

ESLint может использоваться не только как линтер, но и как инструмент форматирования.

Для этого необходимо разрешить расширению выполнять форматирование:

{
  "eslint.format.enable": true
}

После этого ESLint может выступать форматтером документа.

Назначение форматтера по умолчанию:

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}

Теперь команда:

Format Document

будет использовать ESLint.

Совместная работа ESLint и Prettier

Во многих проектах ESLint используется совместно с Prettier.

Типичная схема разделения обязанностей:

Инструмент	Ответственность
ESLint	Качество и корректность кода
Prettier	Форматирование

Пример установки:

npm install --save-dev prettier eslint-config-prettier

Конфигурация:

export default [
  {
    rules: {
      semi: "error"
    }
  }
]

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

В таком сценарии:

Prettier форматирует код;
ESLint проверяет правила качества;
конфликты между инструментами минимизируются.

Настройка рабочей области

Параметры ESLint можно хранить внутри проекта.

Файл:

.vscode/settings.json

Пример:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true
}

Преимущества:

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

Параметр eslint.validate

Не все типы файлов проверяются автоматически.

Список поддерживаемых языков можно настроить.

Пример:

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

После настройки ESLint начнет анализировать указанные типы файлов.

Часто используется также для:

{
  "eslint.validate": [
    "vue",
    "svelte",
    "astro"
  ]
}

при наличии соответствующих плагинов.

Работа с TypeScript

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

npm install --save-dev \
eslint \
typescript \
typescript-eslint

Конфигурация ESLint:

import tseslint from "typescript-eslint";

export default tseslint.config({
  rules: {
    "@typescript-eslint/no-unused-vars": "error"
  }
});

После этого расширение VS Code начинает отображать нарушения TypeScript-правил непосредственно в редакторе.

Пример:

const unusedVariable = "test";

Ошибка:

@typescript-eslint/no-unused-vars

Работа с React

Расширение автоматически отображает ошибки правил React.

Установка:

npm install --save-dev eslint-plugin-react

Конфигурация:

import reactPlugin from "eslint-plugin-react";

export default [
  {
    plugins: {
      react: reactPlugin
    }
  }
];

Пример нарушения:

function App() {
  return <div>Hello</div>;
}

При отсутствии необходимых правил React ESLint сразу сообщит о проблеме.

Работа с Vue

Для Vue требуется специализированный парсер.

Установка:

npm install --save-dev eslint-plugin-vue vue-eslint-parser

Конфигурация:

import vue from "eslint-plugin-vue";

export default [
  ...vue.configs["flat/recommended"]
];

После настройки расширение начинает проверять:

шаблоны;
скрипты;
стили (через дополнительные инструменты).

Ошибки отображаются прямо внутри .vue-файлов.

Диагностика проблем расширения

Иногда ESLint работает в терминале, но не отображает ошибки в VS Code.

Для диагностики используется команда:

ESLint: Show Output Channel

Открывается журнал работы расширения.

Часто встречающиеся сообщения:

Failed to load ESLint library

или

No ESLint configuration found

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

Настройка рабочей директории

В монорепозиториях ESLint может не находить нужную конфигурацию.

Используется параметр:

{
  "eslint.workingDirectories": [
    "packages/frontend",
    "packages/backend"
  ]
}

Либо автоматическое определение:

{
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ]
}

Такая настройка особенно важна для проектов Turborepo, Nx и Lerna.

Производительность расширения

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

Для сохранения производительности рекомендуется:

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

Пример исключений:

node_modules/
dist/
build/
coverage/

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

Интеграция с Git Hooks

Хотя расширение работает внутри редактора, оно часто используется совместно с Git Hooks.

Типичная схема:

Редактирование файла
        ↓
ESLint в VS Code
        ↓
Исправление ошибок
        ↓
Git Commit
        ↓
Повторная проверка через Husky

Такой подход обеспечивает двухуровневый контроль качества:

мгновенная обратная связь в редакторе;
обязательная проверка перед фиксацией изменений.

Основные параметры расширения ESLint

Наиболее часто используемые настройки:

{
  "eslint.enable": true,
  "eslint.format.enable": true,
  "eslint.quiet": false,
  "eslint.run": "onType",
  "eslint.validate": [
    "javascript",
    "typescript"
  ]
}

Назначение параметров:

Параметр	Описание
eslint.enable	Включает расширение
eslint.format.enable	Разрешает форматирование
eslint.run	Определяет момент запуска проверки
eslint.validate	Список поддерживаемых языков
eslint.quiet	Скрывает предупреждения

Грамотно настроенный плагин ESLint превращает Visual Studio Code в полноценную среду статического анализа JavaScript и TypeScript-кода, позволяя обнаруживать проблемы на этапе написания программы, автоматически исправлять множество нарушений и поддерживать единые стандарты качества во всей кодовой базе.