Розглянемо деякі популярні плагіни для фронтенд-розробки, які можна використати у Vim. Поки ми не будем зосереджуватись на плагінах, що не стосуються фронтенду (nerdtree, vim-airline...), а також налаштувань редактора.
Найперше нам потрібно встановити Vim або Neovim. Якщо він у вас є, просто оновіться до останньої версії. Почнемо працювати з чистого аркуша, тобто з порожнього .vimrc- або, як в моєму випадку, з init.vim-файла (оскільки я використовую Neovim).
Для початку нам потрібен менеджер плагінів, я послуговуюсь vim-plug. Переходимо на його GitHub-сторінку і встановлюємо за інструкцією. Після цього редагуємо init.vim:
call plug#begin('~/.local/share/nvim/plugged')
" Підімкнемо наші плагіни
call plug#end()
Щоб зміни почали діяти, перезавантажимо Vim або виконаємо команду source з файлом конфігурацій.
source ~/.config/nvim/init.vim
Далі потрібно завантажити актуальну версію node.js. Якщо у вас її немає, можете скористатися NVM.
Після цього ставимо плагін coc.vim. Основна його робота — це intellisense, детальніше про нього можна дізнатись в документації. Він підтримує багато популярних мов, форматів та фреймворків, увесь список можна знайти тут.
Відредагуємо файл конфігурацій:
call plug#begin('~/.local/share/nvim/plugged')
Plug 'neoclide/coc.nvim', {'branch': 'release'}
call plug#end()
Виконаємо команду :PlugInstall. Далі нам потрібно налаштувати роботу плагіна; для зручності скористаємось тією, що вказана в документації. Копіюємо і вставляємо код у файл конфігурацій.
Встановимо coc-розширення для основних інструментів:
- coc-html;
- coc-css;
- coc-tsserver (для javascript і typescript).
Цього буде достатньо, але за бажанням можна встановити розширення для angular, vue... Ми зможемо користуватись автодоповненням, автоімпортами, інформацією про сигнатури методів і типи. Але це не все, що є у coc.vim, рекомендую подивитись README розширень, щоб ознайомитись з усіма можливостями.
Зараз нашій конфігурації не вистачає лінтера, щоб відловлювати помилки: наприклад, eslint або tslint. Хорошим, але не єдиним варіантом асинхронного лінтинга файлів у Vim є syntastic. Встановлюється так само, як coc.vim:
call plug#begin('~/.local/share/nvim/plugged')
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'vim-syntastic/syntastic'
call plug#end()
Перезавантажуємо vim, виконуємо :PlugInstall та додаємо рекомендовані налаштування в наш init.vim-файл:
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
Після збереження можемо почати ним користуватись. У README зображено, який вигляд матимуть повідомлення про помилки. Якщо ви бачите помилки про те, що у вас немає npm-пакетів, просто встановіть їх глобально.
Все працює добре, але нам доводиться самим форматувати код, аби він відповідав нашим вимогам. Мені лінь цим займатись, тому я перекину цю роботу на наш редактор. Одним з найбільш популярних інструментів для автоформатування коду є prettier, ним і скористаємось. Для цього потрібно встановити плагін vim-prettier. Робиться це дуже просто: додаємо його у vim-plug, перезавантажуємо vim і виконуємо :PlugInstall:
call plug#begin('~/.local/share/nvim/plugged')
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'vim-syntastic/syntastic'
Plug 'prettier/vim-prettier', { 'do': 'yarn install' } " Або npm install, на ваш смак
call plug#end()
Додаткових налаштувань тут не потрібно. Тепер додаємо .prettierrc-файл до нашого проєкту, він сам використовує рекомендовані правила prettier. Треба лише перевизначити ті правила, які нас не влаштовують.
Натискаємо Leader + p для форматування коду; у стандартних налаштуваннях leader key — \\.
Цієї невеликої конфігурації вистачить для наших сьогоднішніх цілей. Звичайно, для повноцінної розробки цих плагінів буде замало — бракує гарної теми, роботи з git та інших звичних для редактора функцій. Але це чудова можливість почати своє знайомство з Vim.
Ще немає коментарів