Eustáquio Rangel

Desenvolvedor, pai, metalhead, ciclista

Usando o ZenCoding no Vim

Publicado em Developer


Alguns dias atrás divulguei um vídeo mostrando como utilizar o ZenCoding no Vim. Eu ainda não havia testado ele um pouco mais e parece que algumas pessoas tiveram um pouco de dificuldade para fazer funcionar, então pensei em fazer esse pequeno post para investigar um pouco mais as funcionalidades e tentar esclarecer um pouco o funcionamento.

O plugin que escolhi não é um plugin oficial, como bem explicitado na página do ZenCoding, mas tem vários recursos legais: é o ZenCoding-Vim.

Instalação

Para instalar, é só clonar o repositório com git clone http://github.com/mattn/zencoding-vim.git e copiar o arquivo zencoding.vim para o seu diretório ~/.vim/plugin, ou, mais fácil ainda, copiar o arquivo direto daqui e salvar no diretório.

Uso

O principal é utilizar as sequências de teclas necessárias, como <c-y>, (Ctrl+y+vírgula) na posição do cursor para ativar o plugin, de acordo com o que você digitou. Seguindo alguns exemplos da documentação do plugin:

html:5<c-y>,
Cria uma estrutura HTML5 e posiciona o cursor dentro do <body></body>: 
<!DOCTYPE HTML>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>

</body>
</html>
div#foo$*2>div.bar<c-y>,

<div id="foo1">
<div class="bar"></div>
</div>
<div id="foo2">
<div class="bar"></div>
</div>

O lance é analisar o comando: queremos criar DIVs com ID sendo FOO*<número>, onde <número> é a sequência da repetição indicada por *, que indica quantas vezes deve ser repetido através do número que o segue, e dentro de cada DIV dessas, indicado através de >, são criadas DIVs com a classe (indicado por .) bar. Confuso? Tentando ler o comando: "quero criar DIVs com IDs 'foo' seguido de um número que é sequência de 2 repetições, e dentro de cada DIV dessas são criadas DIVs com CLASS 'bar ". É só dar uma estudada em seletores CSS que a coisa fica mais clara. :-)
Envolver com abreviações

Digitando, selecionando as seguintes linhas: 
   um
   dois
   tres
E usando <c-y>, digitando ul>li* quando requisitada a tag, vai produzir: 
   <ul>
      <li>um</li>
      <li>dois</li>
      <li>três</li>
   </ul>
Criando links

Digitando uma URL, por exemplo, http://eustaquiorangel.com e <c-y>a logo após o final produz 
   <a href="http://eustaquiorangel.com">Eustáquio Rangel - Blog </a>
Pelo menos aqui no GNU/Linux já veio até com o título da página!

Tem muitos mais exemplos no tutorial de onde eu copiei esses exemplos e que é sempre atualizado, então, se você está interessado em utilizar essa ótima ferramenta, mãos à obra, espero ter instigado e resolvido algumas dúvidas nesse pequeno post.




Comentários

Comentários fechados.

Sem nenhum comentário.

Artigos anteriores