Agilizando a digitação de HTML no VIm

No post passado, comentei sobre as minhas customizações do VIm, para agilizar o desenvolvimento Web.

Aqui vamos falar do emmet.vim, que é a evolução do Zen Coding. Nunca ouviu falar disso? Vamos explicar:

Quem já digitou código HTML sem nenhuma ajuda de auto-completar e detecção de erros, deve ter tido uma experiência bastante negativa. Nos editores de texto de linha de comando, é uma situação bastante frequente (especialmente aqueles que trabalham com ferramentas leves, como Sublime, Notepad++, VIm, Emacs, TextPad, etc...), quando não são customizados.

O ZenCoding foi o precursor de atalhos que representam trechos do HTML, como snippets padrão. Tão padrão, que todo mundo que quem implantou um plugin dele usava os mesmos atalhos. Outras pessoas evoluiram os padrões e criaram o Emmet (http://emmet.io).

Para implantar o plugin no VIm, coloque no ~/.vimrc a seguinte linha:

NeoBundle 'mattn/emmet-vim'

No VIm, basta colocar o atalho Emmet no seu texto e depois pressionar as teclas Ctrl+y e depois o caracter "," (vírgula) [quer dizer: aperta o Control e o "y", solta as duas e toca na vírgula - parece complicado, mas não é, é só tentar]

No link http://docs.emmet.io/cheat-sheet/ tem os vários atalhos do Emmet. A consulta/leitura é extremamente recomendada.

Ambiente de Desenvolvimento - IDE

Existem hoje muitas opções para montar a IDE de desenvolvimento web ou mesmo usar uma IDE já prontinha.

Usei algumas das grandes, como Visual Studio e Eclipse, mas acho que são muito grandes, e por boas que sejam, gosto de editores leves, práticos e que já integrem muitas outras funcionalidades para outras tecnologias.

Como sou Administrador de Sistemas, e uso todo dia o Vim, ele acaba sendo minha escolha natural para qualquer desenvolvimento web (a menos que não faça sentido manter as coisas nele).

A carinha simpática do garoto!

Para quem não conhece, o Vim é a versão melhorada o VI, e são (os dois) editores de texto de linha de comando. A curva de aprendizado do Vim é um pouco longa, mas depois de aprendido, é difícil largar. (tem pessoas que terão o mesmo sentimento com outro editor de texto de linha de comando, o Emacs)

Para quem quiser um tutorial de comandos e funcionalidades básicas, chegue aqui ou veja os VimCasts.

Mas nas minhas aulas, algumas pessoas tem dificuldade de começar com o VIm, instalando e configurando para ter as funcionalidades interessantes para quem desenvolve pra Web.

Pra instalar o vim, na linha de comando, digite:

$ sudo yum install vim

Porém quando essa instalação termina, ele ainda não tem muitas funcionalidades, que são adicionadas com plugins. Aí entra a necessidade de usar um gerenciador de plugins pro VIm, e eu gosto de usar o NeoBundle.

Todas as instruções para instalar e usar o NeoBundle, estão na página inicial do site, mas vamos colocar como um roteirinho pra ficar mais fácil:

Primeiro, instala-se o git com o comando:

$ sudo yum install git

Depois, vc vai baixar o script de instalação, com o comando:

$ curl https://raw.githubusercontent.com/Shougo/neobundle.vim/master/bin/install.sh > install.sh

E por fim, vai executar a instalação:

$ sh ./install.sh

No fim da instalação, ele mostra um arquivo de configuração básico, para que você realize a configuração inicial sem pensar muito. Basta salvar a saída do último comando para o arquivo ~/.vimrc

Para facilitar um pouco mais, eu disponibilizei no GitHub o meu arquivo ~/.vimrc com os plugins que acho mais interessantes, e você pode baixar com o seguinte comando:

$ curl https://raw.githubusercontent.com/fchicout/myvim/master/.vimrc > ~/.vimrc

Os plugins que deixei são os seguintes:

• NERDTree - Oferece uma janelinha com um navegador de arquivos.
• neosnippet - Suporte a Snippets de Código
• neosnippet-snippets - Suporte a Snippets de Código
• vim-fugitive - Manipulação de repositórios git a partir do modo de comandos do VIm
• ctrlp.vim - Um plugin para busca muito overpower
• vim-colorschemes - Melhorias na coloração de código
• emmet-vim - Zen Coding (uma série de atalhos para digitação de html e css de maneira bem simplificada

Em outro momento devo montar alguma postagem sobre alguns desses plugins.

E por hoje chega!