TheLazy.Dev
Portfolio GitHub

Blog

vscode |neovim |webdev |productivity

NeoVim como IDE

thespanishguy

Luis Enrique

Posted on May 24, 2020

NeoVim como IDE

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 que nada mais é do que um fork do vim. E ai, bora ver como configuramos ele ?

spongebob

Instalando o NeoVim

Linux 

sudo apt install neovim
Enter fullscreen mode Exit fullscreen mode

macOS 

brew install neovim
Enter fullscreen mode Exit fullscreen mode

Windows 

choco install neovim
Enter fullscreen mode Exit fullscreen mode

Configurando

Primeiramente precisamos instalar um plugin para poder instalar os demais plugins

what

Meio estranho eu sei, mas precisamos dele para poder gerenciar os demais plugins e bem, particularmente, eu uso o vim-plug e é o que iremos usar

curl -fLo ~/.config/nvim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
Enter fullscreen mode Exit fullscreen mode

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:

call plug#begin()
"Seção do plugin
call plug#end()
"Seção de configuração
Enter fullscreen mode Exit fullscreen mode

Tema

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

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ó:

Plug 'joshdick/onedark.vim'
Enter fullscreen mode Exit fullscreen mode

e ativar o tema da seguinte forma:

colorscheme onedark
Enter fullscreen mode Exit fullscreen mode

Confuso ? Deverá ficar da seguinte forma

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

solorscheme lucid
Enter fullscreen mode Exit fullscreen mode

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:

PlugInstall
Enter fullscreen mode Exit fullscreen mode

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

let mapleader="\<space>"
nnoremap <leader>sv :source ~/.config/nvim/init.vim<CR>
Enter fullscreen mode Exit fullscreen mode

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

Plug 'preservim/nerdtree'
Plug 'ryanoasis/vim-devicons'
Plug 'Xuyuanp/nerdtree-git-plugin'
Enter fullscreen mode Exit fullscreen mode

Agora algumas configurações básicas:

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"   : "?"
    \ }
Enter fullscreen mode Exit fullscreen mode

Pressionamos ctrl+b e teremos:

file_explorer_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

Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'junegunn/fzf.vim'
Enter fullscreen mode Exit fullscreen mode

Um atalho pra ele: ctrl+p

nnoremap <c-p> :Files<cr>
Enter fullscreen mode Exit fullscreen mode

O legal do fzf é que se você tiver o The Silver Search ele se integra automaticamente, com a configuração a baixo basta apenas combinarmos as teclas ctrl+f

nnoremap <c-f> :Ag<cr>
Enter fullscreen mode Exit fullscreen mode

Abaixo uma breve demostração de como ficou

fzf_Ag

Intellisense

Desde quando comecei a usar o vim/Neovim eu uso o ale mas um tempo depois conheci o coc.nvim, mas neste caso iremos usar os dois, então bora lá, e claro, faze-los trabalhar juntos

Plug 'dense-analysis/ale'
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Enter fullscreen mode Exit fullscreen mode

ale

"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 = '⚠'
Enter fullscreen mode Exit fullscreen mode

coc

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>"
Enter fullscreen mode Exit fullscreen mode

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

{
  "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
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

" 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
Enter fullscreen mode Exit fullscreen mode

Pronto ! Basta pressionarmos ctrl+j(vscode feelings)

terminal_integrado

Fim !

E ai curtiu ? Então passa lá no meu github e vê as demais configurações que tenho para o vim.

isso_e_tudo

💖 💪 🙅 🚩
thespanishguy
Luis Enrique

Posted on May 24, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

NeoVim como IDE
vscode NeoVim como IDE

May 24, 2020