PROFESSIONALLY OPTIMIZED WEBSITES STARTING AT $995
Our team of 体育平台app Web Design gurus are standing by to assist you achieve your online marketing goals.

+1-971-599-3330

info@seowebdesignllc.com

REQUEST QUOTE
体育平台app Web Design, LLC aims to improve business by delivering effective solutions based on innovative technologies and professional designs. Discover the variety of services we offer and convince yourself on the basis of the latest works that we've done. We love building fresh, unique and usable websites optimized specifically for your niche.

Responsive Web Design

体育平台app / SEM / Social Media

Conversion Rate Optimization

Email Marketing

Online Presence Analysis

Web Hosting
Top
体育平台app Web Design  /  Web Design  /  Creating Custom Emmet Snippets In VS Code

体育外围网

About The Author

Manuel Matuzović is a frontend developer from Vienna who’s passionate about accessibility, progressive enhancement, performance, and web standards. He’s one of … More about Manuel ↬ [1]

In this article, Manuel explains why Emmet is one of his favorite productivity tools for writing HTML and CSS, and how you can create custom Emmet snippets in Visual Studio Code to help you improve your front-end workflows even more.

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.

Here’s a quick demo of the custom snippets I’ve created.

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:

																		
																		

Sign Up

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:

  1. Create a snippets.json file, add this basic JSON structure and save it somewhere on your hard disk.
    															
    															{ "html": { "snippets": { } }, "css": { "snippets": { } } }
    														
    													
  2. Open the VS Code settings (Code → Preferences → Settings) and search for “Emmet Extensions Path”.
  3. 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

Full Boilerplate

The full boilerplate is similar to the second boilerplate; the differences are additional meta tags and a script tag.

The snippet creates the following:

  • Basic site structure,
  • viewport meta tag,
  • Page title,
  • js / no-js classes,
  • External screen and print stylesheets,
  • description and open graph meta tags,
  • theme-color meta tag,
  • canonical tag,
  • Favicon tags,
  • Page structure,
  • < script> tag.
		
		{ "!!!": "{}+html[lang=${lang}].no-js>{ }+(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://}"]+{ }+{}+link[rel="canonical"][href="${1:https://}"]+{ }+{}+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"]" }
	

This incredibly long snippet creates this:

		
		
		
			
			
				
				
				
				
					🛑 Change me
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
			
			
				

©

Custom CSS Snippets

For the sake of completeness, here are some of the CSS snippets I’m using.

Debugging

This snippet creates a 5px red outline with a custom offset.

	
	"debug": "outline: 5px solid red;noutline-offset: -5px;"

Centering

A snippet that sets display to flex, and centers its child items.

	
	"center": "display: flex;njustify-content: center;nalign-items: center;"

Sticky

Sets the position property to sticky , with two tab stops at the top and left property.

	
	"sticky": "position: sticky;ntop: ${1:0};nleft: ${2:0};"

A demonstration of all 3 CSS snippets applied to a div element.

User Snippets

At the beginning of this article, I mentioned that VS Code also provides custom snippets. The difference to Emmet snippets is that you can’t use abbreviations, but you can also define tab stops and make use of internal variables.

How to get the best out of user snippets could be a topic for another article, but here’s an example of a custom CSS snippet I’ve defined:

		
		"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." }
	

This snippet doesn’t just create CSS rules, but a whole declaration block when we type vh and press Enter or 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; }

Final Words

It takes some time to create these snippets, but it’s worth the effort because you can customize Emmet to your personal preferences, automate repetitive tasks and save time in the long run.

I’d love to see which snippets you use, so please share them with us in the comments. If you want to use my settings, you can find my final snippets.json [17] on GitHub.

Resources

Smashing Editorial (vf, il)

References

  1. ^ More about Manuel ↬ (www.smashingmagazine.com)
  2. ^ HTML boilerplate (www.matuzo.at)
  3. ^ VS Code (code.visualstudio.com)
  4. ^ user snippets (code.visualstudio.com)
  5. ^ HTML and CSS snippets and abbreviations (docs.emmet.io)
  6. ^ Emmet (emmet.io)
  7. ^ Emmet docs (docs.emmet.io)
  8. ^ abbreviation syntax (docs.emmet.io)
  9. ^ next section (www.smashingmagazine.com)
  10. ^ a bunch of HTML snippets (github.com)
  11. ^ Smashing Email Newsletter (www.smashingmagazine.com)
  12. ^ Small (www.smashingmagazine.com)
  13. ^ Medium (www.smashingmagazine.com)
  14. ^ Full (www.smashingmagazine.com)
  15. ^ TODO Highlight (marketplace.visualstudio.com)
  16. ^ cutting the mustard (fettblog.eu)
  17. ^ final snippets.json (gist.github.com)

Powered by WPeMatico

smashmag@seowdllc.com

Smashing Magazine is a website and eBook publisher that offers editorial content and professional resources for web developers and web designers.

英雄联盟竞猜视频比分 江湖电竞(南宁)赛表赛事 安博电竞查询直播网站 英雄联盟竞猜直播比赛网址 熊猫电竞排名今日 泛亚电竞赛事手游(泛亚电竞注册官网v6.3 IOS版)