体育外围网
Earlier this year, I shared the
HTML boilerplate
[2]
I like to use when starting new web projects with line-by-line explanations on my blog. It’s a collection of mostly
tags and attributes I usually use on every website I build. Until recently, I would just copy and paste the boilerplate whenever I needed it, but I’ve decided to improve my workflow by adding it as a snippet to
VS Code
[3]
— the editor of my choice.
Snippets And Abbreviations In Visual Studio Code
VS Code comes built-in with custom user snippets [4] and HTML and CSS snippets and abbreviations [5] provided by Emmet [6] .
For example, if you type
p>a{Sign Up}
in an HTML document and press
Enter
or
Tab
, Emmet will turn it into the following markup:
Note : Visit the Emmet docs [7] to learn how to use the abbreviation syntax [8] .
If we need this specific abbreviation regularly, we can save it as a snippet to improve our workflow even more.
{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
Now we can type
signup
and press
Enter
or
Tab
and we’ll get the same result. I’ll explain how to create snippets in the
next section
[9]
.
Emmet comes with
a bunch of HTML snippets
[10]
by default. For example,
!
creates the basic structure of an HTML document.
Document
That’s great, but if we want to adapt this snippet by removing or adding elements and attributes, we have to overwrite it and create our own snippet.
Creating And Overwriting Snippets
If we want to create our own Emmet snippets or overwrite existing ones in VS Code, the following steps are necessary:
-
Create a
snippets.json
file, add this basic JSON structure and save it somewhere on your hard disk.
{ "html": { "snippets": { } }, "css": { "snippets": { } } } -
Open the VS Code settings (Code → Preferences → Settings) and search for “Emmet Extensions Path”.
-
Click “Add Item”, enter the path to the folder where you’ve saved the
snippets.json
file you’ve created earlier and press “OK”.
That’s it. Now we’re ready to create snippets by adding properties to the
html
and
css
objects where the
key
is the name of the snippet and the
value
an abbreviation or a string.
Some Of My Custom HTML Snippets
Before we dive deep into snippet creation and I show you how I created a snippet for my HTML boilerplate, let’s warm up first with some small, but useful snippets I’ve created, as well.
Lazy Loading
Out of the box, there’s an
img
abbreviation, but there’s none for lazily loaded images. We can use the default abbreviation and just add the additional attributes and attribute values we need in square brackets.
{ "html": { "snippets": { "img:l": "img[width height loading='lazy']" } } }
img:l
+
Enter
/
Tab
now creates the following markup:
![]()
Page
Most pages I create consist of
,
and
landmarks and an
. The custom
page
abbreviation lets me create that structure quickly.
"snippets": { "page": "header>h1^main+footer{${0:©}}" }
page
+
Enter
/
Tab
creates the following markup:
That abbreviation is quite long, so let’s break it down into smaller bits.
Breakdown
Create an
element and a child
.
header>h1
Move up, back to the level of the
, and create a
that follows
.
^main+footer
Set the final tab stop within the
and set the default text to
©
.
{${0:©}}
Navigation
The abbreviation
nav
just creates a
start and end tag by default, but what I usually need is a
with a nested
,
elements and links (
). If there are multiple
elements on a page, they should also be labeled, for example by using
aria-label
.
"nav": "nav[aria-label='${1:Main}']>ul>(li>a[aria-current='page']{${2:Current Page}})+(li*3>a{${0:Another Page}})"
That looks wild, so let’s break it down again.
Breakdown
We start with a
element with an
aria-label
attribute and a nested
.
${1:Main}
populates the attribute with the text “Main” and creates a tab stop at the attribute value by moving the cursor to it and highlighting it upon creation.
nav[aria-label='${1:Main}']>ul
Then we create four list items with nested links. The first item is special because it marks the active page using
aria-current="page"
. We create another tab stop and populate the link with the text “Current Page”.
(li>a[aria-current='page']>{${2:Current Page}})
Finally, we add three more list items with links and the link text “Another page”.
(li*3>a>{${0:Another Page}})
Before our adaptations, we got this:
<-- Before: nav + TAB/Enter -->
Now we get this:
<-- After: nav + TAB/Enter -->
Style
The default
style
abbreviation only creates the
New Document