Installer et utiliser Emmet dans Netbeans

Beaucoup ne jurent que par SublimeText pour saisir du code (html / css principalement) entre autre grâce à la présence du génial Emmet. Sublime a d’ailleurs remplacé mon vieillissant UltraEdit qui n’a que peu apprécié le passage à Windows 8…

Je suis pro-Netbeans, et apprécie aussi Emmet, alors pourquoi ne pas utiliser les deux…

Puisque c’est possible…

Emmet ?

Anciennement ZenCoding, Emmet permet d’accélérer la saisie du balisage html (entre autre).

Dans Sublime, si on tape (dans un document html) plus ou moins l’équivalent d’une règle CSS (mais en plus puissant), puis la touche tabulation, et la magie s’opère.

table>tr*4>td*4

devient ainsi

<table>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
</table>

(avec l’indentation qui va bien, j’ai réduit pour gagner de la place).

Avec des choses (une fois maitrisées) bien sympathique. A essayer:

html:5>(header#header)+nav#nav>(ul>li.item$*2>a>lorem5)^section#content>^footer#footer

Et hop:

Convaincant non ?

On pourrait expliquer, mais ce n’est pas le propos du jour. Pour aller plus loin, la documentation d’Emmet.

Installer Emmet dans Netbeans

Dans Netbeans, aller dans le menu Tools > Plugins.

S’il apparaît dans la liste des plugins disponible (onglet Available Plugins) c’est le plus simple. Cocher la case et cliquez sur Install (mais à priori ce n’est pas encore intégré).

Dans le cas contraire, il faut aller sur le dépôt des plugins, et télécharger le fichier NBM.

Ensuite, retour dans Netbeans, (tools > plugins toujours), onglet Downloaded, et bouton Add Plugins…

Sans surprise, allez chercher le plugin sur votre disque dur, et cliquer sur Install.

Faire alors Next, Accepter les conditions (après les avoir lu, bien sûr…) et Install…

Netbeans devra alors redémarrer.

Configurer Emmet

Si tout se passe bien (et il n’y a pas de raison), dans le menu Edit est apparu un onglet  Emmet.

L’option principale (expand Abbreviation) est disponible, ainsi que le raccourcit clavier qui lui est affectée. Si la touche ne vous convient pas, aller faire un tour dans le menu Tools > Options, onglet Keymap.

Ce qui concerne Emmet est regroupé dans les catégories Emmet…

Have fun!