Bonjour tout le monde et bienvenue dans ce cours complet sur Emmet.
Emmet est une extension qui change la vie, elle permet en effet de coder beaucoup plus facilement en HTML mais aussi en JSX pour React et Next, dans les templates Vue, avec Svelte et tous les autres frameworks JS.
Elle est disponible sur tous les éditeurs de code moderne, nous utiliserons VS CODE.
Le but est d'utiliser des raccourcis appelés "abréviations" comme celui-ci : div.container>ul.list>li.item*6
Une fois écrit, il vous suffira d'appuyer sur 'entrée' ou 'tab' pour les exécuter, et ça vous donnera ceci !
<div class="container">
<ul class="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
Genial n'est-ce pas ?
Il existe également toute une panoplie d'actions, qui permettent de manipuler le code plus facilement :
- Entourer du texte avec des balises a,span,et
- Sélectionner du contenu plus facilement
- Supprimer des tags sans supprimer le contenu
- Se téléporter à la balise fermante/ouvrante
- Et bien d'autres choses
Enfin, on peut également utiliser Emmet en CSS, ce qui nous permet :
- D’écrire des propriétés beaucoup plus rapidement : m => margin, p10 => padding: 10px, bgc#0 => background-color: #000, etc…
- D’utiliser des raccourcis comme en HTML : p10+m10+w100%+bg#0 =>
padding: 10px;
margin: 10px;
width: 100%;
background: #000;
Pour terminer ce mini-cours, on verra ensemble comment faire fonctionner Emmet en JavaScript, et notamment avec tous les Frameworks JS actuels.
C'est une compétence extrêmement simple et rapide à acquérir, ce qui est assez rare en développement web, alors profitez-en.
Rendez vous de l'autre coté,
Enzo.
