Используем Vim как IDE для ReactJS + Typescript

Олег Кусов26.03.2022

Я не буду спрашивать вас зачем вам понадобилась такая связка, но это как минимум прикольно.

Для начала необходимо установить neovim. Почему не обычный vim? Не буду пересказывать, есть множество различной информации. Далее устанавливаем vim-plug для плагинов. Необходимо будет в директории ~/.config/ создать папку nvim и внутри нее init.vim - в этом файле будет храниться конфигурация Neovim.

Далее создаем рядом с ней папку plugs, куда будут устанавливаться плагины. После чего вставляем в init.vim следующий контент:

call plug#begin('~/.config/nvim/plugs')
    Plug 'neoclide/coc.nvim', {'branch': 'release'}
    Plug 'preservim/nerdtree',
    Plug 'Xuyuanp/nerdtree-git-plugin',
    Plug 'airblade/vim-gitgutter'
    Plug 'doums/darcula'
    Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }
    Plug 'junegunn/fzf.vim'
"    for fzf: brew install the_silver_searcher
call plug#end()

au VimEnter *  NERDTree
let NERDTreeShowHidden=1
set number
colorscheme darcula

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

  • neoclide/coc.nvim: необходим для поддержки TypeScript. Поддерживается переход к определениям, отображение ошибок в коде и попапы с предложениями об автодополнении.
  • preservim/nerdtree: дерево каталогов. Для переключения между окнами используем
    control + ww
    , настроек у него много как и горячих клавиш, нужно изучать.
  • Xuyuanp/nerdtree-git-plugin: показывает git-состояние файла (модифицирован, новый и т.д).
  • airblade/vim-gitgutter: показывает изменения в файле по каждой строке.
  • doums/darcula: тема Dracula. Здесь уже на любителя, можете ставить любые темы.
  • junegunn/fzf и junegunn/fzf.vim: мощная поисковая утилита. Например, с помощью :Ag <строка> можно искать введенную строку по всем файлам проекта. Не забудьте установить отдельно Ag:
    brew install the_silver_searcher

Команды конфига:

  • au VimEnter * NERDTree: запускает NERDTree при запуске nvim.
  • let NERDTreeShowHidden=1: показывает скрытые файлы в дереве
  • set number: отображает нумерацию строк в редакторе
  • colorscheme darcula: задает тему

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