React-разработка в Vim: Настройка и плагины

В этой статье мы рассмотрим настройку Vim для разработки React и установку необходимых плагинов, чтобы максимально эффективно использовать этот инструмент.

Установка и настройка Vim

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

1. Установите Vim с помощью пакетного менеджера:

           sudo apt install vim
           

2. Проверьте версию:

           vim --version
           

Для комфортной работы необходимо настроить файл .vimrc, который находится в вашем домашнем каталоге. Если его нет, создайте:

touch ~/.vimrc

Настройка плагинов для React

Плагины расширяют возможности Vim и делают его мощным инструментом для разработки на React. Рассмотрим основные из них:

1. Vim-Plug: менеджер плагинов

Для установки плагинов потребуется менеджер плагинов. Мы будем использовать Vim-Plug:

curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Добавьте следующие строки в .vimrc для управления плагинами:

call plug#begin('~/.vim/plugged')

" React-specific plugins
Plug 'pangloss/vim-javascript'                   " Поддержка JavaScript
Plug 'mxw/vim-jsx'                               " Поддержка JSX
Plug 'neoclide/coc.nvim', {'branch': 'release'}  " Поддержка LSP и автозавершения

call plug#end()

После добавления плагинов в .vimrc выполните команду:

vim +PlugInstall +qall

Чтобы убедиться, что все эти плагины установлены, запустите vim и выполните в нём:

:PlugStatus

Если результат такой же как на скриншоте, значит плагины установлены верно:

Если при запуске Vim возникла ошибка, возможно в репозитории вашего дистрибутива Linux не достаточно свежая версия Vim. Данная статья актуальна для версии 9.1. Если у вас установлена более ранняя версия и обновиться из репозитория не удаётся, вы можете скачать свежий AppImage с GitHub vim-appimage.

2. CoC.nvim: поддержка LSP

CoC.nvim (Conquer of Completion) добавляет поддержку автозавершения кода и языкового сервера. Для React настройте CoC с помощью плагина coc-tsserver:

:CocInstall coc-tsserver

Добавьте настройки в .vimrc:

let g:coc_global_extensions = ['coc-tsserver']

Настройка Prettier для форматирования

Prettier помогает автоматически форматировать код, что особенно полезно в больших проектах. Установите Prettier:

npm install prettier

Добавьте следующую настройку в .vimrc для интеграции с CoC.nvim:

autocmd FileType javascript,typescript,json,css,html,javascriptreact,typescriptreact nnoremap <silent> <leader>f :CocCommand prettier.formatFile<CR>

Форматирование документа будет работать при вводе

\f

Работа с React в Vim

После настройки Vim вы можете:

• Использовать автозавершение кода с помощью CoC.nvim.
• Работать с подсветкой синтаксиса JSX и TypeScript.
• Форматировать код с Prettier, не выходя из редактора.

При должной настройке Vim может быть довольно хорош при разработке на React, однако если в какой-то момент вас утомит консольный интерфейс и надоест искать необходимые плагины, обратите внимание на WebStorm. В частности можете почитать нашу статью о его скрытых возможностях, что может послужить определённым подспорьем в поиске ответа на вопрос - стоит ли на него переходить.