Na parte 1 de Vim para Web Designers, começamos a customizar o Vim para tarefas de desenvolvimento web, na parte 2, ao invés de usar um grande arquivo de configuração .vimrc vamos separar em arquivos menores o que facilitará nossa customização do Vim. Também iremos instalar outros plugins que iremos precisar futuramente.

Se você não viu a parte 1 do Vim para Web Designers, sugiro que você comece por lá.

Este artigo começa a partir do arquivo final da parte 1:

Além disso, já estarei considerando que os plugins e tema da parte 1 estão instalados.

Estrutura do artigo

Separei este artigo em 4 partes

  1. Criando subpastas dentro de ~/.vim
  2. Separando nosso arquivo .vimrc em arquivos menores
  3. Inserindo novos plugins
  4. Customizações extras

Criando subpastas dentro de ~/.vim

Atualmente, temos na nossa pasta de usuário ( ~/ ):


-- .vimrc
-- .vim
     |
     -- bundle
     -- colors

Iremos criar a seguinte estrutura, a partir da pasta do usuário:


-- .vimrc
-- .vim
     |
     -- bundle
     -- colors
     -- config
           |
           -- mappings.vim
           -- plugins.vim
           -- settings.vim

Crie uma pasta config dentro da pasta oculta ~/.vim, com os arquivos mappings.vim, plugins.vim e settings.vim, inicialmente vazios (ver figura a seguir).

estrutura.png

Separando nosso arquivo .vimrc em arquivos menores

Podemos separar o arquivo inicial .vimrc em 4 partes. São elas:

Parte 1 (Vundle):


" -----------------------------------------------------------
" [ Vundle ]

set nocompatible              " be iMproved, necessário

.
.
.

" -----------------------------------------------------------

Parte 2 (Mappings):


" -----------------------------------------------------------
" [Mapeamento]

" leader 
let g:mapleader = "," 

.
.
.    

" -----------------------------------------------------------

Parte 3 (Settings):



" -----------------------------------------------------------
" [Setting]

if ! has("gui_running") " se estiver rodando gvim 
    set t_Co=256        " habilita 256 cores antes
endif                   " de definir o esquema de cores 

.
.
.


Parte 4 (Plugins):


" [Plugins]

" (nerdtree)

let g:NERDTreeChDirMode=2
nnoremap <leader>n :NERDTreeToggle <CR>

" (goyo)

nnoremap <leader>g :Goyo <CR>

Agora que temos os blocos de código bem delimitados. Vamos colocar cada bloco no seu devido arquivo como segue:

  • Parte 1 (Vundle) continua no arquivo ~/.vimrc
  • Parte 2 (Mappings) vai para ~/.vim/config/mappings.vim
  • Parte 3 (Settings) vai para ~/.vim/config/settings.vim
  • Parte 4 (Plugins) vai para ~/.vim/config/plugins.vim

Uma breve explicação da lógica dessa separação:

  • Em mappings ficarão todos os mapeamentos do teclado que eu desejo customizar no meu Vim.
  • Em settings ficarão todas as customizações do Vim que não necessitam de interação com o teclado. Colocou uma vez e já passa a funcionar.
  • Em plugins ficarão todas as customizações de plugins instalados através do Vundle.

Para que o .vimrc encontre estes novos arquivos precisamos informá-lo para procurar na subpasta ~/.vim/config/ os arquivos que estamos trabalhando. Adicione ao final do arquivo .vimrc:


" pega referência da pasta ~/.vim

let g:vimDir = $HOME.'/.vim' "

" pega referência dos arquivos:
" - settings.vim
" - mappings.vim
" - plugins.vim

let s:configSetting = g:vimDir.'/config/settings.vim'
let s:configMapping = g:vimDir.'/config/mappings.vim'
let s:configPlugins = g:vimDir.'/config/plugins.vim'

" Carrega as configurações no vim de settings, mappings e plugins

exec ":source ".s:configSetting
exec ":source ".s:configMapping
exec ":source ".s:configPlugins


