Zen Coding no Visual Studio

Eu já tinha visto algo a respeito sobre Zen Coding mas só semana passada conseguir dar a atenção merecida e não me arrependi, achei sensacional, o projeto Zen Coding foi criado por Sergey Chikuyonok e é uma forma rápida e fácil de escrever elementos HTML utilizando sintaxe parecida com os seletores do CSS.

por Márcio Fábio Althmann

Eu já tinha visto algo a respeito sobre Zen Coding mas só semana passada conseguir dar a atenção merecida e não me arrependi, achei sensacional, o projeto Zen Coding foi criado por Sergey Chikuyonok e é uma forma rápida e fácil de escrever elementos HTML utilizando sintaxe parecida com os seletores do CSS.

Para o Zen Coding funcionar no Visual Studio é preciso do plugin disponível no CodePlex http://zencoding.codeplex.com/ ou caso utilize o ReSharper existe um PowerToy para o mesmo que habilita o Zen Coding, no caso eu estou utilizando o do ReSharper, mais informações aqui. Como podem ver no link sobre o ReSharper é preciso configurar um atalho de teclado para facilitar a utilização do plugin, eu configurei CTRL+.

A utilização do Zen Coding é simples, para facilitar o entendimento vamos imaginar os Code Snippets do Visual Studio, então escrevo o Snippet desejado, aperto o atalho configurado e o plugin escreve o HTML baseado no Snipet escrito.

Para facilitar a visualização, colocarei imagem com a expressão e o elemento criado, mas quando o plugin é executado a expressão some e fica somente o resultado.

Começando podemos escrever algo simples, como o nome de um elemento sem <> e ele cria as tags e abertura e fechamento.

Uma outra possibilidade, é criar um elemento já informando um identificador para o mesmo.

Além de um id para o elemento, também conseguimos colocar a classe do elemento.

Se já está gostando vai melhorar :), conseguimos criar elementos filhos, imagina criar aquela tabela com uma linha e uma coluna.

Conseguimos criar também elementos “irmãos (nem tudo traduzido fica legal)”, um exemplo simples, aquelas 3 divs de cabeçalho, conteúdo e rodapé, reparem que eu estou também adicionando id nos elementos.

Também conseguimos multiplicar elementos, para exemplificar, uma table com duas linhas e três colunas.

E por último e não menos importante, conseguimos enumerar os elementos, por exemplo um menu com os itens chamados menu1, 2, etc…

Como viram é super simples e prático criar elementos HTML com o Zen Coding.

Abraços e até a próxima.