Базова конфігурація Vim для фронтенд-розробки

3 хв. читання

Розглянемо деякі популярні плагіни для фронтенд-розробки, які можна використати у 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-розширення для основних інструментів:

Цього буде достатньо, але за бажанням можна встановити розширення для 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.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 5.7K
Приєднався: 8 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація