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 |
Vous obtenez |
---|---|
h3 |
|
div>p > P est enfant de DIV |
|
div>h3+p + H3 et P sont au même niveau du DOM |
|
div>p>span.un^^span.deux ^ remonte l'élément d'un niveau dans de DOM |
|
.nomclasse |
|
img |
|
p>lorem5 |
|
.row>.span4{Bloc-$$$}*3 { } permet d'insérer du contenu littéral $ est utilisé comme compteur |
|
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. |
|
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
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, ...)