Libre Designers - Vim para Web Designers (Parte 1)

Vim

Vim é um editor de textos altamente customizável para criação e alteração de qualquer tipo de texto. O seu ponto forte está na adaptabilidade em relação às necessidades do usuário. O nome Vim vem do termo VI iMproved, que é o VI melhorado, um editor mais tradicional nos sistemas UNIX.

Estrutura do artigo

O objetivo deste artigo é ajudar você a dar os primeiros passos no Vim e deixar o Vim com uma boa configuração para começarmos a desenvolver nossos sites.

Separei este artigo em 7 partes

Instalando o GVim
Inserindo texto e Movimentação básica
Editando arquivo de configuração
Vundle
Plugins
Configurações adicionais
Demonstração rápida usando o Vim

Instalando o GVim

Neste artigo, estarei usando o GVim, que é o Vim com interface gráfica. Para instalar o GVim basta buscá-lo e instalá-lo através do gerenciador de software de sua distribuição GNU/Linux.

Inserindo texto e Movimentação básica

O Vim agrupa seus diferentes comandos em modos. Significa que um comando pode se comportar diferente dependendo do modo em que o Vim esteja. No começo é bem difícil se acostumar com os diferentes modos, mas com a prática entende-se que isso acaba ajudando.

Assim que você abre o Vim, você estará no modo normal e para entrar no modo de inserção pressione a tecla i (de insert). Neste modo você pode inserir texto normalmente. Pressione esc para voltar para o modo normal.

O cursor pode ser movimentado no modo normal com as teclas:

k↑

←h l→

↓j

(Ver animação a seguir).

Arquivo de configuração

Vamos inicialmente customizar as cores e a fonte do nosso Vim. Toda configuração do nosso vim se dá por meio do arquivo .vimrc na sua pasta de usuário.

Uma fonte que acho boa para programar é a IBM Plex Mono. Você pode baixar ela clicando aqui. Instale ela no seu GNU/Linux. Caso não saiba como fazer, leia o meu artigo Instalando fontes tipográficas manualmente no GNU/Linux .

Agora crie uma pasta chamada .vim na sua pasta de usuário e crie uma subpasta chamada colors. Insira o arquivo monokai-phoenix.vim nessa pasta. Baixe este arquivo compactado clicando aqui. Extraia na subpasta colors da pasta .vim (ver imagem a seguir).

Com o vim aberto e no modo normal, pressione : para entrar no modo de comando e digite edit ~/.vimrc . Com este comando o vim cria um buffer para o arquivo .vimrc. Dessa forma, quando salvarmos o buffer estaremos salvando um novo arquivo chamado .vimrc na pasta do usuário.

Precisamos informar ao vim para usar o esquema de cores monokai-phoenix e usar a fonte IBM Plex Mono no tamanho 11. Para tanto, insira o código abaixo em seu arquivo .vimrc e logo após salve e reinicie seu vim. Para salvar o arquivo atual, no modo normal execute o comando :w. Para sair do Vim, no modo normal, execute o comando :q. Para sair salvando, execute o comando :wq.

" esquema de cores
colorscheme monokai-phoenix

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

O caractere " na frente indica que a linha é um comentário e não será interpretado pelo vim, apenas servindo para descrever o comando na linha seguinte.

Ao abrir seu vim você deverá vê-lo com um tema escuro. Entre no modo de comando com a tecla : e digite edit ~/.vimrc novamente (veja imagem a seguir).

O próximo passo no nosso arquivo de configuração é fazer com que possamos atualizar as configurações do nosso vim sem fechar e abri-lo novamente. Insira o código abaixo no seu arquvio .vimrc .

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

" leader 
let g:mapleader = "," 

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

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

O código let g:mapleader = "," remapeia a tecla leader para ",". A tecla leader nos ajuda a ter uma tecla especial para mapearmos nossos comandos.

Nas linhas seguintes, temos o comando nnoremap <leader>ev :split $MYVIMRC<cr>. Este comando mapeia no modo normal de forma não-recursiva (apenas uma vez) o atalho ,ev quebrando a janela na horizontal (comando :split) e colocando nessa janela o arquivo referente ao .vimrc.

Na próxima linha, temos o comando nnoremap <leader>sv :source $MYVIMRC<cr>. A diferença para o comando anterior é o comando :source que lê e carrega o comando ~/.vimrc ao pressionar as teclas ,sv .

Feche e abra o vim novamente.

Vundle

Vundle é um gerenciador de plugins para o Vim.

Para instalar o vundle será necessário você ter o git instalado. Para instalar o git use novamente o gerenciador de softwares de sua distribuição GNU/Linux. Com o git instalado, rode o comando a seguir no seu terminal:

git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

Este comando clona o repositório do Vundle na sua pasta de usuário ~/.vim/bundle/ .

No seu arquivo .vimrc adicione o seguinte código:

" [ Vundle ]

set nocompatible " be iMproved, necessário
filetype off " necessário

" define caminho do runtime para incluir Vundle e inicializá-lo

set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

" deixe Vundle gerenciar Vundle, necessário
 Plugin 'VundleVim/Vundle.vim'

call vundle#end()
filetype plugin indent on

As linhas anteriores configuram o Vundle para ser usado pelo Vim.

Seu arquivo .vimrc deve estar com uma aparência semelhante a essa:

Com o arquivo .vimrc salvo, execute as teclas de atalho em sequência ,sv para fazer com o que o arquivo de configuração seja lido pelo vim. Depois, no modo normal execute o comando :PluginInstall. Com este comando, você instala o plugin Vundle.

