Emmet, anciennement connu sous le nom de code Zen, est l’un des meilleurs outils dont vous auriez besoin pour augmenter votre productivité lors du codage HTML ou CSS. Cela fonctionne comme l’achèvement du code, mais il est plus puissant et plus étonnant. Il est capable d'automatiser votre HTML / CSS d'un simple formulaire au complexe.
Emmet offre un bon support pour l'éditeur de texte ou IDE (environnement de développement intégré) tels que Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm et bien d'autres. Il supporte également les outils d'édition en ligne tels que JSFiddle, JSBin, CodePen, IceCoder et Codio .
La manière de travailler d’Emmet est de taper la touche de votre clavier après avoir écrit la syntaxe. Les symboles Emmet les plus courants que vous pouvez utiliser sont les suivants. Pour les voir en action, continuez à lire.
Emmet - Meilleurs astuces HTML
Vous serez surpris en écrivant en HTML avec Emmet, comme je l'ai fait. Comme indiqué précédemment, Emmet peut abréger un code HTML simple en un code très complexe. Et ils ne sont écrits que sur une seule ligne de code. Par défaut, si vous abrégez un nom de tag inconnu, Emmet écrit automatiquement le tag que vous écrivez. Voir l'animation ci-dessous pour le comprendre facilement.
1. Nidification
Pour imbriquer certains éléments, il vous suffit d'ajouter un signe plus gros > après chaque balise que vous souhaitez utiliser. Par exemple, lorsque je veux un en- header avec nav, div, ul et li intérieur, il suffit de taper en- header>nav>div>ul>li et la touche de tabulation.
2. fratrie
Si vous ne voulez pas imbriquer vos éléments, vous pouvez simplement utiliser un signe plus + suivi des balises que vous souhaitez ajouter. Par exemple, l'en- header+section+article+footer donnera un emplacement différent pour l'en- header, la section, l' article et le footer .
3. Grimper
Lorsque vous êtes dans un élément enfant et que vous souhaitez avoir un autre élément en dehors de cet enfant, vous pouvez facilement gravir un élément avec le signe ^ . Si vous le tapez deux fois, vous gravirez un élément double, etc. Par exemple, si vous tapez en- header>div>h1>nav l'élément de navigation reste dans le h1. Pour le sortir, remplacez simplement le dernier > signe par ^ .
4. Ajouter une classe
Emmet peut également inclure votre nom de classe préféré dans la balise. Le signe que vous utiliserez est le même que celui du sélecteur de classe en CSS, à savoir un point . signe. Par exemple, si je veux avoir un div avec la classe .container, h1 avec .title et nav avec .fixed, alors je dois juste écrire div.container>header>h1.title+nav.fixed .
Si vous voulez avoir plus d'une classe à l'intérieur, tapez votre classe supplémentaire après la première classe avec le point . signe. Exemple: div.container.center produira .
5. Ajouter un identifiant
Outre la classe, vous pouvez également ajouter un identifiant dans votre tag avec # signe # . L'utilisation est la même que l'ajout d'une classe, mais vous ne pouvez pas taper double ID à l'intérieur. Si vous essayez de le faire, Emmet ne lira que le dernier ID saisi.
6. Ajouter du texte
Emmet n’est pas aussi simple que cela: il suffit d’abréger certaines balises. Vous pouvez même ajouter une ligne de texte à l’intérieur. Pour ajouter du texte, il vous suffit d’envelopper le texte d’un signe {} . Vous n'avez pas besoin d'ajouter un signe > plus grand car le texte sera automatiquement ajouté à l'intérieur de la balise.
7. Ajouter un attribut
Si vous souhaitez ajouter un autre attribut en dehors de la classe et de l'id, placez simplement l'attribut que vous souhaitez ajouter à l'intérieur du signe crochet [] . Par exemple, je veux avoir une image qui a la source logo.png avec le logo alt, je tape donc img[src="logo.png"] .
8. Regroupement
Lorsque vous souhaitez avoir un élément avec plusieurs éléments imbriqués, les regrouper avec le signe () vous aidera à y parvenir facilement. Exemple, je veux avoir un conteneur avec en-tête avec h1 et nav à l'intérieur et une autre section à l'extérieur de l'en-tête, je vais simplement écrire: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Multiplication
Cette fonctionnalité peut devenir l’un de vos favoris d’Emmet. Comme avec la multiplication, nous pouvons multiplier n'importe quel élément autant que nous voulons. Pour l'utiliser, ajoutez simplement un signe étoile * après élément que vous souhaitez multiplier et ajoutez le numéro de l'élément. Par exemple, je veux écrire cinq objets li dans ul, la syntaxe correcte est ul>li*5 .
10. Numérotation automatique
La numérotation automatique vous aidera à écrire facilement un nom différent avec un nombre croissant. La syntaxe correcte pour cette fonctionnalité est un signe dollar $ . La numérotation automatique est mieux utilisée avec la multiplication. Exemple, je veux ajouter mon précédent article li avec une classe de item1 à item5 . Donc, je dois juste ajouter un nom de classe supplémentaire avec le signe dollar: ul>li.item$*5 .
11. Lorem
Si vous aviez l'habitude d'écrire un texte factice en ouvrant le générateur Lipsum comme lipsum.com, vous n'avez plus besoin de le faire avec Emmet. Emmet prend également en charge le générateur de texte factice avec la syntaxe lorem ou lipsum . Vous pouvez également spécifier la longueur de votre texte. Par exemple, je veux avoir un texte de 10 mots, puis je vais taper lorem10 .
12. Document automatique
Lorsque vous démarrez un nouveau projet, au lieu d'écrire manuellement la structure html ou de copier-coller à partir d'autres ressources, Emmet peut le faire mieux pour vous. Tout ce que vous avez à faire est de taper un exclamatoire ! signe, frappe l'onglet et la magie se produit. Cela va générer une structure de document HTML5 pour vous, si vous voulez utiliser un HTML4 à la place, tapez simplement html:4t .
13. Lien
Si vous souhaitez ajouter un fichier CSS, RSS ou externe à votre document, vous pouvez utiliser des astuces sur les liens pour les écrire plus rapidement. Pour inclure un favicon, tapez link:favicon il générera un lien avec le nom de fichier par défaut favicon.ico . Et pour css, link:css générera un lien CSS avec le nom de style par défaut style.css . Et RSS sera rss.xml comme nom par défaut.
Vous pouvez les combiner avec le signe plus + pour générer des ressources plus rapides.
14. ancre
Par défaut, lorsque vous tapez a balise puis que vous appuyez sur tab, vous obtiendrez a balise complète avec l'attribut href intérieur. Mais vous pouvez ajouter une valeur // si vous la combinez avec link, par exemple a:link . Et si vous souhaitez plutôt avoir un lien de messagerie, utilisez a:mail .
15. Saut intelligent
La dernière astuce HTML que je vais vous donner est la fonctionnalité de saut intelligent. En gros, vous n'avez pas à écrire le nom de la balise lorsque vous voulez y avoir une classe ou un identifiant. Cela s'applique uniquement à certaines conditions.
Premièrement, si vous voulez avoir un div avec un ID ou une classe à l'intérieur, vous n'avez pas besoin d'écrire le nom de la balise, mais d'écrire directement le symbole de l'id ou de la classe avec son nom.
Deuxièmement, lorsque vous êtes à l'intérieur d'une balise ul, vous ignorez l'écriture de la balise li si elle a une classe ou un identifiant.
Et le dernier est appliqué dans la balise de la table . Vous pouvez ignorer l'écriture des balises tr et td si elles ont classe ou id et Emmet les ajoutera automatiquement pour vous.
Emmet - Meilleurs astuces CSS
Après avoir appris quelques astuces HTML, le moment est venu pour le CSS. Certains des symboles communs affichés dans l'image du haut ne fonctionneront pas avec CSS. Ils sont plus grands et grimpent ^ symboles. Si vous les utilisez, ils produiront exactement comme le symbole plus + . Alors allons-y.
1. Largeur et hauteur
Définir la width et la height avec Emmet est très simple. Il vous suffit d’en écrire le premier mot, suivi de la taille que vous souhaitez ajouter. Par défaut, si vous ne spécifiez pas les unités, Emmet les générera avec l'unité px . Le symbole d'unité disponible est le pourcentage et em .
2. texte
Certains symboles de propriété de texte faciles à utiliser seront générés avec la valeur par défaut. ta générera text-align avec la valeur de left, td sera text-decoration avec none valeur et tt deviendra text-transform avec une valeur uppercase .
3. Contexte
Pour ajouter un arrière-plan, utilisez simplement l'abréviation bg . Vous pouvez le combiner avec bgi pour obtenir background-image, bgc pour background-color et bgr pour background-repeat . Vous pouvez également écrire bg+ pour obtenir la liste complète des propriétés d’arrière-plan.
4. Face de la police
Le signe plus ne s'applique pas uniquement à l'arrière-plan. Pour @font-face, vous pouvez simplement écrire @f+ pour obtenir une liste complète de @font-face propriété @font-face . Si vous tapez @f sans signe plus, vous obtiendrez un @font-face uniquement.
5. Divers
Vous pouvez également abréger l'écriture d' animation avec du texte animation . Si vous ajoutez un signe moins, vous obtiendrez une propriété d'animation avec une valeur complète. Il existe également @kf texte @kf qui produira la liste complète de @keyframe .
Conclusion
Emmet est un très gros outil permettant de gagner du temps pour rationaliser votre processus de développement. Si vous ne connaissez que Emmet, il n'est pas trop tard pour l'essayer maintenant. Ces astuces ne sont que quelques-unes des fonctionnalités d’Emmet. Il y a une tonne d'autres symboles et syntaxes dans Emmet, en particulier pour CSS. Rendez-vous simplement dans les documents Emmet ou dans la feuille de triche pour approfondir votre lecture.
