Нам всем нравится Vim. Он существует уже давно и помог нам повысить нашу продуктивность. Линия - еще один важный инструмент, которым мы пользуемся в повседневной жизни. Это делает наш код более понятным и понятным. Это относится и к новым людям, присоединяющимся к нашим проектам позже, а также к нашему будущему.

Я использую eslint для линтинга своих приложений Javascript / React.

Учитывая, что у вас настроен eslint, добавить поддержку линтинга в Vim очень просто.

Syntastic - это плагин для проверки синтаксиса для Vim. Он запускает файлы с помощью внешних средств проверки синтаксиса и отображает пользователю любые возникающие ошибки. Учитывая, что у нас есть средство проверки синтаксиса eslint, Syntastic можно использовать для отображения пользователю ошибок линтинга Javascript.

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

Установка

Следующие шаги помогут установить Syntastic вместе с поддержкой eslint.

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

Процесс установки прост. Если вы используете Vundle в качестве диспетчера подключаемых модулей, добавьте следующую строку в свой .vimrc; а затем запустите :PluginInstall.

Plugin 'vim-syntastic/syntastic'

В противном случае, если вы используете pathogen в качестве диспетчера подключаемых модулей, ознакомьтесь с github проекта, поскольку там есть инструкции по установке.

После установки Syntastic нам нужно настроить наш vimrc. Параметры по умолчанию не подходят для новых пользователей. Я предлагаю вам добавить следующие строки в свой vimrc.

set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 1
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
let g:syntastic_javascript_checkers = ['eslint']
let g:syntastic_javascript_eslint_exe = 'npm run lint --'

Это добавит в ваш vim средство проверки синтаксиса eslint. Это позволяет vim использовать команду npm run lint для запуска eslint для наших файлов, когда это необходимо.

Обычно я добавляю директиву сценария lint в свой package.json, поскольку глобальный eslint не запускает версию eslint, установленную в проекте.

"scripts": {
   ...
   "lint": "eslint .",
   ...
}

У вас все настроено. Запуск :SyntasticInfo должен вернуть некоторую информацию о версии и включенных средствах проверки.

Отладка

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

  • Откройте файл Javascript в вашем vim
  • :let g:syntastic_debug=3
  • :SyntasticCheck eslint
  • запустить :mes
  • изучите вывод, это даст вам отправную точку для дальнейшей отладки

Вуаля. Приятного просмотра.