Custom VS Code Snippets and Emmet for ERB files

In this post, I walk you through two simple tweaks I made to VS Code that I found really helpful in speeding up development in ERB views files for Rails applications:

1. Defining your own custom snippets for the ERB tags <% %>​, <%= %>, and <%# %>.
2. Enabling Emmet in ERB files.

Defining Your Own Custom Snippets for ERB tags

Defining your own custom code snippets in VS Code is pretty straightforward.

Below, I’ll walk you through the process of defining three snippets for tags you’ll use frequently when writing ERB templates:

<% %> which executes the Ruby code inside it but doesn’t render a return value — affectionately known as snowcones.

<%= %> which evaluates and renders a return value for the Ruby code inside it — affectionately known as squids.

<%# %> which wraps a comment in your ERB file.

Using these snippets in VS Code might look something like this:

The keywords “squid” , “cmmt” , and “snowcone” are being used to insert these ERB tag snippets.

Anatomy of a User Snippet

Template for a Snippet

A snippet is made up of:

• “Name” — just a descriptive name used to help you identify what the snippet is for in your settings file
• ​“prefix”​ — - the keystroke that will be used to trigger your code editor to insert the snippet
• ​“body”​ — - the code that will be inserted when your snippet is called. This​ is made up of an array of strings, so if you’d like your snippet to be multi-lined in your editor,
• ​“description”​ - a description of what the code snippet contains.

User snippets in VS Code are stored in language-specific JSON files, which you can access under ​Code > Preferences > User Snippets, and then by searching for the file that corresponds to the language you’re writing the snippet for.

We’re dealing with ERB here, so I’ll navigate to the erb.json​ file:

Accessing User Snippets

Navigating to “erb.json“ to define Snippets for use in ERB files

Below is the code for the three snippets demonstrated in the gif above. Feel free to paste it into your ​erb.json​ file and tinker with it as you see fit.

The prefixes​“snowcone”​, “squid”​, and “cmmt”​ are being used to trigger each of these snippets, respectively. I chose to use these prefixes, because they make sense to me sense to me intuitively, but these snippets will work just fine if different prefixes make more sense to you.

Note the ​$1​ between the ERB tags within the snippet bodies on lines 4, 12, and 20. These are tabstops, which specify where your cursor should jump to after the snippet has been inserted.

If you were defining a snippet that has multiple locations your cursor should visit, you can define these by numbering tabstops sequentially and using the​tab​key to navigate between them once the snippet is inserted. So your cursor would first visit tabstop ​$1​, followed by $2​, then ​$3​ and so on, with ​$0​ denoting the last place your cursor should visit.

Emmet — What It Is and How to Use It

Emmet is an insanely helpful set of plug-ins for code editors, which allow you to drastically cut down on the time and keystrokes it takes to code HTML elements by using autocompletion to insert HTML tags and attributes.

To use Emmet, starting typing the name of an HTML tag (i.e., a tag without the angle brackets ​<​ or ​>. So for example, h1 not <h1>, p not <p>).

As you begin to type out the name of the tag, an inline popup appears with one or more Emmet snippets that correspond to what you’ve typed so far.

Using the up/down arrow keys, choose the snippet you’d like to use and press ​tab​ to insert it into your code​.

Emmet automatically inserts the opening and closing element tags along with any attributes the element might require. It also automatically places your cursor at the first point in the element at which you need to enter content, allowing you to ​tab​ between those different insertion points if there is more than one.

In the example below, I use Emmet to pretty quickly generate an HTML skeleton along with a few other elements without having to worry about typos or forgetting to close tags, all while saving myself a ton of repetitive keystrokes.

Use Emmet to quickly and accurately insert HTML.

Emmet comes installed out-of-the-box in VS Code; however, by default, it’s only enabled on HTML documents.

To get full use of of all that Emmet has to offer when developing the views in a Rails application, which are ​.erb​ or ​.html.erb​ files, follow these steps to enable Emmet on these file types.

1. In VS Code, navigate to Code > Preferences > Settings

2. Search for Emmet and under the option Emmet: Include Languages, follow the link to Edit in settings.json

3. Insert the "emmet.includeLanguages" key-value pair found on lines 8–11.