Para finalizar, abra o arquivo ~/.vim/config/mappings.vim . No início desse arquivo devemos ter:


" -----------------------------------------------------------
" [Mapeamento]

" leader 
let g:mapleader = "," 

" Abre MYVIMRC em um split
nnoremap <leader>ev :split $MYVIMRC<cr>

" Source MYVIMRC
nnoremap <leader>sv :source $MYVIMRC<cr>


Precisamos inserir os mapeamentos de abrir os arquivos settings.vim, mappings.vim e plugins.vim através de atalhos. Isso irá ajudar a configurarmos o Vim com mais facilidade. Atualmente, temos os atalhos:

  • ,ev para a abrir o arquivo .vimrc
  • ,sv para a ler o arquivo .vimrc

Precisamos de mais 3:

  • ,evs para abrir o arquivos settings.vim
  • ,evm para abrir o arquivos mappings.vim
  • ,evp para abrir o arquivos plugins.vim

Uma forma simples de lembrar:

  • ,evs : significa edit vimfile settings
  • ,sv : significa source vimfile

O início do arquivo mappings.vim fica:


" -----------------------------------------------------------
" [Mapeamento]

" leader 
let g:mapleader = "," 

" Abre MYVIMRC em um split
nnoremap <leader>ev :split $MYVIMRC<cr>
" Abre settings.vim em um split
nnoremap <leader>evs :split ~/.vim/config/settings.vim<cr>
" Abre mappings.vim em um split
nnoremap <leader>evm :split ~/.vim/config/mappings.vim<cr>
" Abre plugins.vim em um split
nnoremap <leader>evp :split ~/.vim/config/plugins.vim<cr>

" Source MYVIMRC
nnoremap <leader>sv :source $MYVIMRC<cr>


Ative as novas configurações com o comando ,sv .

Inserindo novos plugins

Vamos adicionar alguns plugins extras no ~/.vimrc que nos ajudarão daqui pra frente.


" Plugins - parte 2
Plugin 'scrooloose/nerdcommenter'
Plugin 'bronson/vim-trailing-whitespace'
Plugin 'terryma/vim-multiple-cursors'
Plugin 'tpope/vim-surround'
Plugin 'elzr/vim-json'
Plugin 'mattn/emmet-vim'
Plugin 'SirVer/ultisnips'
Plugin 'algotech/ultisnips-php'
Plugin 'algotech/ultisnips-javascript'
Plugin 'iloginow/vim-stylus'

  • Nerd Commenter: Disponibiliza atalhos para ativarmos comentários em diversos tipos de arquivos
  • Vim trailing whitespace: destaque em vermelho de espaços em brancos desnecessários
  • Vim multiple cursors: Seleção múltipla ao estilo do editor Sublime Text
  • Vim surround: citação / parênteses simplificado
  • Vim-json: formata arquivos json de forma otimizada
  • Emmet-vim: Emmet para vim
  • Ultisnips: Solução de snippets para o Vim
  • Ultisnips-php: Pacote de snippets PHP
  • Ultisnips-javascript: Pacote de snippets JavaScript
  • Vim-stylus: Destaque da sintaxe, identação e autocompletar para Stylus.

Veja a animação a seguir:

Customizações extras

Opicionalmente, em settings.vim , vamos atualizar alguns valores já definidos na parte 1 do tutorial:


.
.
.

" font e tamanho
set guifont=IBM\ Plex\ Mono\ Medium\ 10

.
.
.

set linespace=11 " espaçamento entre as linhas

.
.
.

" remover linha abaixo

set nonu rnu "número relativo de linha

Em plugins.vim, vamos adicionar algumas configurações:



" ( NERDTree )
" ao entrar no vim abre o nerd tree

function! OpenNerdTree()
    let s:exclude = ['COMMIT_EDITMSG', 'MERGE_MSG']
    if index(s:exclude, expand('%:t')) < 0
        NERDTreeFind
        exec "normal! \<c-w>\<c-w>"
    endif
