Dans cet article, Manuel explique pourquoi Emmet est l'un de ses outils de productivité préférés pour l'écriture HTML et CSS, et comment vous pouvez créer des extraits Emmet personnalisés dans Visual Studio Code pour vous aider à améliorer encore plus vos flux de travail frontaux.

Plus tôt cette année, j'ai partagé le HTML passe-partout que j'aime utiliser au démarrage de nouveaux projets web avec des explications ligne par ligne sur mon blog. C'est une collection de balises et d'attributs principalement que j'utilise habituellement sur chaque site Web que je crée. Jusqu'à récemment, je ne faisais que copier et coller le passe-partout chaque fois que j'en avais besoin, mais j'ai décidé d'améliorer mon flux de travail en l'ajoutant en tant qu'extrait de code à VS Code — l'éditeur de mon choix.

Snippets And Abbreviations In Visual Studio Code

VS Code est intégré à des user snippets et HTML et CSS snippets personnalisés. et les abréviations fournies par Emmet.

Par exemple, si vous saisissez p>a{Sign Up} dans un document HTML et appuyez sur Entrée ou TabEmmet le transformera en le balisage suivant :

Inscription

Note : Visitez la Emmet docs pour apprendre à utiliser le syntaxe des abréviations.

Si nous avons régulièrement besoin de cette abréviation spécifique, nous pouvons l'enregistrer en tant qu'extrait pour améliorer encore plus notre flux de travail.[19659016]{
"html": {
"extraits": {
"signup": "p>a{S'inscrire}"
}
}
}

Maintenant, nous pouvons taper signup et appuyer sur Enter ou Tab et nous obtiendrons le même résultat. Je vais expliquer comment créer des extraits dans la section suivante.

Emmet est livré avec un tas d'extraits HTML par défaut. Par exemple, ! crée la structure de base d'un document HTML.

  
  
  
  


  



C'est bien, mais si nous voulons adapter cet extrait en supprimant ou en ajoutant des éléments et des attributs, nous devons l'écraser et créer notre propre extrait.
Créer et écraser des extraits
Si nous voulons créer le nôtre Emmet snippets ou écrasez ceux existants dans VS Code, les étapes suivantes sont nécessaires :

Créez un fichier snippets.jsonajoutez cette structure JSON de base et enregistrez-la quelque part sur votre disque dur.
{
  "html": {
    "extraits": {
    }
  },
  "css": {
    "extraits": {
    }
  }
}


Ouvrez les paramètres du code VS (Code → Préférences → Paramètres) et recherchez « Emmet Extensions Path ».


    


Cliquez sur « Ajouter un élément », entrez le chemin vers le dossier où vous avez enregistré le fichier snippets.json que vous avez créé précédemment et appuyez sur "OK".


    



