CodeMirror plus Emmet Editor

Catégorie : Blog
Affichages : 1613

Emmet Pour travailler en mode code, j'utilise le plugin CodeMirror plus Emmet Editor qui facilite la saisie du code et l'appairage des balises.

Ecrire du code devient presque un plaisir !

 

Création rapide d'une structure de code HTML

Anciennement nommé "Zen coding", Emmet permet de créer un ensemble de balise HTML à partir d'une forme condensé. Quelques exemples pour comprendre. La documentation complête se trouve ICI

Vous tapez puis la touche TAB Vous obtenez
h3 
<h3></h3>
div>p
> P est enfant de DIV		 
<div>
   <p></p>
</div>
div>h3+p
+ H3 et P sont au même niveau du DOM		 
<div>
  <h3></h3>
  <p></p>
</div>
div>p>span.un^^span.deux
^ remonte l'élément d'un niveau dans de DOM		 
<div>
 <p><span class="un"></span></p>
</div>
<span class="deux"></span>
.nomclasse 
<div class="nomclasse">
img 
<img src="" alt="">
p>lorem5 
<p>Lorem ipsum dolor sit amet.</p>
.row>.span4{Bloc-$$$}*3
{ } permet d'insérer du contenu littéral
$ est utilisé comme compteur		 
<div class="row">
  <div class="span4">Bloc-001</div>
  <div class="span4">Bloc-002</div>
  <div class="span4">Bloc-003</div>
</div>
table.table.table-striped>(thead>tr>th*2)+(tbody>(tr>td*3)*2)
une structure de table avec entête et 3 colonnes / 2 lignes

Les parenthèses permettent de grouper des éléments de même niveau.

 
<table class="table table-striped">
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Indentation du code

Un autre point fort de cet éditeur est l'indentation du code. Il suffit de sélectionner les lignes concernées puis de taper les touches Maj+TAB.

Il est aussi possible de mettre en évidence un bloc de code en positionnant le curseur sur une des balises (ouvrante ou fermante), un appui sur Ctrl+D va surligner le bloc concerné.

Si une balise n'est pas correctement fermée ou ouverte, la balise la plus proche de l'oubli est affichée en rouge

Les raccourcis clavier

Les raccourcis indiqués ci-dessous sont pour un clavier AZERTY.

Ctrl-E or Tab Développer l'abréviation
Maj+Ctrl+A Entoure la sélection avec une balise. Fonctionne difficilement sous Firefox
Tab ou Maj+Tab indentation automatique des lignes sélectionnées
F11 Bascule en mode saisie plain écran. ESC permet également de sortir de ce mode.
Ctrl-D Apairage balise (voir la paire de balises ouvrante et fermante)
Maj-Ctrl-D Apairage inverse balise
Ctrl-Alt-Right Prochain point à éditer
Ctrl-Alt-Left Précédent point à éditer
Ctrl-L Selection de la ligne
Ctrl-Maj-M Jonction des lignes
Ctrl-: Bascule commentaire
Ctrl-J Sépare/Joint balise
Ctrl-K Supprime une paire de balise
Maj-Ctrl-Y Evaluer une expression mathématique
Ctrl-Up Incrémente un nombre par 1
Ctrl-Down Décrémente un nombre par 1
Alt-Up Incrémente un nombre par 0.1
Alt-Down Décrémente un nombre par 0.1
Ctrl-Alt-Up Incrémente un nombre par 10
Ctrl-Alt-Down Décrémente un nombre par 10
Ctrl-. Sélectionne le prochain item
Ctrl-? Sélectionne le précédent item
Ctrl-B Reflect CSS Value

Le plugin CodeMirror plus Emmet Editor est à télécharger sur le site de son créateur Joomplace.com

Aide en français

Pour avoir un aide-mémoire en français en cliquant sur le "help" en haut et à droite de l'éditeur, remplacez le fichier \plugins\editors\emmet\js\help.html par celui fourni dans le zip ci-dessous

Emmet Editor - Aide FR

Les inconvénients

  • La zone d'édition ne prend pas toute la hauteur. J'ai résolu ce souci en ajoutant la règle .CodeMirror { height: 95%; } dans le fichier CSS du template administrateur
  • Pas de recherche-remplacer dans le code. Dans ce cas, je ascule sur l'excellent rokpad.
  • Impossible de sauvegarder les modifications avec certains composants (akeeba, ...)

Print Friendly and PDF