Création d'extraits de code Emmet personnalisés dans le code VS

Publié: 2022-03-10
Résumé rapide ↬ Dans cet article, Manuel explique pourquoi Emmet est l'un de ses outils de productivité préférés pour écrire du HTML et du CSS, et comment vous pouvez créer des extraits Emmet personnalisés dans Visual Studio Code pour vous aider à améliorer encore plus vos workflows frontaux.

Plus tôt cette année, j'ai partagé le passe-partout HTML que j'aime utiliser lors du 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 <head> 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 sous forme d'extrait à VS Code - l'éditeur de mon choix.

Voici une démonstration rapide des extraits personnalisés que j'ai créés.

Extraits de code et abréviations dans Visual Studio Code

VS Code est intégré avec des extraits d'utilisateur personnalisés et des extraits et abréviations HTML et CSS fournis par Emmet.

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

 <p><a href="">Sign Up</a></p>

Remarque : consultez la documentation Emmet pour apprendre à utiliser la syntaxe d'abréviation.

Si nous avons régulièrement besoin de cette abréviation spécifique, nous pouvons l'enregistrer sous forme d'extrait pour améliorer encore plus notre flux de travail.

 { "html": { "snippets": { "signup": "p>a{Sign Up}" } } }

Maintenant, nous pouvons taper signup et appuyer sur Entrée ou Tab et nous obtiendrons le même résultat. J'expliquerai comment créer des extraits dans la section suivante.

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

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

C'est très 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 nos propres extraits Emmet ou écraser ceux existants dans VS Code, les étapes suivantes sont nécessaires :

  1. Créez un fichier snippets.json , ajoutez cette structure JSON de base et enregistrez-le quelque part sur votre disque dur.
     { "html": { "snippets": { } }, "css": { "snippets": { } } }
  2. Ouvrez les paramètres de VS Code (Code → Préférences → Paramètres) et recherchez "Emmet Extensions Path".
  3. Cliquez sur "Ajouter un élément", entrez le chemin d'accès au dossier dans lequel vous avez enregistré le fichier snippets.json que vous avez créé précédemment et appuyez sur "OK".

C'est ça. 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 value une abréviation ou une chaîne.

Certains de mes extraits HTML personnalisés

Avant de plonger profondément dans la création d'extraits et de vous montrer comment j'ai créé un extrait pour mon passe-partout HTML, échauffons-nous d'abord avec quelques extraits petits mais utiles que j'ai également créés.

Chargement paresseux

Hors de la boîte, il y a une abréviation img , mais 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": { "snippets": { "img:l": "img[width height loading='lazy']" } } }

img:l + Enter / Tab crée maintenant le balisage suivant :

 <img src="" alt="" width="" height="" loading="lazy">

Page

La plupart des pages que je crée se composent de repères <header> , <main> et <footer> et d'un <h1> . L'abréviation de page personnalisée me permet de créer cette structure rapidement.

 "snippets": { "page": "header>h1^main+footer{${0:©}}" }

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

 <header> <h1></h1> </header> <main></main> <footer>©</footer>

Cette abréviation est assez longue, alors décomposons-la en petits morceaux.

Panne

Créez un élément <header> et un enfant <h1> .

 header>h1

Remontez, revenez au niveau de <header> et créez un <footer> qui suit <main> .

 ^main+footer

Définissez le taquet de tabulation final dans le <footer> et définissez le texte par défaut sur &copy .

 {${0:©}}

La navigation

L'abréviation nav crée simplement une balise de début et de fin <nav> par défaut, mais ce dont j'ai généralement besoin est un <nav> avec un <ul> imbriqué, des éléments <li> et des liens ( <a> ). S'il y a plusieurs éléments <nav> sur une page, ils doivent également être étiquetés, par exemple en utilisant aria-label .

 "nav": "nav[aria-label='${1:Main}']>ul>(li>a[aria-current='page']{${2:Current Page}})+(li*3>a{${0:Another Page}})"

Cela semble sauvage, alors décomposons-le à nouveau.

Panne

Nous commençons avec un élément <nav> avec un attribut aria-label et un <ul> imbriqué. ${1:Main} remplit l'attribut avec le texte "Main" et crée un taquet de tabulation à la valeur de l'attribut en déplaçant le curseur dessus et en le mettant en surbrillance lors de la création.

 nav[aria-label='${1:Main}']>ul

Ensuite, nous créons quatre éléments de liste avec des liens imbriqués. Le premier élément est spécial car il marque la page active en utilisant aria-current="page" . Nous créons un autre taquet de tabulation et remplissons le lien avec le texte "Page actuelle".

 (li>a[aria-current='page']>{${2:Current Page}})

