Плагин для Emacs

Назначение плагина

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

Плагин для Emacs выполняет несколько важных задач:

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

Поддержка ESLint реализуется через различные пакеты Emacs, наиболее распространёнными среди которых являются Flycheck, Flymake и специализированные расширения для JavaScript-разработки.

Flycheck как основной инструмент интеграции

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

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

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

Основные преимущества Flycheck:

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

Установка Flycheck

Установка через менеджер пакетов Emacs обычно выглядит следующим образом:

(use-package flycheck
  :ensure t
  :init
  (global-flycheck-mode))

После активации режима Flycheck начинает отслеживать изменения в файлах и запускать соответствующие инструменты проверки.

Проверить состояние можно командой:

M-x flycheck-verify-setup

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

Установка ESLint

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

Локальная установка:

npm install eslint --save-dev

Либо через Yarn:

yarn add eslint --dev

Локальная установка считается предпочтительной, поскольку обеспечивает одинаковую версию ESLint для всех участников проекта.

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

npx eslint --init

Когда Flycheck обнаруживает файл JavaScript или TypeScript, он ищет ESLint в каталоге проекта и использует найденную конфигурацию.

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

Flycheck не требует явного указания пути к конфигурационному файлу ESLint.

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

  1. Определяется корень проекта.
  2. Выполняется поиск файлов конфигурации ESLint.
  3. Находится локальная версия ESLint.
  4. Запускается анализ текущего файла.

Могут использоваться следующие конфигурационные файлы:

eslint.config.js
eslint.config.mjs
eslint.config.cjs
.eslintrc.js
.eslintrc.cjs
.eslintrc.json

Если конфигурация не найдена, ESLint может завершиться с ошибкой, которая будет отображена в Emacs.

Отображение ошибок и предупреждений

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

Flycheck отображает:

  • красные индикаторы ошибок;
  • жёлтые индикаторы предупреждений;
  • сообщения в минибуфере;
  • список проблем в отдельном окне.

Пример сообщения:

Unexpected console statement.

Или:

'data' is assigned a value but never used.

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

Навигация по найденным проблемам

Flycheck предоставляет набор команд для перемещения между ошибками.

Следующая ошибка:

M-x flycheck-next-error

Предыдущая ошибка:

M-x flycheck-previous-error

Список всех нарушений:

M-x flycheck-list-errors

Открывается отдельный буфер, содержащий:

  • номер строки;
  • тип проблемы;
  • текст сообщения;
  • правило ESLint.

Например:

42  warning  no-console
58  error    no-unused-vars

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

Использование локальной версии ESLint

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

Flycheck способен автоматически использовать путь:

node_modules/.bin/eslint

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

Проверить используемую версию можно командой:

npx eslint --version

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

Настройка пути к ESLint

В нестандартных случаях путь к ESLint задаётся вручную.

Пример:

(setq flycheck-javascript-eslint-executable
      "/usr/local/bin/eslint")

Либо:

(setq flycheck-eslint-executable
      "/usr/local/bin/eslint")

Подобная настройка бывает полезна:

  • при использовании контейнеров;
  • при нестандартной структуре проекта;
  • при наличии нескольких версий Node.js.

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

По умолчанию Flycheck запускает проверки после изменения буфера и во время сохранения.

Параметры поведения могут быть изменены:

(setq flycheck-check-syntax-automatically
      '(save mode-enabled))

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

  • после сохранения файла;
  • при включении режима.

Другой вариант:

(setq flycheck-check-syntax-automatically
      '(save idle-change))

Здесь анализ запускается ещё и после периода бездействия пользователя.

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

ESLint поддерживает режим автоматического исправления части нарушений через флаг:

eslint --fix

В Emacs можно создать пользовательскую команду:

(defun eslint-fix-file ()
  (interactive)
  (shell-command
   (concat "eslint --fix " buffer-file-name))
  (revert-buffer t t t))

После её выполнения ESLint исправит доступные нарушения и обновит содержимое буфера.

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

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

Интеграция с TypeScript

Flycheck поддерживает работу ESLint с TypeScript без дополнительного вмешательства со стороны редактора.

При наличии пакетов:

npm install --save-dev \
eslint \
typescript \
@typescript-eslint/parser \
@typescript-eslint/eslint-plugin

и корректной конфигурации ESLint проверки файлов:

.ts
.tsx

будут запускаться автоматически.

Ошибки отображаются так же, как и для JavaScript.

Работа с современным Flat Config

Начиная с ESLint 9 основной конфигурацией считается Flat Config.

Типичный файл:

export default [
  {
    files: ["**/*.js"],
    rules: {
      semi: "error",
      quotes: ["error", "single"]
    }
  }
];

Flycheck не требует специальных настроек для работы с новым форматом, если используется актуальная версия ESLint.

Главное условие — наличие установленного ESLint в проекте и корректно настроенного Node.js окружения.

Использование Flymake

Помимо Flycheck существует встроенная система диагностики Emacs под названием Flymake.

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

Пример подключения:

(add-hook 'js-mode-hook
          'flymake-mode)

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

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

Недостатком считается менее гибкая настройка по сравнению с Flycheck.

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

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

Наличие ESLint:

npx eslint --version

Корректность конфигурации:

npx eslint src/index.js

Наличие Node.js:

node --version

Состояние Flycheck:

M-x flycheck-verify-setup

Эти проверки позволяют быстро определить источник ошибки.

Типичные проблемы

ESLint не найден

Сообщение:

Cannot find eslint

Причины:

  • ESLint не установлен;
  • каталог node_modules отсутствует;
  • неверно настроена переменная PATH.

Решение:

npm install

или

npm install eslint --save-dev

Не определяется корень проекта

Если Emacs запускается из произвольного каталога, Flycheck может не найти конфигурацию ESLint.

Часто помогает наличие одного из файлов:

package.json
.git
eslint.config.js

в корневом каталоге проекта.

Используется неправильная версия Node.js

При работе с менеджерами версий:

  • nvm;
  • fnm;
  • asdf;

Emacs иногда запускается с другим окружением.

Для проверки полезно выполнить:

(getenv "PATH")

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

Ошибки не обновляются

Иногда диагностика остаётся устаревшей после изменения файла.

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

M-x flycheck-buffer

Либо можно отключить и снова включить режим:

M-x flycheck-mode

Пример полной конфигурации

Ниже приведён распространённый вариант настройки Emacs для работы с ESLint через Flycheck:

(use-package flycheck
  :ensure t
  :init
  (global-flycheck-mode))

(use-package js
  :mode "\\.js\\'")

(use-package typescript-mode
  :ensure t
  :mode "\\.ts\\'")

(setq flycheck-check-syntax-automatically
      '(save idle-change mode-enabled))

(setq flycheck-idle-change-delay 1.0)

Такая конфигурация обеспечивает:

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