À propos de l'auteur

Manuel Matuzović est un développeur front-end de Vienne passionné par l'accessibilité, l'amélioration progressive, les performances et les normes Web. Il est l'un des…

En savoir plus sur

Manuel
↬

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 :

1. Créez un fichier snippets.jsonajoutez cette structure JSON de base et enregistrez-la quelque part sur votre disque dur.

   {
     "html": {
       "extraits": {
       }
     },
     "css": {
       "extraits": {
       }
     }
   }
   

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

   

3. 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 

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