Плагин для WebStorm и IntelliJ

Современные среды разработки семейства IntelliJ обладают встроенной поддержкой ESLint, позволяющей выполнять анализ кода непосредственно во время написания программ. Интеграция обеспечивает автоматическую проверку JavaScript, TypeScript, JSX, TSX, Vue и других файлов, поддерживаемых ESLint через соответствующие плагины и конфигурации.

Использование ESLint внутри IDE предоставляет ряд преимуществ:

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

В отличие от запуска ESLint через командную строку, интеграция с WebStorm и IntelliJ обеспечивает непрерывный анализ кода без необходимости выполнять отдельные команды.

Поддерживаемые среды разработки

Поддержка ESLint присутствует в следующих продуктах компании JetBrains:

WebStorm;
IntelliJ IDEA Ultimate;
IntelliJ IDEA Community Edition (при наличии необходимых JavaScript-плагинов);
PhpStorm;
PyCharm Professional;
RubyMine;
GoLand;
CLion (с установленной поддержкой JavaScript);
другие IDE платформы IntelliJ.

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

Требования для работы ESLint

Перед использованием интеграции необходимо наличие нескольких компонентов:

Установленный Node.js.
Установленный ESLint.
Конфигурационный файл ESLint.
Открытый проект в IDE.

Проверка Node.js выполняется командой:

node -v
npm -v

Установка ESLint в проект:

npm install eslint --save-dev

Или:

yarn add eslint --dev

После установки обычно создаётся конфигурация:

npx eslint --init

Либо используется современный файл:

// eslint.config.js

export default [
  {
    rules: {
      semi: "error",
      quotes: ["error", "single"]
    }
  }
];

После обнаружения конфигурации IDE автоматически подключает ESLint.

Автоматическое обнаружение ESLint

Наиболее распространённый режим работы — Automatic ESLint Configuration.

В этом режиме IDE самостоятельно:

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

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

Проект
 ├─ node_modules
 │   └─ eslint
 ├─ package.json
 ├─ eslint.config.js
 └─ src
     └─ app.js

При открытии файла IDE автоматически определяет наличие ESLint и начинает проверку кода.

Преимущества автоматического режима:

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

Настройка ESLint через параметры IDE

Конфигурация располагается в разделе:

Settings
 └─ Languages & Frameworks
     └─ JavaScript
         └─ Code Quality Tools
             └─ ESLint

Для macOS:

Preferences
 └─ Languages & Frameworks
     └─ JavaScript
         └─ Code Quality Tools
             └─ ESLint

В окне настроек доступны основные параметры:

Параметр	Назначение
Automatic ESLint Configuration	Автоматическая настройка
Manual ESLint Configuration	Ручная настройка
Node Interpreter	Интерпретатор Node.js
ESLint Package	Путь к пакету ESLint
Configuration File	Конфигурационный файл
Run eslint –fix on save	Исправление при сохранении

Ручная настройка ESLint

В некоторых случаях автоматическое обнаружение невозможно:

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

Тогда применяется режим Manual Configuration.

Необходимо указать:

Node Interpreter

Например:

/usr/local/bin/node

или

C:\Program Files\nodejs\node.exe

ESLint Package

project/node_modules/eslint

Configuration File

eslint.config.js

или

.eslintrc.json

После сохранения настроек IDE начинает использовать указанные параметры.

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

После запуска ESLint найденные проблемы отображаются несколькими способами.

Подчёркивание кода

Пример:

const message = "Hello"

Если правило требует точку с запятой:

semi: ['error', 'always']

редактор выделит строку как ошибочную.

Маркеры на полосе прокрутки

Справа в редакторе появляются цветные индикаторы:

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

Это позволяет быстро перемещаться между найденными нарушениями.

Всплывающие подсказки

При наведении курсора появляется сообщение ESLint:

Missing semicolon.

или

Strings must use singlequote.

Таким образом разработчик получает точную информацию о нарушенном правиле.

Панель Problems

Все найденные нарушения могут отображаться в окне:

Problems

Оно содержит:

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

Пример:

src/user.js
  12:5  Missing semicolon
  15:8  Unexpected console statement

Панель особенно полезна при работе с большими проектами.

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

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

При нахождении ошибки достаточно вызвать:

Alt + Enter

Windows/Linux

или

Option + Enter

macOS

После этого появляется список доступных действий.

Пример:

const title = "Article";

