Настройка NeoVim для разработки PHP и NodeJS

Привет всем! 👋

Прошло много времени с моего последнего сообщения, и сегодня я хочу показать вам, как я ускорил свою разработку в последние недели.

До недавнего времени я был большим поклонником Visual Studio Code, и он был моим основным редактором в течение последних лет. Со временем я изучал все больше и больше привязок клавиш, начал по-настоящему использовать палитру команд и начал не все делать с помощью мыши — и знаете что, это было намного быстрее, чем делать все с помощью мыши.

Сейчас я по-прежнему люблю VS Code, могу его рекомендовать и использую, например, в браузере на GitHub. Но с тех пор, как я попробовал Vim, я использую его в качестве основного редактора.

Обратите внимание, я далеко не эксперт по (Neo)Vim и все еще изучаю его. В этой статье я хочу поделиться своей историей о том, как я пришел в (Neo)Vim и как выглядит моя установка.

Почему Vim?

Когда я впервые услышал о Vim, я подумал: «Зачем вообще использовать Vim, когда есть VS Code и все остальные современные IDE?». Единственное, что я знал о Vim в то время, это как выйти из Vim. Но после более глубокого изучения Vim и отличного совета от коллеги я решил хотя бы попробовать его в течение некоторого времени.

Вот основные причины:

  • 🚀 Скорость. Я был действительно впечатлен тем, насколько быстро вы можете работать с Vim — даже когда вы все еще изучаете его.
  • 🌐 Я могу использовать его на сервере. Это потрясающе, потому что я всегда использовал FTP-клиент, когда мне нужно было редактировать файлы на сервере. Теперь я могу работать с файлами на сервере так же, как и с файлами на своем компьютере — прямо из терминала.
  • ⌨️ До этого я не знал ни одного текстового редактора на базе терминала.

Как я освоил Vim

Быстрый ответ: Учусь на практике 🙂

Я начал использовать только Vim в течение нескольких дней, что заставило меня выучить команды Vim и привязки клавиш. Никакого VS Code или любого другого текстового редактора — только Vim. Вначале я был очень медленным и постоянно искал, как сделать базовые вещи.

Но с каждым днем я становился быстрее, изучал новые команды и улучшал свой рабочий процесс. И до сих пор я не возвращался к VS Code.

Вот мой конфиг для Vim:

set encoding=UTF-8
" Set encoding

set number
" Show line numbers by default

syntax on
" Enable syntax highlighting by default

filetype plugin indent on
" show existing tab with 4 spaces width
set tabstop=4
" when indenting with '>', use 4 spaces width
set shiftwidth=4
" On pressing tab, insert 4 spaces
set expandtab

" Tab / Shift Tab to switch between tabs (:tabe <file>)
nnoremap <Tab> :tabnext<CR>
nnoremap <S-Tab> :tabprevious<CR>
Войти в полноэкранный режим Выход из полноэкранного режима

NeoVim

После использования Vim в течение нескольких недель, я перешел на NeoVim. Мне очень нравится Vim, но есть некоторые возможности VS Code, которые я хотел бы иметь в Vim. Вот почему я решил использовать NeoVim.

Вот как я хочу, чтобы выглядела моя установка NeoVim:

  • Не слишком отличаться от моей обычной установки Vim, чтобы я мог работать с редактором Vim по умолчанию, если не могу использовать NeoVim (например, на серверах).
  • Основной сценарий использования:
    • PHP (+ WordPress)
    • React / NextJS
    • Svelte / SvelteKit

Видите, довольно простая настройка. Теперь давайте действительно установим его:

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

1. Установите NeoVim

Следуйте инструкциям на странице установки NeoVim или используйте следующую команду:

macOS (с помощью brew): brew install neovim.

Windows (с winget): winget install NeoVim.NeoVim.

2. Установите VimPlug

Для управления плагинами / расширениями я решил использовать VimPlug в качестве менеджера плагинов. Прочитайте руководство по установке здесь или используйте следующую команду:

macOS / Linux:

sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs 
       https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'
Войти в полноэкранный режим Выйти из полноэкранного режима

Windows (PowerShell):

iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |`
    ni "$(@($env:XDG_DATA_HOME, $env:LOCALAPPDATA)[$null -eq $env:XDG_DATA_HOME])/nvim-data/site/autoload/plug.vim" -Force
Войти в полноэкранный режим Выйти из полноэкранного режима

3. Конфигурация NeoVim

Создайте файл конфигурации NeoVim ~/.config/nvim/init.vim и вставьте в него следующее:

set encoding=UTF-8
set number
syntax on

" set tab to 4 spaces
filetype plugin indent on
set tabstop=4
set shiftwidth=4
set expandtab

" Tab / Shift Tab to navigate between tabs
nnoremap <Tab> :tabnext<CR>
nnoremap <S-Tab> :tabprevious<CR>

" CoC settings
set nobackup
set nowritebackup
set cmdheight=2
set updatetime=300
set shortmess+=c
if has("nvim-0.5.0") || has("patch-8.1.1564")
  set signcolumn=number
else
  set signcolumn=yes
endif
inoremap <silent><expr> <TAB>
       pumvisible() ? "<C-n>" :
       CheckBackspace() ? "<TAB>" :
       coc#refresh()
inoremap <expr><S-TAB> pumvisible() ? "<C-p>" : "<C-h>"
function! CheckBackspace() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~# 's'
endfunction
if has('nvim')
  inoremap <silent><expr> <c-space> coc#refresh()
else
  inoremap <silent><expr> <c-@> coc#refresh()
endif
inoremap <silent><expr> <cr> pumvisible() ? coc#_select_confirm()
                              : "<C-g>u<CR><c-r>=coc#on_enter()<CR>"
nmap <silent> [g <Plug>(coc-diagnostic-prev)
nmap <silent> ]g <Plug>(coc-diagnostic-next)
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)
nnoremap <silent> K :call ShowDocumentation()<CR>
function! ShowDocumentation()
  if CocAction('hasProvider', 'hover')
    call CocActionAsync('doHover')
  else
    call feedkeys('K', 'in')
  endif
endfunction
autocmd CursorHold * silent call CocActionAsync('highlight')

" VimPlug plugin manager
call plug#begin()
Plug 'https://github.com/vim-airline/vim-airline'
Plug 'https://github.com/tpope/vim-commentary'
Plug 'https://github.com/ap/vim-css-color'
Plug 'https://github.com/rafi/awesome-vim-colorschemes'
Plug 'https://github.com/neoclide/coc.nvim'
Plug 'othree/html5.vim'
Plug 'pangloss/vim-javascript'
Plug 'evanleck/vim-svelte', {'branch': 'main'}
call plug#end()

" set the colorsheme
" list: https://github.com/rafi/awesome-vim-colorschemes
colorscheme minimalist
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Далее находится большой блок настроек для расширения CoC. Я не могу объяснить, что все это делает, я взял это из руководства по установке и настройке CoC. В основном, он включает окно автозавершения и создает некоторые горячие клавиши, такие как K для отображения документации.

Ниже этого, вы можете найти раздел VimPlug. Здесь представлены все зарегистрированные плагины:

  • vim-airline: статус/таблица, показывающая такие вещи, как текущая ветка git и режим vim.
  • vim-commentary: Комментирование, gcc для комментирования строк.
  • vim-css-color: Выделение имен цветов
  • awesome-vim-colorschemes: Большая коллекция цветовых схем, я использую minimalist (устанавливается с помощью colorscheme <name>)
  • coc.nvim: Поддержка языкового сервера, завершение …
  • html5.vim: Синтаксис и отступы для HTML5 и SVG (требуется для vim-svelte).
  • vim-javascript: Синтаксис и отступы для JavaScript (требуется для vim-svelte)
  • vim-svelte: Синтаксис и отступы для Svelte

4. Установите плагины

Поскольку мы изменили конфигурацию NeoVim, сначала перезапустите NeoVim. Могут возникнуть некоторые ошибки, потому что плагины еще не установлены. Используйте VimPlug для установки плагинов, указанных в конфигурационном файле:

:PlugInstall
Вход в полноэкранный режим Выйти из полноэкранного режима

5. Установка расширения CoC

После установки плагинов закройте NeoVim и перейдите в папку расширения CoC:

macOS / Linux: ~/.local/share/nvim/plugged/coc.nvim/.

Windows: ~/vimfiles/plugged/coc.nvim/

Теперь установите зависимости и соберите исходный код:

npm ci && npm run build
Войдите в полноэкранный режим Выйдите из полноэкранного режима

6. Расширения для расширения CoC

Теперь вы можете снова запустить NeoVim, и никаких ошибок быть не должно. Чтобы завершить настройку, давайте установим некоторые расширения для CoC, например, сервер языков JS/TS и intelephense для PHP:

:CocInstall coc-tsserver coc-json coc-svelte @yaegassy/coc-intelephense
Войдите в полноэкранный режим Выйдите из полноэкранного режима

7. Дополнительно: WordPress

Я работаю с темами и плагинами WordPress, но при текущей настройке каждая функция WordPress помечается как ошибка, потому что расширение intelephense не знает, что я нахожусь внутри темы WordPress со всеми доступными функциями WordPress. Мы можем изменить это, открыв конфигурацию CoC (:CocConfig) и добавив «wordpress» в список intelephense.stubs. Если вы наберете «intelephense.stubs», вы можете использовать автозаполнение CoC для создания всего списка, а затем только добавить «wordpress» в конец списка.

Полный список:

{
    "intelephense.stubs": [
        "apache",
        "bcmath",
        "bz2",
        "calendar",
        "com_dotnet",
        "Core",
        "ctype",
        "curl",
        "date",
        "dba",
        "dom",
        "enchant",
        "exif",
        "FFI",
        "fileinfo",
        "filter",
        "fpm",
        "ftp",
        "gd",
        "gettext",
        "gmp",
        "hash",
        "iconv",
        "imap",
        "intl",
        "json",
        "ldap",
        "libxml",
        "mbstring",
        "meta",
        "mysqli",
        "oci8",
        "odbc",
        "openssl",
        "pcntl",
        "pcre",
        "PDO",
        "pdo_ibm",
        "pdo_mysql",
        "pdo_pgsql",
        "pdo_sqlite",
        "pgsql",
        "Phar",
        "posix",
        "pspell",
        "readline",
        "Reflection",
        "session",
        "shmop",
        "SimpleXML",
        "snmp",
        "soap",
        "sockets",
        "sodium",
        "SPL",
        "sqlite3",
        "standard",
        "superglobals",
        "sysvmsg",
        "sysvsem",
        "sysvshm",
        "tidy",
        "tokenizer",
        "xml",
        "xmlreader",
        "xmlrpc",
        "xmlwriter",
        "xsl",
        "Zend OPcache",
        "zip",
        "zlib",
        "wordpress"
    ]
}
Войдите в полноэкранный режим Выход из полноэкранного режима

И это моя текущая настройка NeoVim. Возможно, это поможет некоторым из вас, кто хочет начать работу с NeoVim.

Какой ваш любимый редактор или IDE? Вы тоже используете Vim / NeoVim? Дайте мне знать в комментариях!

Спасибо, что прочитали, счастливого кодинга и хорошего дня! 😊🚀

Оцените статью
devanswers.ru
Добавить комментарий