C'est tout. Nous sommes maintenant prêts à créer des extraits en ajoutant des propriétés aux objets html et css où la key est le nom de l'extrait et la valeur   une abréviation ou une chaîne.
Certains de mes extraits HTML personnalisés
Avant de nous plonger dans la création d'extraits de code et de vous montrer comment j'ai créé un extrait pour mon code HTML standard, préparons d'abord quelques petits, mais j'ai également créé des extraits utiles.
Lazy Loading
Out of the box, il y a une abréviation imgmais il n'y en a pas pour les images chargées paresseusement. Nous pouvons utiliser l'abréviation par défaut et simplement ajouter les attributs supplémentaires et les valeurs d'attribut dont nous avons besoin entre crochets.
{
  "html": {
    "extraits": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

img:l + Entrée/Tab crée désormais le balisage suivant :
Page
La plupart des pages que je crée se composent de 
  et 
  repères et d'un 
. L'abréviation personnalisée page me permet de créer cette structure rapidement.
"snippets": {
  "page": "header>h1^main+footer{${0:©}}"
}

page + Entrée/Tab crée le balisage suivant :

  





Cette abréviation est assez longue, décomposons-la donc en plus petits morceaux.
Breakdown
Créez un élément 
 et un enfant 
.
header>h1

 Remontez, revenez au niveau du 
et créez un 
  qui suit 
.
^main+footer

Définissez le dernier taquet de tabulation dans 

Breakdown
Certains caractères (par exemple $*{ ou }) doivent être échappés en utilisant \.
style>{\* { box-sizing: border-box; \}}

n crée un saut de ligne et ${1:*} place le premier taquet de tabulation sur le sélecteur *.
{n$ {1:*}:focus \{${2 : contour : 2px rouge solide ; }\}}

Très bien, assez d'échauffement. Créons des extraits complexes. Au début, je voulais créer un seul extrait pour mon passe-partout, mais j'ai créé trois abréviations qui répondent à des besoins différents.
Boilerplate Small
Ceci est un passe-partout pour des démos rapides, il crée ce qui suit :

Site de base structure,
viewport balise meta,
Page title,


 element,
A 

.


{
  "!": "{}+html[lang=${1}${lang}]>(head>meta:utf+meta:vp+{}+title{${2:Nouveau document}}+{}+style)+body>(h1 >{${3 : Nouveau document}})+{${0}}"
}


Breakdown
Une chaîne avec le doctype :
{}

 L'élément   avec un attribut lang. La valeur de l'attribut lang est une variable que vous pouvez modifier dans les paramètres du code VS (Code → Préférences → Paramètres).
html[lang=${1}${lang}]

Vous pouvez modifier le langage naturel par défaut de la page en recherchant des "variables emmet" dans les paramètres de VS Code et en modifiant la variable lang. Vous pouvez également ajouter vos variables personnalisées ici. 

    

 Le   comprend le  jeu de caractères  balise meta, balise meta viewportbalise  et 



  
 Nouveau document
  



 Pour moi, c'est la configuration de débogage minimale parfaite. 
 Boilerplate Medium
 Bien que j'utilise le premier passe-partout uniquement pour des démos rapides, le deuxième passe-partout peut être utilisé pour des pages complexes. L'extrait crée les éléments suivants :

Structure du site de base,
balise méta viewport,
Titre de la page,
.no-js/.js classes, 
 Feuilles de style d'écran et d'impression externes, 
description et theme-color balise meta,
Structure de la page.


{
  "!!": "{}+html[lang=${1}${lang}].no-js>{ }+(head>meta:utf+meta:vp+{}+title{${1:🛑 Change moi} }+{}+(script[type="module"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[19659148]+{ }+méta[name="theme-color"][content="${2:#FF00FF}"])+corps>page"
}


Ouais, je sais, ça ressemble à du charabia. Disséquons-le.
Breakdown
Le doctype et l'élément racine sont comme dans le premier exemple, mais avec une classe supplémentaire no-js et un commentaire qui me rappelle pour modifier l'attribut langsi nécessaire.
{}+html[lang=${1}${lang}].no-js>{ }

L'extension TODO Highlight fait vraiment ressortir le commentaire.

    

L' inclut la balise meta charsetBalise méta  viewport . {} crée une nouvelle ligne.
(head>meta:utf+meta:vp+{}+title{${1:🛑 Change me}}+{}

 Un script avec une ligne de JavaScript. Je  coupe la moutarde  au support du module JS. Si un navigateur prend en charge les modules JavaScript, cela signifie qu'il s'agit d'un navigateur prenant en charge le JavaScript moderne (par exemple, les modules, la syntaxe ES 6, l'extraction, etc.). J'envoie la plupart des JS uniquement à ces navigateurs et j'utilise la classe js dans CSS, si le style d'un composant est différent, lorsque JavaScript est actif.

(script[type="module"]>{document. documentElement.classList.replace('no-js', 'js');})+{}


 Deux   éléments ; le premier renvoie à la feuille de style principale et le second à une feuille de style d'impression.
link:css+link:print+{}

La description de la page :
meta[name="description"][content="${2:🛑 Change me (up to ~155 characters)}"]+{ }

La balise meta theme-color :
meta[name="theme-color"][content="${2:#FF00FF}"])

L'élément body et la structure de base de la page :
body>page

Le passe-partout final ressemble à ceci :



 

  
  
  
  
  
  
  
  
  
  
  
   
  


  

    

  
  

  




Full Boilerplate
Le passe-partout complet est similaire au deuxième passe-partout ; les différences sont des balises meta supplémentaires et une balise script.
L'extrait de code crée les éléments suivants :

Structure de base du site,
balise meta viewport,[19659106]Titre de la page,
js/no-js classes,
Feuilles de style écran et impression externes,
description et balises meta open graph,
thème -color balise meta,
balise  canonique,
balises Favicon,
Structure de page,
<script> balise.


{
  "!!!": "{}+html[lang=${1}${lang}].no-js>{ }+(head>meta:utf+meta:vp+{}+title{${1:🛑 Change moi }}+{}+(script[type="module"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[19659193]+meta[name="description"][content="${2:🛑 Change me (up to ~155 characters)}"]+meta[property="og:description"][content="${2:🛑 Change me (up to ~155 characters)}"]+meta[property="og:image"][content="${1:https://}"]+meta[property="og:locale"][content="${1:en_GB}"]+meta[property="og:type"][content="${1:website}"]+meta[name="twitter:card"][content="${1:summary_large_image}"]+meta[property="og:url"][content="${1:https://}"]+{ }+{}+lien[19659201]+{ }+{}+lien[rel="icon"][href="${1:/favicon.ico}"]+lien[rel="icon"][href="${1:/favicon.svg}"][type="image/svg+xml"]+lien[rel="apple-touch-icon"][href="${1:/apple-touch-icon.png}"]+lien[rel="manifest"][href="${1:/my.webmanifest}"]+{}+meta[name="theme-color"][content="${2:#FF00FF}"])+corps>page+{}+script:src[type="module"]"
}


Cet extrait de code incroyablement long crée ceci :



 

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   
  
  
   
  
  
  
  
  
  
  


  

    

  
  

  
  
  




Extraits CSS personnalisés
Par souci d'exhaustivité, voici quelques extraits CSS que j'utilise.
Débogage
Cet extrait crée un contour rouge de 5px avec un décalage personnalisé. 
"debug": "outline : 5px solide rouge ;noutline-offset : -5px ;"

Centrage
Un extrait qui définit display sur flex et centre ses éléments enfants.
"center": "display: flex;njustify-content: center;nalign-items : centre;"

Sticky
Définit la propriété position sur stickyavec deux taquets de tabulation aux propriétés top et left.[19659034]"sticky": "position : sticky ;ntop : ${1:0} ;nleft : ${2:0} ;"



User Snippets
Au début de cet article, j'ai mentionné que VS Code fournit également des extraits personnalisés. La différence avec les extraits d'Emmet est que vous ne pouvez pas utiliser d'abréviations, mais vous pouvez également définir des taquets de tabulation et utiliser des variables internes.
Comment tirer le meilleur parti des extraits d'utilisateurs pourrait être un sujet pour un autre article, mais voici un exemple d'extrait de code CSS personnalisé que j'ai défini :

"Visually hidden": {
"préfixe": "vh",
"corps": [
  ".u-vh {",
  "  position: absolute;n  white-space: nowrap;n  width: 1px;n  height: 1px;n  overflow: hidden;n  border: 0;n  padding: 0;n  clip: rect(0 0 0 0);n  clip-path: inset(50%);n  margin: -1px;",
  "}"
],
"description": "Une classe utilitaire pour le masquage accessible par lecteur d'écran."
}


Cet extrait ne crée pas seulement des règles CSS, mais tout un bloc de déclaration lorsque nous tapons vh et appuyons sur Enter ou Tab.
. u-vh {
  position : absolue ;
  espace blanc : nowrap ;
  largeur : 1px ;
  hauteur : 1px ;
  débordement caché;
  bordure : 0 ;
  remplissage : 0 ;
  clip : rect(0 0 0 0);
  chemin de détourage : incrustation (50 %);
  marge : -1px ;
}

Final Words
Cela prend un certain temps pour créer ces extraits, mais cela en vaut la peine car vous pouvez personnaliser Emmet selon vos préférences personnelles, automatiser les tâches répétitives et gagner du temps à long terme.
J'adorerais pour voir quels extraits vous utilisez, alors partagez-les avec nous dans les commentaires. Si vous souhaitez utiliser mes paramètres, vous pouvez trouver mon final snippets.json sur GitHub.
Resources

  (vf, il)






 Le meilleur outil 2023 pour ta croissance Instagram ! 



  










Source link