Installer Emmet sur Komodo Edit

Publié le 9 décembre 2013 Par WOoOinux

Qu’est-ce qu’Emmet ?

Emmet (anciennement Zen Coding) est un plugin compatible avec la plupart des éditeurs de texte et IDE connus qui vous permettra d’augmenter considérablement votre productivité lorsque vous codez en HTML et CSS. Concrètement, imaginez que vous écriviez toute une page en abréviation pour aller plus vite et que vous puissiez ensuite la transformer en texte complet via un simple raccourci clavier ? Et bien c’est exactement le principe d’Emmet ! Vous écrivez du code HTML de façon abrégée et il le transforme ensuite en version complète non abrégée pour vous !

Comme un bon dessin vaut mieux qu’un long discours…

emmet00

Pas mal non ?

Installer Emmet sur Komodo

Comme je vous le disais un peu plus haut, Emmet est un plugin qui s’installe sur un éditeur de texte ou bien  sur un IDE. Il est compatible avec, entres autres : Netbeans, Brackets, Sublime Text 2, Notepad++, TextMate, CodeMirror, Eclipse et Komodo Edit (ça tombe bien c’est celui qui nous intéresse aujourd’hui…).

  • Commençez par télécharger le plugin Emmet pour Komodo :

http://community.activestate.com/files/emmet-1.0.4-ko.xpi

  • Lancez Komodo puis allez dans Tools > Add-ons
  • Dans la fenêtre qui apparaît, cliquez sur le bouton Paramètres > Install Add-on From File

emmet05

  • Recherchez le fichier .xpi puis cliquez sur Ouvrir
  • Cliquez sur le bouton “Install now” pour lancer l’installation

emmet06

  • Cliquez enfin sur “Restart now” pour terminer l’installation

emmet07

  • Une fois Komodo redémarré allez dans Edit > Preferences
  • Dans le fenêtre des préférences allez dans Editor > Key Bindings
  • Recherchez “Emmet: Expand Abbreviation” dans le liste de droite

emmet01

Choisissez ensuite le raccourcis clavier qui permettra de lancer la commande pour transformer vos abréviations (par exemple CTRL+SHIFT+A) puis cliquez sur le bouton “Add”. Si le raccourcis que vous choisissez est déjà utilisé par une autre commande, Komodo vous le signalera.

emmet02

Si tout s’est bien passé vous voyez le raccourcis apparaître dans le champ “Current Key Sequence”

emmet03

Cliquez sur le bouton “OK”, Komodo va vous demandez de redémarrer pour prendre en compte le nouveau raccourcis clavier

emmet04

Et voilà ! Vous pouvez tester le plugin en créant un fichier HTML et en écrivant la ligne ci-dessous :

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

Si, en faisant CTRL+SHIFT+A vous obtenez le code ci-dessous c’est gagné !

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>