Enfin, nous ajoutons trois autres éléments de liste avec des liens et le texte du lien "Une autre page".

 (li*3>a>{${0:Another Page}})

Avant nos adaptations, nous avions ceci :

 <-- Before: nav + TAB/Enter --> <nav></nav>

Maintenant, nous obtenons ceci :

 <-- After: nav + TAB/Enter --> <nav aria-label="Main"> <ul> <li><a href="" aria-current="page">Current Page</a></li> <li><a href="">Another Page</a></li> <li><a href="">Another Page</a></li> <li><a href="">Another Page</a></li> </ul> </nav>
Plus après saut! Continuez à lire ci-dessous ↓

Style

L'abréviation de style par défaut crée uniquement la balise de début et de fin <style> , mais généralement, lorsque j'utilise l'élément <style> , je le fais parce que je veux tester ou déboguer rapidement quelque chose.

Ajoutons quelques règles par défaut à la <style> :

 "style": "style>{\\* { box-sizing: border-box; \\}}+{\n${1:*}:focus \\{${2: outline: 2px solid red; }\\} }+{\n${0}}"

Panne

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 au niveau du sélecteur * .

 {\n${1:*}:focus \\{${2: outline: 2px solid red; }\\}}
  • Avant : <style><style>
  • Après :
     <style> * { box-sizing: border-box; }
     *:focus { outline: 2px solid red; } </style>

Bon, assez échauffé. 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.

  1. Petit
  2. Moyen
  3. Plein

Passe-partout petit

Il s'agit d'un passe-partout pour les démonstrations rapides, il crée ce qui suit :

  • Structure de base du site,
  • balise meta viewport ,
  • Titre de la page,
  • élément <style> ,
  • Un <h1> .
 { "!": "{<!DOCTYPE html>}+html[lang=${1}${lang}]>(head>meta:utf+meta:vp+{}+title{${2:New document}}+{}+style)+body>(h1>{${3: New Document}})+{${0}}" }

Panne

Une chaîne avec le doctype :

 {<!DOCTYPE html>}

L'élément <html> 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 la langue naturelle par défaut de la page en recherchant "variables emmet" dans les paramètres de VS Code et en modifiant la variable lang . Vous pouvez également ajouter vos variables personnalisées ici.

Il existe 2 variables par défaut dans VS Code, lang est défini sur en et charset sur UTF-8.

Le <head> inclut la balise meta charset , la balise meta viewport , la balise <title> et la <style> . {} crée une nouvelle ligne.

 (head>meta:utf+meta:vp+{}+title{${2:New document}}+{}+style)

Voyons un premier coup d'œil rapide sur ce que cela nous donne.

 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>New document</title> </head> </html>

Ça a l'air bien, mais l'abréviation meta:utf crée l'ancienne méthode charset pour définir le jeu de caractères et meta:vp crée deux taquets de tabulation dont je n'ai pas besoin car je n'utilise jamais un paramètre différent pour le viewport .

Écrasons ces extraits avant de continuer.

 { "meta:vp": "meta[name=viewport content='width=device-width, initial-scale=1']", "meta:utf": "meta[charset=${charset}]" }

Enfin, l'élément <body> , un <h1> avec le texte par défaut, suivi du dernier taquet de tabulation.

 body>(h1>{${3: New Document}})+{${0}}

Le passe-partout final :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>New document</title> <style> * { box-sizing: border-box; } *:focus { outline: 2px solid red; } </style> </head> <body> <h1> New Document</h1> </body> </html>

Pour moi, c'est la configuration de débogage minimale parfaite.

Passe-partout moyen

Alors que j'utilise le premier passe-partout uniquement pour des démonstrations rapides, le deuxième passe-partout peut être utilisé pour des pages complexes. L'extrait crée ce qui suit :

  • Structure de base du site,
  • balise meta viewport ,
  • Titre de la page,
  • les classes .no-js / .js ,
  • Feuilles de style d'écran et d'impression externes,
  • balise meta description et theme-color ,
  • Structure des pages.
 { "!!": "{<!DOCTYPE html>}+html[lang=${1}${lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{${1: Change me}}+{}+(script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[name=\"description\"][content=\"${2: Change me (up to ~155 characters)}\"]+{<!-- TODO: Change page description --> }+meta[name=\"theme-color\"][content=\"${2:#FF00FF}\"])+body>page" }

Ouais, je sais, ça ressemble à du charabia. Disséquons-le.

Panne

Le doctype et l'élément racine sont comme dans le premier exemple, mais avec une classe no-js supplémentaire et un commentaire qui me rappelle de changer l'attribut lang , si nécessaire.

 {<!DOCTYPE html>}+html[lang=${1}${lang}].no-js>{ }

L'extension TODO Highlight fait ressortir le commentaire.

L'extension met en évidence visuellement certains mots-clés comme TODO.

