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.
Tags:
Comentários
Comentários fechados.
Sem nenhum comentário.