Emmet, anciennement Zen Coding, est l’un des plugins d’éditeur de texte les plus simples et les plus productifs que vous puissiez jamais voir. Grâce à sa capacité à transformer instantanément des abréviations simples en extraits de code complexes, Emmet vous donne l'impression d'être un puissant assistant de codage avec le monde à portée de main.
Pour faire suite à notre précédent article sur les bases du codage Zen, nous allons aujourd'hui explorer sept astuces géniales pour vous aider à devenir un véritable pro Emmet.
1. Passer la div
Notre premier conseil est que vous avez rarement besoin de taper? Div? dans ta macro. C'est tentant parce que c'est ce que vous faites avec tous les autres éléments HTML, mais les div sont spéciales et nécessitent même moins d'effort. Tout ce que vous avez à faire est de taper un ID (avec un hashtag) ou une classe (avec un point) et Emmet supposera que vous cherchez à créer un div.
Comme vous pouvez le constater, les deux abréviations donnent le même résultat. Dans la mesure où Emmet vise à vous faire gagner du temps en réduisant le nombre de saisies, prenez toujours le chemin le plus court qui vous convient.
Noms de balises implicites
Cette bizarrerie fait en fait partie d'une fonctionnalité plus importante appelée "noms de balises implicites", qui tente d'interpréter la balise que vous souhaitez en fonction du contexte. Remarquez que je ne tape pas non plus? Div? ou? li? dans mon abréviation, mais ils sont supposés et insérés dans l'extrait final développé.
2. Abréviations de chaîne avec navigation DOM
Si vous utilisez Emmet pour développer des noms de classe simples en divs, tant mieux, vous êtes bien parti. Cependant, le gain de temps réel n’est atteint qu’une fois que vous avez appris à construire efficacement des macros plus volumineuses pouvant s’étendre à une partie importante de votre balisage.
La clé de cette opération est de mémoriser et de comprendre la syntaxe qui vous aidera à accéder aux différents niveaux de votre arborescence de documents. Il y a trois symboles importants à garder à l'esprit:
Comme vous pouvez le voir,?> Var13 ->? vous permet d'aller plus loin dans l'arbre et de créer un enfant,? +? vous permet de créer un nouvel élément au même niveau que le précédent (un frère), et? ^? vous permet de remonter d'un niveau pour créer un élément. Par souci de simplicité, commençons par les deux premiers.
Comme vous pouvez le constater, avec le symbole enfant (tout comme le sélecteur d’enfants dans CSS), j’ai pu placer la div interne à l’intérieur de la div externe. Ensuite, j'ai utilisé un autre symbole enfant suivi du symbole frère pour placer le h2 et le paragraphe au même niveau, à l'intérieur du div interne.
Grimper
Maintenant passons à autre chose et regardons comment remonter l’arbre. Celui-ci est un peu plus compliqué à comprendre, mais il s'agit d'une nouvelle fonctionnalité Emmet impressionnante que nous n'avions pas dans le codage Zen. Fondamentalement, en utilisant le? Move up? symbole, nous pouvons sortir d’une branche dans laquelle nous avons commencé à plonger. Voici ce que je veux dire:
Comme vous pouvez le voir ici, nous avons creusé dans le premier paragraphe et ajouté une balise d'ancrage, mais nous devions ensuite remonter et ajouter un autre paragraphe du même niveau que le précédent. Le? ^? symbole nous a permis d'accomplir cela.
Pour rendre cette fonctionnalité encore plus utile, vous pouvez relier ces symboles pour remonter de plusieurs niveaux. Par exemple, si nous ajoutions un élément em à notre abréviation précédente, nous devions gravir deux niveaux pour placer notre paragraphe suivant sur le même niveau que le premier.
3. Utilisez le regroupement pour simplifier votre structure
Parfois, vous constaterez que vous avez plongé si profondément dans une branche en particulier que le chaînage de suffisamment de symboles de montée pour obtenir ce que vous voulez devient un véritable gâchis. Dans ce cas, cela pourrait simplifier un peu les choses si vous optez pour le regroupement. Ceci est accompli en implémentant des parenthèses autour de différentes sections de code.
En fait, cela semble plus naturel et logique que d'utiliser le symbole de montée, et nous accomplissons vraiment la même chose. Vous pouvez voir que cela commence vraiment à porter ses fruits lorsque vous décrivez une plus grande partie de votre page.
4. Insérer du texte et des attributs
Lorsque vous marquez votre page, le texte et les attributs sont deux choses que vous ne pouvez pas espérer exécuter avec Emmet. De nombreux utilisateurs décrivent simplement un document avec cet outil, puis comblent les lacunes de contenu après l’extension. C'est une excellente façon de travailler, mais si cela vous intéresse, vous pouvez insérer du texte et des attributs en utilisant la syntaxe indiquée ci-dessous.
Comme je l'ai montré ci-dessus, le texte est inséré via {accolades} et les attributs utilisent des [crochets]. Gardez à l'esprit que les ancres insèrent automatiquement un? Href? mais sa valeur est laissée vide par défaut, cette technique vous permet de la remplir. De plus, rappelez-vous que vous pouvez utiliser des accolades pour créer n’importe quel attribut que vous préférez, pas seulement celui qui est présenté ici.
5. Nom de classe multiple sur un seul élément
Celui-ci est très simple, mais lorsque j'ai commencé à utiliser cet outil, je ne savais pas comment ajouter plusieurs noms de classe à un seul élément. En fin de compte, tout ce que vous avez à faire est de taper tous les noms de classe dans une ligne séparée par des points.
6. Multiplication
Ceci est un autre de mes favoris. Vous pouvez économiser des tonnes de frappe en insérant plusieurs éléments du même type. Utilisez simplement la syntaxe suivante:
Cela fonctionne sur à peu près tout ce dont vous avez besoin, peu importe la complexité. Essayez d’associer la fonctionnalité de regroupement que nous avons vue auparavant pour obtenir des résultats intéressants.
7. Numérotation automatique
Notre septième et dernier conseil est que vous pouvez insérer des numéros incrémentés automatiquement dans vos extraits via le signe dollar. Cela fonctionne n'importe où: classes, identifiants, texte, attributs, etc. Voici un exemple en action:
Notez que plus vous utilisez de signes en dollars, plus le nombre de chiffres est élevé. Donc, dans un premier temps, j'ai utilisé $, qui a été développé en 1, 2 et 3.Ensuite, dans le second cas, j’ai utilisé $$, qui s’est développé en 01, 02 et 03.
Essayez-les!
Maintenant que vous connaissez un tas d’astuces vraiment étonnantes à essayer avec Emmet, il est temps de tenter le coup. Consultez notre page de démonstration Emmet et essayez quelques-unes des abréviations décrites plus haut. Voici une liste de chaque abréviation de cet article en texte brut pour votre commodité de copier et coller.
Assurez-vous également de consulter la page d'accueil d'Emmet, où vous pourrez en apprendre davantage et l'essayer vous-même immédiatement.
Comment développer les abréviations?
L'expansion peut être différente dans chaque éditeur et nécessite généralement un plugin. Dans Sublime Text 2, ouvrez le Gestionnaire de paquets, recherchez Emmet, installez-le, puis redémarrez l'application. Pour déclencher une expansion, appuyez simplement sur languette après avoir tapé une abréviation.
Quels sont vos conseils préférés?
Emmet est sans conteste l’un de mes outils de codage préférés. Croyez-moi, utilisez-le pendant quelques semaines et vous ne voudrez plus jamais coder sans. Cela économise des tonnes de travail et est bien plus intelligent que la fonctionnalité de snippet typique de votre éditeur de code.
Maintenant que vous avez vu mes conseils, laissez-en quelques-uns! Ecrivez un commentaire ci-dessous en me disant comment vous utilisez Emmet ou Zen Coding et quelles fonctionnalités sont vos favoris.