Для правила:

quotes: ['error', 'single']

IDE предложит заменить двойные кавычки на одинарные.

Результат:

const title = 'Article';

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

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

Пример запуска из терминала:

npx eslint . --fix

В WebStorm и IntelliJ аналогичный механизм может запускаться непосредственно из редактора.

Исправляются:

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

Например:

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

const name="John"

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

const name = 'John';

Исправление при сохранении файла

Современные версии IDE позволяют запускать ESLint автоматически при сохранении.

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

Последовательность работы:

Редактирование файла
        ↓
Сохранение
        ↓
ESLint --fix
        ↓
Обновление документа

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

Работа с TypeScript

ESLint в WebStorm и IntelliJ полностью поддерживает TypeScript.

Установка необходимых пакетов:

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

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

import tseslint from 'typescript-eslint';

export default [
  ...tseslint.configs.recommended
];

После настройки IDE анализирует:

interface User {
  id: number;
  name: string;
}

и отображает ошибки TypeScript-правил ESLint непосредственно в редакторе.

Поддержка React

Для React-проектов обычно устанавливаются дополнительные пакеты:

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

Пример конфигурации:

rules: {
  'react/jsx-key': 'error',
  'react-hooks/rules-of-hooks': 'error'
}

IDE будет обнаруживать проблемы внутри JSX:

items.map(item => (
  <li>{item}</li>
))

Например, отсутствие свойства key будет отмечено как ошибка.

Поддержка Vue

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

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

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

import vue from 'eslint-plugin-vue';

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

После настройки IDE корректно анализирует:

<template>
  <div>{{ message }}</div>
</template>

включая шаблоны, скрипты и стили компонента.

Работа в монорепозиториях

Крупные проекты часто используют структуру:

repo
 ├─ packages
 │   ├─ frontend
 │   └─ backend
 ├─ eslint.config.js
 └─ package.json

Либо:

repo
 ├─ apps
 ├─ services
 └─ packages

WebStorm умеет автоматически определять ближайшую конфигурацию ESLint для каждого файла.

Если конфигураций несколько:

frontend/eslint.config.js
backend/eslint.config.js

IDE запускает соответствующую конфигурацию в зависимости от расположения открытого файла.

Использование нескольких конфигураций

В сложных проектах возможно разделение правил:

.eslintrc.frontend.json
.eslintrc.backend.json

или

frontend/eslint.config.js
backend/eslint.config.js

В ручном режиме можно явно указать используемую конфигурацию.

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

Взаимодействие с Prettier

Очень часто ESLint используется совместно с Prettier.

Стандартная схема:

ESLint
    ↓
Поиск ошибок
    ↓
Prettier
    ↓
Форматирование

Установка:

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

После интеграции WebStorm может запускать оба инструмента автоматически.

Это позволяет одновременно:

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

Просмотр запускаемых процессов ESLint

При возникновении проблем полезно использовать диагностические возможности IDE.

Через журналы можно увидеть:

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

Типичные сообщения:

ESLint package not found

Failed to load plugin

Cannot find configuration file

Эти сведения значительно упрощают поиск причин неисправностей.

Типичные проблемы интеграции

ESLint не запускается

Причины:

пакет не установлен;
отсутствует Node.js;
неверный путь к ESLint;
повреждённый node_modules.

Решение:

npm install

или

npm install eslint --save-dev

Не обнаруживается конфигурация

Следует проверить наличие файлов:

eslint.config.js

или

.eslintrc.json

Также необходимо убедиться, что они находятся в пределах открытого проекта.

Ошибки плагинов

Пример:

Failed to load plugin react

Обычно причина заключается в отсутствии зависимости:

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

Не работают автоматические исправления

Не каждое правило поддерживает механизм fix.

Например:

'no-console': 'error'

не может быть автоматически исправлено ESLint.

В таких случаях требуется ручное изменение кода.

Преимущества использования ESLint внутри IDE

Интеграция ESLint с WebStorm и IntelliJ превращает статический анализ в непрерывный процесс контроля качества кода. Проверка выполняется во время набора текста, ошибки становятся заметны ещё до запуска приложения, а механизм быстрых исправлений и автоматического форматирования существенно ускоряет разработку. Благодаря поддержке современных конфигураций, TypeScript, React, Vue и монорепозиториев среда разработки способна эффективно обслуживать как небольшие проекты, так и крупные корпоративные кодовые базы.