Автоматически форматируйте и анализируйте код JavaScript на Neovim

Должен признаться, мне было лень менять свой Атом-редактор и я отложил это на пару недель назад. Я работаю в основном с JavaScript (плюс Typescript для проверки типов), и Atom был хорошим редактором, который удовлетворил мои потребности.

Но теперь это архивный проект:

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

Я знаю, что VS Code — это естественный редактор для перехода на него, но я хотел воспользоваться возможностью, чтобы лучше изучить редактор VI и использовать его в качестве моей основной IDE.

Vim имеет небольшой размер, низкую задержку, быстрый запуск, позволяет больше места на экране, настраиваемый и, что наиболее важно, после того, как мышечная память укоренилась, практически невозможно переключиться на что-то другое.
Джон Биггс и Райан Донован

Опробовав пару дистрибутивов ВИ и готовые наборы плагинов, я остановил свой выбор на LunarVim (на базе Neovim) и очень доволен.

Единственное, чего не хватало, так это прямого способа отформатировать мой JS-код с исправлением Prettier плюс ESLint. Как я делал на Атоме.

Функция fix eslint довольно хороша и может автоматически форматировать/исправлять большую часть вашего кода в соответствии с вашей конфигурацией ESLint. prettier — более мощное средство автоматического форматирования. Одна из приятных особенностей красивого — это его самоуверенность. К сожалению, это недостаточно самоуверенно и/или некоторые мнения отличаются от моих собственных. Поэтому после более красивого форматирования кода я начинаю получать ошибки линтинга.
Кент С. Доддс

Есть много способов интегрировать Prettier и ESLint (см. введение в prettier), и я предпочитаю форматировать с помощью Prettier и применять ESLint, а затем исправлять для дальнейшего форматирования.

На Atom у меня есть Плагин Prettier Atom с включенной интеграцией ESlint для его достижения. Поэтому каждый раз, когда я форматирую код, применяется Prettier, а затем eslint -fix для дальнейшего рефакторинга кода в соответствии с моими желаемыми правилами.

Чтобы иметь такое же поведение на Neovim, я использовал Lua-плагин null-ls (действительно, уже включенный в LunarVim, но вы можете использовать его отдельно в vanilla Neovim, пожалуйста, прочитайте инструкцию по установке null-ls) и настроил новый пользовательское средство форматирования для JavaScript, как показано ниже.

1. красивее-eslint-cli

В качестве первого шага установите prettier-eslint-cli и убедитесь, что он вызывается из вашего пути:

Это исполняемый файл, который Neovim будет вызывать для форматирования кода (это просто CLI, который применяет prettier-eslint к входному файлу. Опции CLI совместимы со стандартным prettier CLI).

2. Конфигурация LUA

Lua (произносится LOO-ah) означает Луна на португальском языке.

Затем настройте null-ls внутри .config/lvim/config.lua (если вы используете ванильный Neovim, вы можете прочитать здесь о том, как использовать Lua, если вы не знакомы с ним).

3. Пакеты проекта DEV

Следующим шагом (который был необходим и для Atom) является добавление некоторых плагинов ESLint в ваш проект (глобальное добавление их невозможно):

4. Правила

В качестве последнего шага не забудьте добавить в проект нужные вам правила Prettier и ESlint (для запуска фазы автоматического форматирования и проверки).

Имейте в виду, что плохо, если правила Prettier и ESLint противоречат сами себе.

Хорошей отправной точкой является расширение стандартного конфига ESLint, а затем конфига красивее (последний удаляет правила, несовместимые с Prettier).

Вы можете сделать это с помощью .eslintrc.json и .prettierrc.json или добавить определения в package.json.

Заключение

С этой конфигурацией я могу автоматически форматировать и анализировать свой JS-код на Neovim, как я делал на Atom с плагином Prettier с интеграцией ESLint.

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

Чтобы добиться этого, разветвление и настройка prettied для использования prettier-eslint может стать решением, возможно, в следующий раз.