Libre Designers

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:

• Arquivo no gitlab

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).

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 <c-n> :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

Essa estrutura de arquivos foi baseada no WebVim:

• https://github.com/vim-dist/webvim

Recursos

• Arquivos Finais no gitlab

Imagem do Card

• Close up photo of codes - Markus Spiske