How to setup VS Code for Ruby

VS Code is my editor of choice (second one is vim). In this post, I'll share what extensions I use for ease of Ruby development

Hello world,

I recently revamped my VS Code setup — that means I removed all extensions and reinstalled a select few that I need for my day-to-day programming. I program in Ruby, Python, and TS/JS for the most part. Then there are other languages that I admire having good theme support such as YAML, HTML, Erb, Markdown, etc. Here are extensions that I recommend for Ruby:

Link to GitHub Gist to download this JSON file. You can store this file in your workspace at `.vscode/extensions.json`. That will make these recommendations available to all your colleagues working in the same workspace.

Now, let’s dive into the details of each and where I find those useful.

Shopify (ruby-extension-pack)

This is the most useful one for Ruby developers as this pack pretty much takes care of adding all the useful extensions for you. I discovered this extension via a theme. I was looking for the best theme for Ruby and came across the Spinel dark theme, which is made specifically for Ruby using all of the semantic highlighting information provided by the Ruby LSP.

Here is how your code will look after installing this extension pack:

Notice that you also get the usual VS Code on-hover docs & preview. Also, you can jump to the definition by `Cmd+click`.

Below is a screenshot of the default VS Code without the extension. You can see that not only your theme colors are different but you can not see the on-hover doc & preview. Also, the support for jumping to the definition is not there.

This extension is all you need for your regular Ruby development. I still however installed two more extensions for my requirements.

Formatting for .erb

Some of my projects use .erb for views in Rails. I was looking for an auto formatter for these files which will do two things:

1. Format the file on save

2. Highlight Ruby codes and include them in the formatting

The extension aliariff.vscode-erb-beautify does 80% of this. By installing and enabling it, I can expect .erb files to be formatted for me through the Format Document command.

As a dependency of this extension, you will need htmlbeautifier available in your workspace. You can install it for your project by adding gem ‘htmlbeautifier’ it to your Gemfile OR by adding it globally through the following command:

gem install htmlbeautifier

I turned on the Format On Save setting in VS Code for .erb files. You can do so by opening settings [`Cmd+,` or `Cmd+Shift+P` → Open Settings (UI)]. Then in the search bar type format. From the list of options, turn on Format On Save.

All good so far. It works well and you may not need further changes but if you are anything like me; you will notice some parts of VS Code while working on Erb files are missing. I noticed that the .erb file was not giving emmets of HTML. i.e. when you type

div.col-md-3#pricing-starter

and it becomes

<div class="col-md-3" id="pricing-starter"></div>

To get this missing piece to work with Erb, I had to update one setting that lets VS Code provide existing HTML emmets in the Erb files.

To enable this, open up settings JSON [`Cmd+Shift+P` → Open User Settings (JSON)]. In this JSON file, add the following:

"emmet.includeLanguages": {
  "erb": "html"
},

Save the file and you can see that you have your default HTML goodies available in .erb files as well.

Here is a screenshot of one of my .erb file auto formatted:

Rails DB Schema

The last one in the list is for getting suggestions while typing code based on db/schema.rb file in Rails projects. This is the most recent one that I started using. You can install the extension and start noticing typing suggestions.

---

👋🧑‍💻 That’s a wrap. Let me know how you find this article. Your feedback will help me write better and hopefully provide you with more value. Happy coding.