Плагин для Vim и Neovim

Использование ESLint напрямую из редактора позволяет обнаруживать проблемы в коде ещё до запуска сборки, тестов или отдельной проверки через командную строку. Для пользователей Vim и Neovim это особенно важно, поскольку философия данных редакторов предполагает максимально быстрый цикл редактирования без постоянного переключения между терминалом и файлами проекта.

Интеграция ESLint в Vim и Neovim обеспечивает:

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

Подходы к интеграции ESLint

Существует несколько способов подключения ESLint к Vim и Neovim:

  1. Через плагины линтинга.
  2. Через Language Server Protocol (LSP).
  3. Через асинхронные системы проверки кода.
  4. Через внешние команды и пользовательские скрипты.

Наиболее распространёнными являются решения на основе LSP и специализированных плагинов.

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

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

npm install --save-dev eslint

Инициализация конфигурации:

npx eslint --init

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

project/
├── src/
│   ├── app.js
│   └── utils.js
├── node_modules/
├── eslint.config.js
├── package.json
└── package-lock.json

Большинство плагинов Vim и Neovim используют именно локальную версию ESLint из каталога проекта.

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

Одним из наиболее популярных решений для Vim является плагин ALE (Asynchronous Lint Engine).

Основные возможности:

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

Установка через vim-plug:

Plug 'dense-analysis/ale'

Минимальная настройка:

let g:ale_linters = {
\   'javascript': ['eslint'],
\   'typescript': ['eslint'],
\}

После открытия JavaScript-файла ALE автоматически запустит ESLint и покажет найденные проблемы.

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

Рассмотрим файл:

const name = "John"

console.log(name)

При использовании конфигурации ESLint, требующей точек с запятой, ALE может показать:

Missing semicolon.

Ошибка будет отображаться:

  • рядом со строкой;
  • в списке ошибок;
  • в строке состояния редактора.

Навигация между проблемами осуществляется командами:

:ALENext
:ALEPrevious

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

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

Настройка:

let g:ale_fixers = {
\   'javascript': ['eslint'],
\   'typescript': ['eslint'],
\}

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

let g:ale_fix_on_save = 1

После сохранения файла команда ESLint эквивалентна:

eslint --fix

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

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

До появления современных LSP-решений широкое распространение получил плагин Neomake.

Установка:

Plug 'neomake/neomake'

Включение проверки:

call neomake#configure#automake('nrwi', 500)

Настройка ESLint:

let g:neomake_javascript_enabled_makers = ['eslint']

Neomake запускает ESLint асинхронно и отображает результаты в редакторе.

Интеграция через Language Server Protocol

Современные версии Neovim активно используют LSP.

Преимущества такого подхода:

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

Для ESLint существует отдельный LSP-сервер.

Установка:

npm install -g vscode-langservers-extracted

Либо:

npm install -g eslint
npm install -g vscode-eslint-language-server

Настройка встроенного LSP в Neovim

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

local lspconfig = require('lspconfig')

lspconfig.eslint.setup({
    settings = {
        format = true,
    }
})

После запуска редактора ESLint становится полноценным поставщиком диагностик через LSP.

Использование nvim-lspconfig

Наиболее распространённый способ настройки LSP в Neovim.

Установка:

{
    "neovim/nvim-lspconfig"
}

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

require('lspconfig').eslint.setup({})

После открытия JavaScript- или TypeScript-файла сервер автоматически подключается к проекту.

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

Многие разработчики используют ESLint для исправления ошибок при сохранении.

Пример:

vim.api.nvim_create_autocmd("BufWritePre", {
    command = "EslintFixAll",
})

При сохранении выполняются все доступные исправления.

Плагин nvim-lint

Современной альтернативой ALE является nvim-lint.

Установка:

{
    "mfussenegger/nvim-lint"
}

Настройка:

local lint = require("lint")

lint.linters_by_ft = {
    jav * ascript = { "eslint" },
    javascriptreact = { "eslint" },
    typescript = { "eslint" },
    typescriptreact = { "eslint" }
}

Автоматический запуск:

vim.api.nvim_create_autocmd(
    { "BufWritePost", "InsertLeave" },
    {
        callback = function()
            require("lint").try_lint()
        end,
    }
)

Плагин none-ls (бывший null-ls)

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

Установка:

{
    "nvimtools/none-ls.nvim"
}

Настройка источника диагностики:

local null_ls = require("null-ls")

null_ls.setup({
    sources = {
        null_ls.builtins.diagnostics.eslint
    }
})

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

null_ls.setup({
    sources = {
        null_ls.builtins.code_actions.eslint
    }
})

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

Работа с Quickfix List

Большинство плагинов могут отправлять результаты ESLint в список Quickfix.

Открытие списка:

:copen

Закрытие:

:cclose

Переход между ошибками:

:cnext
:cprev

Пример содержимого:

src/app.js|3 col 15| Unexpected console statement
src/utils.js|10 col 7| Missing semicolon

Quickfix особенно удобен при работе с большими проектами.

Линтинг только текущего файла

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

:!npx eslint %

Символ % обозначает текущий файл.

Пример выполнения:

npx eslint src/app.js

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

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

Типичная конфигурация Vim:

autocmd BufWritePost *.js silent !eslint %

Для Neovim на Lua:

vim.api.nvim_create_autocmd(
    "BufWritePost",
    {
        pattern = "*.js",
        command = "!eslint %"
    }
)

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

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

Рекомендуется всегда использовать ESLint, установленный в проекте.

Нежелательный вариант:

npm install -g eslint

Предпочтительный вариант:

npm install --save-dev eslint

Преимущества локальной установки:

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

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

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

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

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

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

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

Пример для LSP:

root_dir = require("lspconfig.util").root_pattern(
    "eslint.config.js",
    "package.json",
    ".git"
)

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

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

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

Редактирование файла
        ↓
     ESLint
        ↓
     Prettier
        ↓
Сохранение результата

Пример конфигурации автоматического исправления:

vim.api.nvim_create_autocmd(
    "BufWritePre",
    {
        callback = function()
            vim.lsp.buf.format()
        end,
    }
)

В этом случае форматирование и исправление нарушений происходят автоматически.

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

Наиболее распространённые причины отсутствия результатов ESLint в Vim и Neovim:

ESLint не установлен

Проверка:

npx eslint -v

Не найден конфигурационный файл

Проверка:

npx eslint src/app.js

Если конфигурация отсутствует, ESLint сообщит об ошибке.

Неверно определён корень проекта

Признаки:

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

Конфликт нескольких плагинов

Например:

ALE
+
nvim-lint
+
eslint LSP

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

Рекомендованные варианты настройки

Классический Vim

Vim
 └── ALE
      └── ESLint

Простое решение с минимальным объёмом настройки.

Современный Neovim

Neovim
 └── LSP
      └── ESLint Language Server

Наиболее функциональный вариант.

Минималистичная конфигурация

Neovim
 └── nvim-lint
      └── ESLint

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

Полноценная среда разработки

Neovim
 ├── ESLint LSP
 ├── TypeScript LSP
 ├── Prettier
 └── Treesitter

Такой набор обеспечивает возможности, сопоставимые с современными графическими IDE, сохраняя скорость и гибкость Vim и Neovim.

Оглавление