Zen Coding para NetBeans

Olá galera esse post é para quem usar NetBeans e conhece Zen Coding ou quer conhecer, bem o Zen Coding é um plugin para vários editores de códigos tais como textmate, GEdit, notepad++, Dreamweaver e tantos outros. Para esse tutorial iremos usar o NetBeans para mostrar algumas das facilidades de montar um código HTML.

Instalação

1. Download do plugin here.
2. Abra o NetBeans (>=6.9.1) e vá ao menu Ferramentas > Plug-ins.
3. Selecione a aba Baixados, clique Adicionar plug-ins... e procure pelo arquivo nbm que você baixou.
4. Clique no botão Instalar, e siga as instruções e depois reinicie o NetBeans IDE.

Como usar

Ao digitar:

div

Aparecerar:

Ao digitar:

div>p>a

Aparecerar:

Podemos também o id e classe e ao digitar:

div#id_da_div>p.class_do_p>a

Aparecerar:

Como podemos usar multiplicar a quantidade de tags e ao digitar:

div#menu>ul.principal>li*5

Aparecerar:

Também poderemos somar objetos:

dl*2>dt+dd

Aparecerar:

Ao digitar:

div#page>div.logo+ul#nav>ul>li*5>a

Aparecerar:

Podemos dividir blocos com parenteses:

table>(thead>tr>td*2)>(tbody>tr*2>td*2)>(tfoot>tr>td*2)

Aparecerar:

É possível adicionar atributros ao digitar:

div[title]>a[title="Hello world" rel]

Aparecerar:

Ou alguns textos o digitar:

p>{Click }+a{here}+{ to continue}

Aparecerar:

Click here to continue

Ao digitar:

div

Aparecerar:

code

Ao digitar:

div

Aparecerar:

code

E para finalizar o Zen Coding também nos deixa um gerador de lorem ipsum é apenas usa alt+insert e escolher a opção Texto Lorem Ipsum depois escolha a quantidade de paragrafos e o separador.

Conclusão

Todos os os atalhos foram testado no NetBeans 7.0.1, caso você use outro Editor/IDE pode consultar a documentação oficial. Então é isso pessoal, em breve voltarei com mais alguma coisa.

Grato