La plus part des éditeurs dispose d’un système d’autocomplétion de balise, et une fonctionnalité de suggestions de balises et/ou attributs CSS que vous tapez. Bref, une manière d’aider les développeurs à faire des choses rapidement. Je vous présente un autre surplus outil qui vous permettra d’aller encore plus rapidement, Emmet !

Emmet, écrivez moins, codez plus

Emmet est un plugin qu’on intègre dans un éditeur texte ou un IDE qui permet d’écrire plus rapidement ses codes HTML & CSS. La plus part des éditeurs et IDE web l’intègre par défaut comme PHPStorm mais d’autres nécessitent l’installation séparée d’une extension.

Vous vous demandez peut-être comment Emmet booste l’espace de travail (workspace) d’un webmaster, si c’est le cas, permettez-moi de vous faire entré dans le bain si vous n’avez toujours pas une idée de quoi il s’agit.

Prenons ce code :

Le code le plus basique en HTML qui fait environ déjà 10 lignes de code, avec Emmet, on peut l’écrire qu’en une seule ligne et en quelque caractère .

Animation de la génération d'esquelette html avec git

J’utilise PHPStorm qui ajoute d’autres informations tel que meta viewport

Et opps, comme par magie, j’ai mon code généré. Vous voyez comment Emmet peut vous simplifiez la vie ? Convaincu ? Découvrons Emmet…

Installer Emmet

Emmet est disponible sous forme de plugins ou extensions dans différentes éditeurs. Vous trouverez comment l’installer dans votre éditeurs dans la cette page de téléchargement

Voir aussi  Verifier les données fomulaires HTML5 sans Javascript

Les bases d’emmet

Avec emmet, on écrit la syntaxe d’une abréviation suivi de la touche tabulation pour voir la génération du code correspondant. Le cas de l’abréviation suivante suivi de la touche tabulation

Génère

Les balises

Vous n’avez besoin que de taper le nom d’une balise pour générer l’ouverture et fermeture de celle ci.

Certaines balises se voient compléter par leurs attributs requirents.

Attributs

Pour définir les classes d’une balise, il faut précéder le nom de la classe par un point (.) et un nom précédé d’un dièse (#) défini l’id vu qu’il en existe qu’un au sein d’une balise.

Quand le nom de la balise n’est pas renseigné, une balise implicite est généré sur base de l’élément parent. Si vous êtes par exemple dans ul, li est généré. plus d’infos.

Vous pouvez enchaîner les  abréviations comme suit

Voir aussi  Faciliter vos animations CSS3 avec Animate.css

Hormis les classes et identifiants, les autres attributs sont renseignés entre crochet

Famille, Quantification, Groupement

Vous pouvez déterminer les enfants d’une balise avec >

Vous pouvez remontez vers un parent avec ^

Vous pouvez ajouter un frère d’une balise avec +

Vous pouvez aussi quantifier le nombre d’éléments à générer avec le nombre d’éléments à générer précédé de l’astérisque (*)

Enfin, De fois on a besoin de ne pas à remonter d’un parent (^),  redescendre (>) d’un enfant et vice-versa. Pour cela, vous pouvez grouper vos éléments de cette manière avec les parenthèses ()

Voir aussi  Pace.js Ajouter une barre de progression de chargement dans votre site

Je vous laisse découvrir d’autres syntaxes dans la documentation.

Lorem ipsum

Quand on développe, on a souvent besoin du texte enfin d’anticiper le résultat de ses utilisateurs , Vous pouvez généré rapidement le faux-texte

Les actions

Hormis les syntaxes, Emmet dispose des différentes actions aussi très pratiques qui se font à travers les combinaisons de touche ou raccourcis par exemple le raccourci sfhit + ctrl + j qui permet de coder le lien d’une image en base64. si vous positionnez le curseur dans la valeur de l’attribut src ou dans la valeur de la fonction url() (background par exemple).

Il existe aussi des abréviations pour le CSS

Si vous avez aimé ce post, acclamez-moi juste en dessous

3 comments

  • snipe
    snipe

    les code sources d’une page web sont écrits par les hommes où ce le CMS qui se charge de l’écrire

    • Goms
      Goms

      C’est sois même qui écrit le code. Par exemple, tu peux écrire ! suivit de la touche tabulation pour voir ceci

  • MKE
    MKE

    Comment vous faite généner le code que vous avez saisi dans un champ [input] et qui s’affiche juste en bas comme dans un éditeur. Merci d’avance

    • Goms
      Goms

      Je n’ai pas bien compris ta question malheureusement !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.