Productivité x10 avec Emmet

Bonjour tout le monde et bienvenue dans ce cours complet sur Emmet.

Emmet est une extension qui change la vie, elle permet de coder beaucoup plus facilement en HTML mais aussi en JSX pour React/Next, dans les templates Vue, avec Svelte, etc ...

Elle est disponible sur tous les éditeurs de code moderne, nous utiliserons VS CODE.

Le but est d'utiliser des raccourcis 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>

Génial, n'est-ce pas ?

C'est ce qu'on appelle une abréviation Emmet.

Il existe également toute une panoplie d'actions, qui permettent de manipuler le code plus facilement :
- Entourer du texte avec des balises(a,span,etc…)
- Sélectionner du contenu plus facilement
- Supprimer des tags sans supprimer le contenu
- Se téléporter à la balise fermante/ouvrante
- etc…

Enfin, on peut également utiliser Emmet en CSS, ce qui nous donne les possibilités :
- 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 côté,
Enzo.