------------------------------
Title: Emmet: How Lazy Developers Write HTML
[content]
Or, How to Avoid Doing ThisTo 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……or use an exclamation point to create the basics of an HTML document……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…A Brief DigressionIf 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 right here. Now, with that out of the way…What Else Can You Do With Emmet?Let’s start simply…Emmet supports CSS selector syntax for IDs and classes, so it’s trivial to add those to your tags:But we can save at least one more keystroke here, since Emmet supports chaining tags together using some simple syntax:+  -  next tag is a sibling>  -  next tag is a child^  -  climb back up a levelUsing the multiplication operator “*” does just what you’d think, but you can enhance it with “$” to produce a numbered series of attributes: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:Need some placeholder text? Emmet’s got all the lorem ipsum you need:And just to simplify your life a little more, it also sets your next tab points wherever text might need to be inserted: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.Emmet DocumentationEmmet Cheat Sheet
[/content]

Author: Kevin Randles
PublishedDate: 2018-02-06
Category: Technology
NewsPaper: Kevin Randles on Medium
Tags: flatiron-school, emmet, web-development