Plugins

Neste artigo, iremos instalar 5 plugins além do Vundle. São eles:

O NerdTree possibilita navegarmos através de uma árvore de diretórios e arquivos dentro do vim (ver imagem a seguir).

O ctrlp usa uma busca por arquivos mais rápida através da tecla de atalho ctrl + p (ver imagem a seguir).

O lightline deixa sua barra de status do vim com uma aparência mais limpa (ver imagem a seguir).

O goyo é um plugin que torna a tarefa de editar texto mais agradável colocando um espaçamento extra nas laterais do buffer.

O vim-css-color faz com que notação hexadecimal e de cores ganhem destaque no fundo com a cor relacionada ao código.

Para instalar esses plugins insira as linhas a seguir entre os marcadores do ambiente do vundle

call vundle#begin

...

call vundle#end()

...
call vundle#begin()

" deixe Vundle gerenciar Vundle, necessário
Plugin 'VundleVim/Vundle.vim'

" Plugins
Plugin 'scrooloose/nerdtree'
Plugin 'ctrlpvim/ctrlp.vim'
Plugin 'itchyny/lightline.vim'
Plugin 'junegunn/goyo.vim'
Plugin 'ap/vim-css-color'

call vundle#end()
...

No modo de comando, entre com o comando PluginInstall (ver animação a seguir).

Vamos customizar alguns comandos para o plugin nerd tree e para o plugin goyo.

" [Plugins]

" (nerdtree)

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

" (goyo)

nnoremap <leader>g :Goyo <CR></code><code class="language-html">

Os comandos anteriores mapeiam para o NerdTree a tecla de atalho ,n abrindo e fechando o NerdTree e ,g ativando e desativando o Goyo.

Configurações adicionais

Vamos melhorar a configuração do nosso Vim com uma série de comandos adicionais. Como é uma lista muito extensa comentei diretamente no código através dos comentários:

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

" leader
let g:mapleader = ","

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

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

" muda comportamento da tecla o e O
" adiciona uma linha abaixo
nnoremap o o<Esc>

" adiciona uma linha acima
nnoremap O O<Esc>

" alterna buffers mais recentes com ctrl+tab
nnoremap <C-Tab> :b# <CR>

" troca de abas com shift + seta esquerda e shift + seta direita

" navega pra aba a direita
nnoremap <S-right> :tabn<CR>

" navega pra aba a esquerda
nnoremap <S-left> :tabp<CR>

" remove marcação da ultima busca com ctrl + l
nnoremap <C-l> :nohlsearch<CR><C-l>

" Envelopa uma palavra em aspas duplas com ," no modo normal
nnoremap <leader>" viw<esc>a"<esc>hbi"<esc>lel

" Envelopa uma palavra em aspas simples com ,' no modo normal
nnoremap <leader>' viw<esc>a'<esc>hbi'<esc>lel

" Seleciona dentro dos parênteses
onoremap in( :<c-u>normal! f(vi(<cr>

" Selecina dentro dos chaves
onoremap in{ :<c-u>normal! f{vi{<cr>

" Seleciona dentro das colchetes
onoremap in[ :<c-u>normal! f[vi[<cr>

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

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

" esquema de cores
colorscheme monokai-phoenix

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

" quebra final de linha
set wrap

" mostra número na linha
set number

" realça sintaxe
syntax on

" identação
set smartindent " adiciona um nível extra de identação dependendo do contexto
set autoindent " copia a identação da linha anterior
set copyindent " preserva identacão
set shiftwidth=4 " identação possui 4 espaços
set shiftround " habilita identacao com as teclas << e >> no modo normal
set backspace=indent,eol,start " backspace passa a funcionar como outros programas
set smarttab " usa shiftwidth ao invés da pausa do tab
set expandtab " Troca 4 espaços por tab

" busca
set showmatch " marca visual no resultado da busca no texto
set hlsearch " destaca todas as resultados da busca
set incsearch " destaca o texto ao realizar a busca

" copy/paste
set paste " cola texto com mesma formatação que foi copiado
set clipboard=unnamedplus " usa clipboard do sistema

" alinhamento manual
set foldmethod=manual

" mouse
set mouse=a "mouse ativo em todos os modos do vim

set guioptions-=m  "remove barra de menu
set guioptions-=T  "remove barra de ferramentas
set guioptions-=L  "remove barra de rolagem

set wildmenu       "completar na linha de comando

set linespace=2 " espaçamento entre as linhas

set history=1000 " quantidade de comandos histórico
set showcmd " mostra comandos na barra de status ao ser digitado
set noswapfile " desativa swap file
set nonu rnu "número relativo de linha

set enc=utf-8 "codificação utf-8
set fileencoding=utf-8 "codificação do arquivo utf-8

set hidden "esconde buffers ao invés de fechá-los

Você pode ver o arquivo final .vimrc desse artigo no gitlab clicando aqui.

Demonstração rápida

Usando o Vim com nossa configuração em um pequeno projeto:

Finalizando

Espero que você tenha conseguido tirar algum proveito do artigo. No próximo artigo sobre o Vim estarei explorando outros Plugins, separando o .vimrc em vários arquivos para melhorar a organização e explorando mais como costumo usar esse incrível editor de textos. Até lá.

Ir para a parte 2

Vim

Estrutura do artigo

Instalando o GVim

Inserindo texto e Movimentação básica

Arquivo de configuração

Vundle

Plugins

Configurações adicionais

Demonstração rápida

Finalizando

Referências

Recursos

Imagem do Card

Realizar Login

Cadastrar