Le <head> inclut la balise meta charset , la balise meta viewport , <title> . {} 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 qui prend en charge le JavaScript moderne (par exemple, les modules, la syntaxe ES 6, la récupération, 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 <link> ; le premier renvoie à la feuille de style principale et le second à une feuille de style d'impression.

 link:css+link:print+{}

Le descriptif 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 :

 <!DOCTYPE html> <html lang="en" class="no-js"> <!-- TODO: Check lang attribute --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Change me</title> <script type="module"> document.documentElement.classList.replace('no-js', 'js'); </script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> <meta name="description" content=" Change me (up to ~155 characters)"> <!-- TODO: Change page description --> <meta name="theme-color" content="#FF00FF"> </head> <body> <header> <h1></h1> </header> <main></main> <footer>©</footer> </body> </html>

Passe-partout complet

Le passe-partout complet est similaire au deuxième passe-partout; les différences sont des balises meta supplémentaires et une balise de script .

L'extrait crée ce qui suit :

  • Structure de base du site,
  • balise meta viewport ,
  • Titre de la page,
  • classes js / no-js ,
  • Feuilles de style d'écran et d'impression externes,
  • balises meta description et open graph,
  • balise meta theme-color ,
  • balise canonique <link> ,
  • Balises favicons,
  • Structuration des pages,
  • balise < script> .
 { "!!!": "{<!DOCTYPE html>}+html[lang=${1}${lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{${1: Change me}}+{}+(script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[property=\"og:title\"][content=\"${1: Change me}\"]+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://}\"]+{<!-- TODO: Change social media stuff --> }+{}+link[rel=\"canonical\"][href=\"${1:https://}\"]+{<!-- TODO: Change canonical link --> }+{}+link[rel=\"icon\"][href=\"${1:/favicon.ico}\"]+link[rel=\"icon\"][href=\"${1:/favicon.svg}\"][type=\"image/svg+xml\"]+link[rel=\"apple-touch-icon\"][href=\"${1:/apple-touch-icon.png}\"]+link[rel=\"manifest\"][href=\"${1:/my.webmanifest}\"]+{}+meta[name=\"theme-color\"][content=\"${2:#FF00FF}\"])+body>page+{}+script:src[type=\"module\"]" }

Cet extrait incroyablement long crée ceci :

 <!DOCTYPE html> <html lang="en" class="no-js"> <!-- TODO: Check lang attribute --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Change me</title> <script type="module"> document.documentElement.classList.replace('no-js', 'js'); </script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> <meta property="og:title" content=" Change me"> <meta name="description" content=" Change me (up to ~155 characters)"> <meta property="og:description" content=" Change me (up to ~155 characters)"> <meta property="og:image" content="https://"> <meta property="og:locale" content="en_GB"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:url" content="https://"> <!-- TODO: Change social media stuff --> <link rel="canonical" href="https://"> <!-- TODO: Change canonical link --> <link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/my.webmanifest"> <meta name="theme-color" content="#FF00FF"> </head> <body> <header> <h1></h1> </header> <main></main> <footer>©</footer> <script src="" type="module"></script> </body> </html>

Extraits CSS personnalisés

Par souci d'exhaustivité, voici quelques-uns des extraits CSS que j'utilise.

Débogage

Cet extrait crée un contour rouge de 5 pixels avec un décalage personnalisé.

 "debug": "outline: 5px solid red;\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: center;"

Collant

Définit la propriété position sur sticky , avec deux taquets de tabulation en top et à left de la propriété.

 "sticky": "position: sticky;\ntop: ${1:0};\nleft: ${2:0};"
Une démonstration des 3 extraits CSS appliqués à un élément div .

Extraits d'utilisateur

Au début de cet article, j'ai mentionné que VS Code fournit également des extraits personnalisés. La différence avec les extraits 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 utilisateur pourrait faire l'objet d'un autre article, mais voici un exemple d'extrait CSS personnalisé que j'ai défini :

 "Visually hidden": { "prefix": "vh", "body": [ ".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": "A utility class for screen reader accessible hiding." }

Cet extrait ne crée pas seulement des règles CSS, mais un bloc de déclaration complet lorsque nous vh et appuyons sur Enter ou Tab .

 .u-vh { position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px; }

Derniers mots

La création de ces extraits prend un certain temps, 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'aimerais voir quels extraits vous utilisez, alors partagez-les avec nous dans les commentaires. Si vous souhaitez utiliser mes paramètres, vous pouvez trouver mes derniers extraits.json sur GitHub.

Ressources

  • Extraits de code CSS Emmet par défaut
  • Extraits de code HTML Emmet par défaut
  • Aide-mémoire d'Emmet
  • Emmet dans les documents VS Code