Editing article

Title

Summary

Content

<figure><img alt="" src="https://cdn-images-1.medium.com/max/451/1*UWTS9bIfU-Q_Bs5Z78gZOw.png" /><figcaption>Or, How to Avoid Doing This</figcaption></figure>To a new or aspiring software developer, the extent of the modern text editor can be overwhelming. I just went through all the user settings in VS Code while procrastina…I mean, thinking about how to start this blog post, and there are 475 of them! I can recall looking at the same list of settings when I wanted to change my font a few months ago, and my brain just turned itself off after the first page or two. Well, I made it through the list this time, and found a few things I’d like to behave differently, and I’m reasonably sure I know what 90% of those settings do now. Progress!Similarly, when I settled on VS Code as my editor of choice, there were a few features that stood out as immediately useful, and a lot of things I didn’t quite understand, and the months since then have been a gradual discovery of what Code has to offer. My most recent revelation was Emmet.I knew about text snippets, and had even made a few of my own to spare myself some tedious typing while working with Ruby, so I just assumed that, when I type “p” in an HTML document, then hit Tab to accept the suggestion and create a pair of tags, like so…<figure><img alt="" src="https://cdn-images-1.medium.com/max/271/1*JzPdyum4ZSPeUCUdW3Binw.gif" /></figure>…or use an exclamation point to create the basics of an HTML document…<figure><img alt="" src="https://cdn-images-1.medium.com/max/673/1*-yqZ9X55R64fAuXBhvRItA.gif" /></figure>…this was just a simple shortcut in action.But as I discovered recently, this is Emmet in action, and it can do a lot more than save you the effort of typing a few angle brackets, but first…<h3>A Brief Digression</h3>If you’re using VS Code, you can skip this section— you already have Emmet. If not, it’s available as an extension for a somewhat absurd number of text editors, and you can probably find yours <a href="https://emmet.io/download/">right here</a>. Now, with that out of the way…<h3>What Else Can You Do With Emmet?</h3>Let’s start simply…Emmet supports CSS selector syntax for IDs and classes, so it’s trivial to add those to your tags:<figure><img alt="" src="https://cdn-images-1.medium.com/max/327/1*2bFfzFIpDTyYIzrkOwh5qA.gif" /></figure>But we can save at least one more keystroke here, since Emmet supports chaining tags together using some simple syntax:<pre>+ - next tag is a sibling &gt; - next tag is a child ^ - climb back up a level</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/537/1*7bJPQR6BOzX7S1wdEdpQUA.gif" /></figure>Using the multiplication operator “*” does just what you’d think, but you can enhance it with “$” to produce a numbered series of attributes:<figure><img alt="" src="https://cdn-images-1.medium.com/max/272/1*FT3ly0GL_bM7wl40LDbfgA.gif" /></figure>Emmet supports implicit tag names where appropriate, for example, items in lists or rows and columns in tables, or starting a group of tags with a div:<figure><img alt="" src="https://cdn-images-1.medium.com/max/328/1*xrJS0v9BloOKpDvgAZUFFw.gif" /></figure>Need some placeholder text? Emmet’s got all the lorem ipsum you need:<figure><img alt="" src="https://cdn-images-1.medium.com/max/459/1*yyxi3Oj-kBTG8JS6QcGWOQ.gif" /></figure>And just to simplify your life a little more, it also sets your next tab points wherever text might need to be inserted:<figure><img alt="" src="https://cdn-images-1.medium.com/max/473/1*cDeeHG4U38ScmhZgdhgfMg.gif" /></figure>These are just a few of the HTML shortcuts Emmet offers, without even mentioning the several pages of CSS shortcuts, or customization, or wrapping, or balancing….but that’s all covered in the documentation.<a href="https://docs.emmet.io/">Emmet Documentation</a><a href="https://docs.emmet.io/cheat-sheet/">Emmet Cheat Sheet</a><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=14f29840bc2e" width="1" height="1" alt="">

Author

Link

Published date

Image url

Feed url

Guid

Hidden blurb

--- !ruby/object:Feedjira::Parser::RSSEntry
published: 2018-02-06 18:30:38.000000000 Z
carlessian_info:
 news_filer_version: 2
 newspaper: Kevin Randles on Medium
 macro_region: Technology
entry_id: !ruby/object:Feedjira::Parser::GloballyUniqueIdentifier
 is_perma_link: 'false'
 guid: https://medium.com/p/14f29840bc2e
