close

Sublime Text Travailler avec Emmet

#1 Informations pour faire le tuto avec Sublime Text 4 (Juillet 2022) open

Pour faire ce tutoriel avec Sublime Text 4 vous devez tenir compte des modifications suivantes :

  1. Si vous venez d'installer la version 4 il se peut qu'Emmet ne soit pas "activé". Tapez CTRL+SHIFT+P puis tapez Emmet et choisissez la commande : Enter Abbreviation Mode.
  2. Le raccourci clavier CTRL+SHIFT+G n'est plus associé à la commande Emmet: Wrap With Abbreviation : Vous pouvez aller chercher cette commande au moyen de la palette de commande CTRL+SHIFT+P à chaque fois que vous en avez besoin ou alors remettre en place ce raccourci.

#2 Travailler avec les abréviations Emmet en HTML open

  1. Faites CTRL+N pour créer un nouveau fichier. Puis CTRL+S et enregistrez le sur le bureau avec le nom Emmet.html.
  2. Tapez ! puis TAB pour avoir une structure minimum.
Utiliser Emmet avec Sublime Text Exemple 1
  1. Placez votre curseur dans le body et tapez nav>ol puis TAB. Vous constatez que l'élément ol a été placé dans l'élément nav. Faites CTRL+Z.
Utiliser Emmet avec Sublime Text Exemple 2
  1. Pour ajouter un élément li il faut maintenant encapsuler li dans ol donc faire nav>ol>li. Cependant si vous voulez plusieurs éléments li par exemple 5 alors tapez nav>ol>li*5 puis TAB. Vous avez ici 5 éléments li dans votre ol. Faites CTRL+Z.
Utiliser Emmet avec Sublime Text Exemple 3
  1. Si vous voulez mettre un nom de classe sur la nav tapez nav.main-nav>ol>li*5. Faites CTRL+Z.
  2. Si maintenant vous voulez placer un id sur vos li tapez nav.main-nav>ol>li#menu*5. Mais attention ici ça n'est pas suffisant car vos id sont tous identiques. Faites CTRL+Z.
  3. Pour incrémenter automatiquement vos id ajouter -$ et tapez nav.main-nav>ol>li#menu-$*5.
Utiliser Emmet avec Sublime Text Exemple 4
  1. Vous pouvez incrémenter en utilisant un autre format. Tapez nav.main-nav>ol>li#menu-$$*5.
  2. Maintenant je remplie mes li avec un lien plus un paragraphe nav.main-nav>ol>li#menu-$*5>a+p (* deux sur l'illustration).
Utiliser Emmet avec Sublime Text Exemple 5
  1. Maintenant si je veux ajouter une section sous ma navigation il me faut mettre des parenthèses autour du premier membre de l'abréviation (nav.main-nav>ol>li#menu$*5>a+p)+section.
Utiliser Emmet avec Sublime Text Exemple 6

#3 Le wrapper Emmet open

L'outil pour envelopper de texte est appelé un wrapper en anglais.

  1. Effacez ce qu'il y a dans le body puis tapez trois lignes pommes, poires et oranges.
  2. Sélectionnez la zone et placer les curseurs multiple CTRL+SHIFT+L.
  3. Appelez le wrapper Emmet avec CTRL+SHIFT+G.
Utiliser le wrapper Emmet avec Sublime Text Exemple 1
  1. Dans la fenêtre du wrapper changez le div en li.
  2. Remarquez que la zone de code reste sous le contrôle de l'abréviation Emmet. Ajoutez #fruit-$$ puis RETURN pour fermer le wrapper.
Utiliser le wrapper Emmet avec Sublime Text Exemple 2
  1. Maintenant nous voulons placer le ul et pour cela il faut sélectionner toute la zone puis appelez à nouveau le wrapper CTRL+SHIFT+G.
  2. Tapez ul dans la zone du wrapper puis RETURN.
Utiliser le wrapper Emmet avec Sublime Text Exemple 3

#4 Travailler avec Emmet en CSS open

Pour coder une définition CSS il suffit de taper les premières lettres de chaque mot du couple propriété : valeur. Vous aurez une liste de propositions et vous en choisirez une dedans.

  1. Créez un nouveau fichier et vous le sauvegardez avec l'extension CSS.
  2. Créez la classe main.
  3. Vous voulez coder un text-align:center vous allez taper tac soit le t de text le a de align et le c de center. Il vous suffit d'appuyer sur RETURN car c'est la première proposition.
Utiliser Emmet en CSS Etape 1
  1. Tapez tdn RETURN pour text-decoration:none;
  2. Tapez tdu RETURN pour text-decoration:underline;
  3. Tapez db RETURN pour display:block;
  4. Tapez dib RETURN pour display:inline-block;
  5. Tapez di RETURN et aller chercher la proposition display:inline;
Utiliser Emmet en CSS Etape 2

Comment rentrer des valeurs numériques par exemple 10px pour 10 pixels ou 1em ou 15%.

  1. Tapez p10+TAB.
  2. Tapez p10-20+TAB.
  3. Tapez p10-15-20-25+TAB.
Utiliser Emmet en CSS Etape 3
  1. Tapez mr10+TAB.
  2. Tapez ml10+TAB.
  3. Tapez mt10+TAB.
  4. Tapez mb10+TAB.
  5. Tapez w85p+TAB.
  6. Tapez fz2em+TAB.
Utiliser Emmet en CSS Etape 4

#5 Les préfixes vendeurs pris en charge par Emmet open

  1. Tapez fdr+RETURN. Vous constatez que les préfixes vendeurs sont intégrés.
  2. Tapez ai+RETURN.
Utiliser Emmet et les préfixes vendeurs en CSS