Enchant your Ruby experience with these Visual Studio Code extensions

A few months ago, in March, I started a very exciting journey in Extendi as a Ruby backend developer, it was my first experience with Ruby and I felt so overwhelmed with the ecosystem and the codebase 😵.

As an ex Java developer, I was already used to IntelliJ so I started using RubyMine to do my work in Ruby and it immediately became my preferred IDE because it was so easy to install dependencies, start the project, move between tons of dependencies by just clicking on the class name, RubyMine does half of the work for you.

Everything went well for 3-4 months, then I started missing all the extensions and themes I had on VS Code and I felt like RubyMine was so sluggish compared to Visual Studio Code, in particular on Linux...so I decided to slowly move to Visual Studio Code but this time I decided to sit down and spend a few hours to improve my Ruby workflow by setting up VS Code, that's how I found out a few interesting and not well-known extensions that are saving me so much time every day.

In this article I will talk about five really useful Visual Studio Code extensions for writing in Ruby, a few of them have not been explicitly developed for Ruby but they work very well with it and only one of these extensions is for Ruby on Rails. I'm currently using these extensions on both MacOS and Linux (Ubuntu/Fedora), I'm pretty sure everything should work fine even on Windows. Don't worry they are really easy to set up and I will share my current configuration so that you can have everything running in 10 minutes, just follow me!

Solargraph

Solargraph is an extension you can't miss while working with Ruby because it allows VS Code to understand what you are writing and to provide intellisense, code completion, and inline documentation.

If you already have installed and configured Solargraph then you can jump to the tip section, otherwise follow the instructions to install it.

Installing Solargraph

Solargraph requires its Ruby gem to work properly, so we have to install it with:

gem install solargraph

and then install the Ruby Solargraph extension for Visual Studio Code.

Now we need to set the Solargraph configurations in VS Code: first of all, we need to know where solargraph gem is located, so we run

which solargraph

and copy the result that in my case is /home/chri/.rbenv/shims/solargraph because I'm using rbenv (it is not important at the moment).

Open the VS Code JSON Settings and paste the following lines:

"solargraph.commandPath": "<which_solargraph_result_here>",
"solargraph.formatting": true

Solargraph tip

Now that Solargraph is ready to work, open a terminal inside the folder of your Ruby project and run:

solargraph bundle

let it go, it may take a few minutes depending on your project size.

This magic command makes Solargraph analyze your project and all of its gems to download all the needed documentation. This will make the intellisense and code suggestions much smarter because it allows VS Code to understand the variables and return types, methods definitions, etc.. that you are working with.

You have to run this command in each one of your Ruby projects and you can run it periodically once you have installed new gems or made substantial changes to the project.

ColorTabs

ColorTabs is the gem that I use to quickly recognize test files because it gives a different color to the current open tab of Visual Studio Code based on a series of regular expressions set by the user. In this case, my project uses RSpec for the test suite and I want the tabs to become green when a test is open in Visual Studio Code. In case you do not know, RSpec test files have the _spec suffix at the end of the name, that's the way I'm using to recognize them.

my_file.rb => becomes => my_file_spec.rb

Here is my configuration:

"colorTabs.ignoreCase": true,
"colorTabs.titleBackground": true,
"colorTabs.titleLabel": true,
"colorTabs.config": [
  {
    "regex": ".*spec.*",
    "color": "#007f00"
  }
]

you can replace ".*spec.*" with the prefix used by your test suite. It is also possible to declare multiple patterns by adding multiple JSON objects with these fields:

{
  "regex": "...",
  "color": "..."
}

Switch to test

Switch to test is a useful extension that helps you to quickly create a test file and switch between a file and its test file. For example, if your source file is placed in app/services/awesome/service/file.rb then your test file will be created in spec/services/awesome/service/file_test.rb. This extension has not been developed keeping Ruby in mind, in fact it was developed mostly for the Javascript and Typescript languages, as you can see from the extension description, however with Ruby it works like a charm by changing a few settings. Here's my configuration to work with Ruby and RSpec:

"createTest.testFolder": "spec",
"createTest.testFileExtension": "_spec.rb",
"createTest.srcFileExtension": " .rb",
"createTest.srcFolder": "app",
"createTest.testFileTemplate": [
  "require 'rails_helper'",
  "",
  "RSpec.describe CLASS_NAME do",
  "",
  "end"
],

the testFileTemplate takes an array of elements because each element is a newline. The srcFolder is used to ignore the app folder of the Ruby on Rails project, if we omit this setting then the extension will create the test file in app/spec/services/awesome/service/file_test.rb that would be wrong.

Now this extension gives you two commands you can run:

Create test that will instantly create the test, using the given template, for the file that is open at the moment or open the test file if it already exists (and is located in the right path)
Go to Test that will only try to open the test file related or display an error if the test file does not exist

You can basically run Create test all the time and forget about the other command. That's my workflow. Super handy, I'm loving this extension because now I can create the test with one click, no more time wasted to create nested folders for my file or copy-paste the RSpec boilerplate!

Bust a gem

Using RubyMine we can just click on a gem inside your project to see its source code and what it is doing under the hood, with VS Code this is not possible anymore.. wait! We have Bust a gem!

Bust a gem is an awesome extension that allows us to step into the source code of a gem by clicking on the method we are interested in, as we usually do to see the definition of our methods.

It requires a bit of configuration to work as expected, you can follow the official documentation to set it up but let me summarize it for you:

Install the extension
Install the ripper-tags gem with

gem install ripper-tags

Open your Ruby project in Visual Studio Code and run the command Bust-A-gem: Rebuild Tags
Let it run, it may take a few minutes if your project is really big
The command will create a TAGS file into the root of your project, I suggest you to add this file into the .gitignore to avoid pushing it to the online repository, your colleagues will appreciate it.
Profit!💸💸💸

Now you can see the source code of a method by looking for its definition or you can open the full source code of an installed gem by running the Bust-A-Gem: Open Gem... command in Visual Studio Code.

Rails Open Partials

As you can guess Rails Open Partials is a tiny extension that recognizes Rails view partials and opens them when you click on their name. For example, clicking on the following code

<%= render partial: 'contents/report_item' %>

will open the _report_item.html.erb file.

This extension requires no configuration however I noticed it conflicts with Solargraph sometimes so it leads to the definition of a method instead of the partial file. Anyway, I put it on the list because you may find it useful, depending on your project setup.

Christian Toscano