title: 'Emmet: How Lazy Developers Write HTML'
categories:
- flatiron-school
- emmet
- web-development
content: <figure><img alt="" src="https://cdn-images-1.medium.com/max/451/1*UWTS9bIfU-Q_Bs5Z78gZOw.png"
 /><figcaption>Or, How to Avoid Doing This</figcaption></figure>To a new or aspiring
 software developer, the extent of the modern text editor can be overwhelming. I
 just went through all the user settings in VS Code while procrastina…I mean, thinking
 about how to start this blog post, and there are 475 of them! I can recall looking
 at the same list of settings when I wanted to change my font a few months ago, and
 my brain just turned itself off after the first page or two. Well, I made it through
 the list this time, and found a few things I’d like to behave differently, and I’m
 reasonably sure I know what 90% of those settings do now. Progress!Similarly,
 when I settled on VS Code as my editor of choice, there were a few features that
 stood out as immediately useful, and a lot of things I didn’t quite understand,
 and the months since then have been a gradual discovery of what Code has to offer.
 My most recent revelation was Emmet.I knew about text snippets, and had even
 made a few of my own to spare myself some tedious typing while working with Ruby,
 so I just assumed that, when I type “p” in an HTML document, then hit Tab to accept
 the suggestion and create a pair of tags, like so…<figure><img alt="" src="https://cdn-images-1.medium.com/max/271/1*JzPdyum4ZSPeUCUdW3Binw.gif"
 /></figure>…or use an exclamation point to create the basics of an HTML document…<figure><img
 alt="" src="https://cdn-images-1.medium.com/max/673/1*-yqZ9X55R64fAuXBhvRItA.gif"
 /></figure>…this was just a simple shortcut in action.But as I discovered
 recently, this is Emmet in action, and it can do a lot more than save you the effort
 of typing a few angle brackets, but first…<h3>A Brief Digression</h3>If you’re
 using VS Code, you can skip this section— you already have Emmet. If not, it’s available
 as an extension for a somewhat absurd number of text editors, and you can probably
 find yours <a href="https://emmet.io/download/">right here</a>. Now, with that out
 of the way…<h3>What Else Can You Do With Emmet?</h3>Let’s start simply…Emmet
 supports CSS selector syntax for IDs and classes, so it’s trivial to add those to
 your tags:<figure><img alt="" src="https://cdn-images-1.medium.com/max/327/1*2bFfzFIpDTyYIzrkOwh5qA.gif"
 /></figure>But we can save at least one more keystroke here, since Emmet supports
 chaining tags together using some simple syntax:<pre>+ - next tag is a sibling &gt; - next
 tag is a child ^ - climb back up a level</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/537/1*7bJPQR6BOzX7S1wdEdpQUA.gif"
 /></figure>Using the multiplication operator “*” does just what you’d think,
 but you can enhance it with “$” to produce a numbered series of attributes:<figure><img
 alt="" src="https://cdn-images-1.medium.com/max/272/1*FT3ly0GL_bM7wl40LDbfgA.gif"
 /></figure>Emmet supports implicit tag names where appropriate, for example,
 items in lists or rows and columns in tables, or starting a group of tags with a div:<figure><img
 alt="" src="https://cdn-images-1.medium.com/max/328/1*xrJS0v9BloOKpDvgAZUFFw.gif"
 /></figure>Need some placeholder text? Emmet’s got all the lorem ipsum you need:<figure><img
 alt="" src="https://cdn-images-1.medium.com/max/459/1*yyxi3Oj-kBTG8JS6QcGWOQ.gif"
 /></figure>And just to simplify your life a little more, it also sets your next
 tab points wherever text might need to be inserted:<figure><img alt="" src="https://cdn-images-1.medium.com/max/473/1*cDeeHG4U38ScmhZgdhgfMg.gif"
 /></figure>These are just a few of the HTML shortcuts Emmet offers, without even
 mentioning the several pages of CSS shortcuts, or customization, or wrapping, or
 balancing….but that’s all covered in the documentation.<a href="https://docs.emmet.io/">Emmet
 Documentation</a><a href="https://docs.emmet.io/cheat-sheet/">Emmet Cheat Sheet</a><img
 src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=14f29840bc2e"
 width="1" height="1" alt="">
rss_fields:
- title
- url
- author
- categories
- published
- entry_id
- content
url: https://medium.com/@krandles/emmet-how-lazy-developers-write-html-14f29840bc2e?source=rss-d451d084d34a------2
author: Kevin Randles

Language

Active

Ricc internal notes

Ricc source

Show this article Back to articles