Productivité x10 avec Emmet

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"

Voici une abréviation : 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 faire apparaître une tonne de contenu HTML d'un coup.

Il existe également toute une panoplie d'actions

• 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

Cela nous permet d'écrire des propriétés/valeurs beaucoup plus rapidement : m => margin, p10 => padding: 10px, bgc#0 => background-color: #000, etc…

C'est une compétence simple et très utile

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.

Besoin d'aide ?

Rejoignez la communauté sur Discord, ou suivez les tutoriels de l'École du Web sur Youtube.