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 :
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.
Document
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 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": {
"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 viewport
balise
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
ettheme-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 lang
si nécessaire.
{}+html[lang=${1}${lang}].no-js>{ }
L'extension TODO Highlight fait vraiment ressortir le commentaire.
L' inclut la balise meta
charset
Balise 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 :
🛑 Change me
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 :
🛑 Change me
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 sticky
avec 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)
Source link