NeoVim como IDE
Tags: vscode, neovim, webdev, productivity
Published: 2020-05-24 17:49:13

Acredito que muitos de vocês já tenham ouvido falar sobre o vim, eu particularmente sempre tive medo de usa-lo ou de nunca conseguir sair dele. Mas hoje, iremos falar do [NeoVim](https://github.com/neovim/neovim) que nada mais é do que um fork do vim. E ai, bora ver como configuramos ele ?

![spongebob](https://media.giphy.com/media/SKGo6OYe24EBG/giphy.gif)

---


## Instalando o NeoVim

### Linux

```sh
sudo apt install neovim
```

### macOS

```shell
brew install neovim
```

### Windows

```sh
choco install neovim
```
---


## Configurando

Primeiramente precisamos instalar um plugin para poder instalar os demais plugins

![what](https://media.giphy.com/media/3o7527pa7qs9kCG78A/giphy.gif)

Meio estranho eu sei, mas precisamos dele para poder gerenciar os demais plugins e bem, particularmente, eu uso o [vim-plug](https://github.com/junegunn/vim-plug) e é o que iremos usar

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

Agora precisamos criar nosso arquivo de configuração do vim, para Linux e macOs, o diretorio de configuração fica em `~/.config/nivm/init.vim`.

Adicionaremos o seguinte no arquivo:

```shell
call plug#begin()
"Seção do plugin
call plug#end()
"Seção de configuração
```
---


## Tema

Eu particularmente não uso um tema em especifico, vivo trocando de tema em tema mas se preferir irei deixar alguns

- [SpaceCamp](https://github.com/jaredgorski/SpaceCamp)
- [Lucid](https://github.com/cseelus/vim-colors-lucid)
- [Nord](https://github.com/arcticicestudio/nord-vim)
- [OneDark](https://github.com/joshdick/onedark.vim)

Ok mas como instalar ? Simples ! Lembra do código acima onde deixei marcado aseção de plugins ? Basta adicionar `Plug 'user_github/nome_repo'`
olha só:

```shell
Plug 'joshdick/onedark.vim'
```

e ativar o tema da seguinte forma:

```shell
colorscheme onedark
```

Confuso ? Deverá ficar da seguinte forma

```sh
call plug#begin()
PLug 'cseelus/vim-colors-lucid'
call plug#end()

solorscheme lucid
```

Agora basta salvar o arquivo e abri-lo novamente.

> Para que uma alteração seja visivel é preciso abrir e fechar o arquivo novamente

Uma vez configurado o tema, precisamos instala-lo, mas  como ? Como sabemos o Vim tem uma seção de comandos onde pressionamos `esc` e `:` e ele abre a seção de comandos, basta digitar:

```shell
PlugInstall
```

Legal mas é bem chato ficar slavando e saindo toda hora ne ?

Então saca só, vamos criar um atalho para isso mas antes precisamos definir um prefixo

```sh
let mapleader="\<space>"
nnoremap <leader>sv :source ~/.config/nvim/init.vim<CR>
```

Agora basta salvar, fechar e abrir novamente pela última vez e após salvar o arquivo, para obter as atualizações é só pressionar `space` + `sv` e pronto o arquivo será atualizado.

---



## Explorador de Arquivos

Claro, não é obrigatório ter um explorador de arquivos, mas é sempre bom poder um arquivo rápido

```sh
Plug 'preservim/nerdtree'
Plug 'ryanoasis/vim-devicons'
Plug 'Xuyuanp/nerdtree-git-plugin'
```

Agora algumas configurações básicas:

```sh
set encoding=UTF-8
"nerdtree
let NERDTreeShowHidden = 1
let NERDTreeMinimalUI = 1
let NERDTreeDirArrows = 1
let NERDTreeIgnore = []
let NERDTreeStatusline = ''

"nerdtree-git-plugin
let g:NERDTreeIndicatorMapCustom = {
    \ "Modified"  : "✹",
    \ "Staged"    : "✚",
    \ "Untracked" : "✭",
    \ "Renamed"   : "➜",
    \ "Unmerged"  : "═",
    \ "Deleted"   : "✖",
    \ "Dirty"     : "✗",
    \ "Clean"     : "✔︎",
    \ 'Ignored'   : '☒',
    \ "Unknown"   : "?"
    \ }
```

Pressionamos `ctrl+b` e teremos:

![file_explorer_gif](https://dev-to-uploads.s3.amazonaws.com/i/6ppx5a6g4j4t985t68dy.gif)

---

## Busca

Bom, não basta apenas ter um explorador de arquivos e um tema daora, sempre precisaremos procurar um arquivo e sair do terminal pra pocurar externamente não é o que queremos

```sh
Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'junegunn/fzf.vim'
```

Um atalho pra ele: `ctrl+p`

```sh
nnoremap <c-p> :Files<cr>
```

O legal do `fzf` é que se você tiver o [The Silver Search](https://github.com/ggreer/the_silver_searcher) ele se integra automaticamente, com a configuração a baixo basta apenas combinarmos as teclas `ctrl+f`

```sh
nnoremap <c-f> :Ag<cr>
```

Abaixo uma breve demostração de como ficou

![fzf_Ag](https://dev-to-uploads.s3.amazonaws.com/i/9998tn7mccrm5g2j4th4.gif)

---

## Intellisense

Desde quando comecei a usar o vim/Neovim eu uso o [ale](https://github.com/dense-analysis/ale) mas um tempo depois conheci o [coc.nvim](https://github.com/neoclide/coc.nvim), mas neste caso iremos usar os dois, então bora lá, e claro, faze-los trabalhar juntos

```sh
Plug 'dense-analysis/ale'
Plug 'neoclide/coc.nvim', {'branch': 'release'}
```

ale

```sh
"ale
let b:ale_fixers = ['prettier', 'eslint']
let g:ale_echo_msg_error_str = 'E'
let g:ale_echo_msg_warning_str = 'W'
let g:ale_echo_msg_format = '[%linter%] %s [%severity%]'
let g:ale_sign_error = '✘'
let g:ale_sign_warning = '⚠'
```

coc

```sh
let g:coc_global_extensions = [
	\  'coc-snippets',
	\  'coc-emmet',
	\  'coc-html',
	\  'coc-css',
	\  'coc-json', 
	\  'coc-phpls',
	\  'coc-yaml',
	\  'coc-prettier',
	\  'coc-eslint',
	\  'coc-jedi',
	\  'coc-python',
	\	]

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 <SID>show_documentation()<CR>

autocmd CursorHold * silent call CocActionAsync('highlight')
inoremap <expr><S-TAB> pumvisible() ? "\<C-p>" : "\<C-h>"

function! s:check_back_space() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~# '\s'
endfunction

" Use <c-space> to trigger completion.
inoremap <silent><expr> <c-space> coc#refresh()
" Use <cr> to confirm completion, `<C-g>u` means break undo chain at current position.

" Coc only does snippet and additional edit on confirm.
inoremap <expr> <cr> pumvisible() ? "\<C-y>" : "\<C-g>u\<CR>"
```

Pronto ! Temos eles configurados, mas ainda falta fazer os dois trabalharem juntos, para isso basta acessar as configurações do coc com `:CocConfig ` e colocar o seguinte

```sh
{
  "suggest.noselect": false,
  "coc.preferences.formatOnSaveFiletypes": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "css",
    "json",
    "yaml"
  ],
  "diagnostic.displayByAle": true,
  "coc.preferences.colorSupport": true,
  "prettier.eslintIntegration": true,
  "prettier.tabWidth": 2
}
```

Bom, aqui configuramos algumas outras coisas além da integração do coc com o ale, agora toda vez que salvar o arquivo, ele irá formata-lo, definimos o tamanhos de espaçamento do tab, etc

![lint](https://dev-to-uploads.s3.amazonaws.com/i/oz6ju25yp2xjqcmx4ty8.gif)

---


## Go-to Definition

Como toda IDE, precisamos ir para a definição de 'X' método, variável e por ai vai. Como já temos o coc configurado, basta apenas pressionar `gd`(go to definition) e `ctrl+o` para retornar

![gotodefinition](https://dev-to-uploads.s3.amazonaws.com/i/vdqw3tqn975a8k7h8ky6.gif)

---


## Terminal Integrado

E claro, não poderia faltar, sempre precisamos executar algum comando então aqui irei deixar uma configuração para podermos executar o terminal dentro do NeoVim

```sh
" Mude para o modo normal com o esc
tnoremap <Esc> <C-\><C-j>
" start terminal in insert mode
au BufEnter * if &buftype == 'terminal' | :startinsert | endif
function! OpenTerminal()
  split term://zsh
  resize 10
endfunction
nnoremap <c-j> :call OpenTerminal()<CR>

" use alt+hjkl para mover entre split/vsplit paineis
tnoremap <A-h> <C-\><C-n><C-w>h
tnoremap <A-j> <C-\><C-n><C-w>j
tnoremap <A-k> <C-\><C-n><C-w>k
tnoremap <A-l> <C-\><C-n><C-w>l
nnoremap <A-h> <C-w>h
nnoremap <A-j> <C-w>j
nnoremap <A-k> <C-w>k
nnoremap <A-l> <C-w>l
```

Pronto ! Basta pressionarmos `ctrl+j`(vscode feelings)

![terminal_integrado](https://dev-to-uploads.s3.amazonaws.com/i/t62fqzf7ho2y5pw0yt8q.gif)

---


## Fim  !

E ai curtiu ?  Então passa lá no meu [github](https://github.com/the-spanish-guy/dotfiles/tree/master/nvim) e vê as demais configurações que tenho para o vim.

![isso_e_tudo](https://media.giphy.com/media/9D7Jr7o9TjKta/giphy.gif)