Supercharge Your Web Dev Workflow With Emmet

Read Time:3 Minute, 45 Second

Emmet is a tool that allows you to quickly generate HTML and CSS code by using abbreviations and expanding them into full code.

It is built into many popular code editors, including Visual Studio Code, Sublime Text and Atom.

Today, let’s take a look at how to use Emmet to boost your web development speed. I’ll use VSCode as my editor, but feel free to pick up your favorite. You’ll need to check out editor-specific docs of Emmet for the configuration part of the post if you choose something other than VSCode, but that should not be a problem for you to follow along.

Table of Contents


Example Usage for HTML

The best part of coding HTML involves writing (deeply) nested structures with attributes such as classes and ids attached to tags. Emmet can help us generating highly complicated HTML structures with a single line of code.

To achieve that, Emmet use concise syntax to represent:

  • Relationships between tags
  • Attributes attached to tags
  • Repeating snippets

Represent relationships

One of the most common use cases of Emmet is to generate HTML tag hierarchy. Here is a quick example:

Supercharge Your Web Dev Workflow With Emmet

Emmet generating nested tags with > mark

We use > to represent parent-child relationship in Emmet. To represent sibling-sibling relationship, we use +:

Use + to generate sibling tags

Emmet generating sibling tags with + mark

We can even climb up from current level to upper level using ^:

Climb up to upper level with ^ mark

Climb up to upper level with ^ mark

Here, we generated a p with two spans inside and a ul at the same level as the p.

Please note we can also achieve the same result by using grouping:

Same result by using grouping

Same result by using grouping

We grouped the p and its children in a pair of parentheses and replaced climb-up mark (^) with sibling mark (+) for ul (it seems same structure can still be correctly generated even if you don’t replace ^ with + here, but for semantic reasons, I think + is more appropriate in this case).

Represent attributes

HTML tags usually have attributes such as classes and ids. In Emmet, we use .classname and #id to represent classes and ids respectively:

Specify class with dot and id with sharp mark

Specify class with dot and id with sharp mark

It’s as easy as that. For abbrevations for other attributes, check out the official Emmet cheat sheet.

Represent Repeating Snippets

Repeating structures usually take the most time to write and fortunately with Emmet, such snippets cannot be generated more easily:

Generate repeating tags with asterisk mark

Generate repeating tags with asterisk mark

To generate auto-incrementing ids, for example, we can combine asterisk with $ (dollar sign):

Generate auto-incrementing ids with * and $

Generate auto-incrementing ids with * and $

Here is a more advanced example demonstrating auto-incrementing ids along with auto-incrementing text:

Generate auto-incrementing ids and text

Generate auto-incrementing ids and text

Example Usage for CSS

Emmet makes coding with CSS just as easy as HTML. Each CSS rule has corresponding abbreviations and once you understand the patterns of abbreviations, you don’t need to remember them:

Generating CSS code is as easy using Emmet

Generating CSS code is as easy using Emmet

Please note that,

  • I wrote db, for example, instead of d:b as the cheat sheet suggests. It seems either way works, although it’s not clear why. So choose the convention that suits you best.
  • While the cheat sheet does not mention, you can expand shorthand CSS rules, e.g. margin: 10px auto with m10:a or m:10:a as I did in the screenshot above.

Advanced Configuration

While Emmet is available by default for common file types such as html, slim, css and sass, you’ll need to manually enable it if you’re working on a different file type where Emmet is not activated by default.

For example, Emmet is not enabled by default for Ruby on Rails view files with the .erb extension. If I want to write HTML code in these files, I can update the emmet.includeLanguages setting in my VSCode’s settings.json file like this:

Enter fullscreen mode Exit fullscreen mode

The key ("erb") on the left side is the target file type where I want Emmet to be available while the value ("html") is a file type that Emmet already supports. See VSCode docs on this for more information.


Conclusion

In this post, we took a quick look at some of the most common scenarios where Emmet can help us write HTML and CSS code times faster.

As I said, there’s more Emmet can do for us than I demonstrated here. It has an amazing, super comprehensive cheat sheet which you can use as a reference.

Source: https://dev.to/jessewei/supercharge-your-web-dev-workflow-with-emmet-3cg4

WP Ad Inserter plugin for WordPress

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
Git in 10 mins Previous post Git in 10 mins
10 DevOps tools you should learn in 2023 Next post 10 DevOps tools you should learn in 2023

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.