endfunction
autocmd VimEnter * call OpenNerdTree()

" redimensiona janela do nerd tree
let g:NERDTreeWinSize = 35

" mostra arquivos ocultos
let g:NERDTreeShowHidden=1

" ignora arquivos .swp
let g:NERDTreeIgnore=['\.swp$', '\~$']
nnoremap  :NERDTreeToggle<cr>

" ajuda ao sair quando  não existem buffers abertos além do NerdTree
function! CheckLeftBuffers()
  if tabpagenr('$') == 1
    let i = 1
    while i <= winnr('$')
      if getbufvar(winbufnr(i), '&buftype') == 'help' ||
          \ getbufvar(winbufnr(i), '&buftype') == 'quickfix' ||
          \ exists('t:NERDTreeBufName') &&
          \   bufname(winbufnr(i)) == t:NERDTreeBufName ||
          \ bufname(winbufnr(i)) == '__Tag_List__'
        let i += 1
      else
        break
      endif
    endwhile
    if i == winnr('$') + 1
      qall
    endif
    unlet i
  endif
endfunction
autocmd BufEnter * call CheckLeftBuffers()

" ( multiple cursor ]
let g:multi_cursor_use_default_mapping=0
let g:multi_cursor_next_key='<C-m>'
let g:multi_cursor_prev_key='<C-p>'
let g:multi_cursor_skip_key='<C-x>'
let g:multi_cursor_quit_key='<esc>'

" (Nerd commenter)
noremap <c-_> :call NERDComment(0, "Toggle")<cr>

" (Ctrl+p)
nnoremap <C-M-p> :CtrlPBuffer <CR>


Em mappings.vim, insira:


"Deixa apenas o buffer atual
nnoremap <leader>o :only <CR>

" Auto-completar remapeado para ctrl + space
inoremap <C-Space> <C-n>

Modo avançado


" Modo avançado

" Sair de modo de inserção (como <esc>) e desabilite <esc>
inoremap jk <esc>
" inoremap <special> <esc> <nop>
inoremap <esc>^[ <esc>^[

" Desabilite teclas de setas

nnoremap <up> <nop>
nnoremap <down> <nop>
nnoremap <left> <nop>
nnoremap <right> <nop>

inoremap <up> <nop>
inoremap <down> <nop>
inoremap <left> <nop>
inoremap <right> <nop>

Finalizando

Com estas configurações já temos uma boa base para começar a usar o Vim para desenvolvimento Web. Qualquer alteração está bem segmentada nos arquivos mappings, settings e plugins que podem ser acessadas rapidamente com ,evm, ,evs, ,evp, respectivamente, e podem ser carregadas no vim com ,sv. Podemos inserir, remover e customizar plugins também de forma rápida.

Uma pergunta frequente no aprendizado deste editor de textos é se vale a pena todo esse trabalho para simples edição de sites. O que te apresentei até agora foi uma forma de organizar o Vim que melhor funcionou para mim e consigo ser produtivo com ela. Caso você não se adapte a ela, você pode modificar essa estrutura de acordo com suas necessidades (obviamente com um pouco de esforço).

Nos próximos artigos, finalmente poderemos entrar em temas relacionados a desenvolvimento web e começarei explorando HTML5 e semântica. Qualquer observação é só colocar embaixo nos comentários. Espero que você tenha tirado algum proveito da leitura até aqui e nos vemos em breve.

Você pode ver os arquivos finais ~/.vim e ~/.vimrc desse artigo no gitlab clicando aqui.

Referências

Imagens do Card e banner:

  • Markus Spiske - Code

Essa estrutura de arquivos foi baseada no WebVim:

Recursos

Este artigo foi escrito por Las em 16 mar 2020.

Las acredita que o compartilhamento do conhecimento e da informação é uma forma de tornar o mundo melhor.
Para curtir o artigo ou postar uma mensagem é necessário logar ou criar uma conta, caso não tenha uma.

Cadastrar

Outros artigos