Geek Culture
Published in

Geek Culture

The most useful Visual Studio Code extensions I use for Ruby development

White and blue Lego pieces with some ruby pins

I use Visual Studio Code daily for web development with Ruby on Rails. By default, it is a great editor with handy tools. But its great power lies in its extension system. It’s like the phrase “there’s an app for that”. You could also say that “there’s an extension for that”: for almost anything you need in your development work, there is undoubtedly an extension that will make things easier.

Below is a list of the extensions I use in alphabetical order.

ANSI Colors

ANSI Colors logo

If you open a log file in Rails, you will see that there are strange codes all over the place, making them almost impossible to read. Those codes are ANSI codes for coloring the lines.

With this extension, you will be able to translate those codes to colors and read the logs comfortably, just like in the development console.

How to use

ANSI Colors extension screenshot for Visual Studio Code
ANSI Colors extension screenshot

Once the extension is installed, open the log and then the command palette (CMD+Shift+P on macOS) and find the ANSI Text: Open Preview option.

The text will be colorized, as you can see in the image above.

Link: https://marketplace.visualstudio.com/items?itemName=iliazeus.vscode-ansi

Auto Close Tag

Auto Close Tag extension for Visual Studio Code
Auto Close Tag

To automatically close HTML tags.

Although by default, Visual Studio Code already automatically closes HTML tags using the “html.autoClosingTags” option, this extension allows you to configure in which languages to activate the function.

How to use

It works automatically closing tags in file types other than HTML (where Visual Studio Code already does it by default).

It also allows auto-complete tag closing, like Sublime Text does.

But the most helpful feature is its shortcut (CMD+Shift+. on macOS), especially in templates.

Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Copy With Line Numbers

Copy With Line Numbers logo

To copy code snippets next to their line numbers.

You can also copy the file name.

How to use

Copy With Line Numbers extension demo for Visual Studio Code
Copy With Line Numbers demo

Select the code snippet you want to copy, open the command palette and look for the Copy With Line Numbers option. You have 2 variants: With File Name and Without Path.

Then just paste it wherever you want.

Link: https://marketplace.visualstudio.com/items?itemName=yassh.copy-with-line-numbers

Endwise

Endwise logo

To add the end automatically to Ruby blocks.

How to use

Endwise extension demo for Visual Studio Code
Endwise demo

After opening the block, press Enter, and the end is automatically added.

It is also added if you do CMD+Enter in the middle of the line.

Link: https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise

ERB Linter

ERB Linter logo

To check the code style in an ERB file.

How to use

ERB Linter extension demo for Visual Studio Code
ERB Linter demo

You need the erb_lint gem. You can install it globally or via the Gemfile with Bundler.

You have several ways to check the style from Visual Studio Code:

  • Save the ERB file, and it will flag errors.
  • Open the command palette, and choose ERB Linter: lint with erb-lint to check the style.
  • Also, from the command palette, choose ERB Linter: autocorrect current file with erb-lint to autocorrect potential errors.

Link: https://marketplace.visualstudio.com/items?itemName=manuelpuyol.erb-linter

ESLint

ESLint logo

To integrate ESLint into Visual Studio Code.

One way or another, your application will end up having JavaScript. This extension ensures that your code follows JavaScript style standards.

How to use

First, install and configure eslint on your machine, and then this extension.

When you open a JavaScript file, the extension will check the syntax and style you chose when you installed the library.

Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Git Blame

Git Blame logo

To show who and when wrote the line of code where the keyboard cursor is in the status bar.

How to use

Git Blame extension demo for Visual Studio Code
Git Blame demo

Simply place the keyboard cursor on a line of code and watch the status bar.

In addition, a click on this information opens the last commit that changed the line.

Link: https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame

GitHub Theme

GitHub Theme logo

The official GitHub theme, with various color schemes.

How to use

GitHub Theme for Visual Studio Code
GitHub Theme for Visual Studio Code

After installing the theme, open the theme list (on macOS, this is done with CMD+K and then CMD+T, I think on Windows it is the same but with CTRL).

You will see the different theme variations for the light and dark versions.

Link: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

Output Colorizer

Output Colorizer logo

It colorizes the panels, such as the output panel.

How to use

Output Colorizer extension screenshot for Visual Studio Code
Output Colorizer extension screenshot

You don’t have to do anything. The content of the panels is automatically colorized.

Link: https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer

Rails DB Schema

Rails DB Schema logo
  • Autocomplete attributes on model objects
  • Access the definition of those objects
  • Access schema tables
  • Insert attributes defined in the schema where the cursor is located

How to use

Rails DB Schema extension autocomplete demo for Visual Studio Code
Rails DB Schema autocomplete demo
  • The auto-completion works after you type a dot.
  • To access the definition of an object, press CMD (or ALT on Windows/Linux) and point the mouse at the object. An underline will appear. Click, and you will see where it has been defined, inside a floating zone. The truth is that it is very convenient and helpful.
  • To access the tables defined in the schema, you must access the command palette and search for Rails DB Schema: Open
  • To insert attributes, the same thing: access the command palette and search for Rails DB Schema: Insert

Link: https://marketplace.visualstudio.com/items?itemName=aki77.rails-db-schema

Ruby Solargraph

Ruby Solargraph logo

Auto-completion, code check, and documentation for Ruby.

How to use

Ruby Solargraph extension demo for Visual Studio Code
Ruby Solargraph demo

For this extension to work, you have to install the solargraph gem: gem install solargraph

  • As you see in the demo above, it detects variables and objects and provides auto-completion after putting a dot. If it doesn’t appear automatically, you can press CMD+Space on macOS (or CTRL+Space on Linux/Windows).
  • If you hover on any object or method, a popup with documentation appears.
  • It has a linter included to verify the code style with Rubocop. You must access the extension configuration and enable the Diagnostics option. I like its high speed and that you don’t need to save the file to verify it.

If you open the command palette and select Solargraph: Create a Solargraph config file, it will create the .solargraph.yml file in the project’s root.
The most interesting options are where to do the checks and which linters to use. I usually assign all! to the reporters option so that it uses them all.

Link: https://marketplace.visualstudio.com/items?itemName=castwide.solargraph

SVG

SVG logo

To create, modify, minify and preview SVGs.

How to use

SVG extension previewing demo for Visual Studio Code
SVG previewing demo
  • As you edit an SVG file, it shows you auto-complete suggestions.
  • If you want to remove everything unnecessary, access the command palette with the SVG file open and choose Minify SVG.
  • The most interesting, in my opinion, is when you want to preview images in SVG format. Right-click on the file and choose Preview SVG. You can also select that option from the command palette if you already have the file open.

Link: https://marketplace.visualstudio.com/items?itemName=jock.svg

VSCode rdbg Ruby Debugger

VSCode rdbg Ruby Debugger logo

To debug Ruby with Visual Studio Code tools.

Perhaps one of the most exciting extensions I use since debugging in Ruby is usually done in the console. But this way, you can do it visually.

How to use

You will need to have the debug gem installed on your system, the new standard in Ruby.

  • Go to the Run and Debug section and create a new launch.json file.
  • Choose Ruby as the language.
  • Configure it with whatever you need. For example, if you want to do debugging in Ruby on Rails, put this in the script option: “${workspaceFolder}/bin/rails server”.

If you’re interested in this topic, I’m currently working on a course for LinkedIn Learning that you’ll find very useful. Follow me, and I’ll post an update when it’s ready, with a surprise.

Link: https://marketplace.visualstudio.com/items?itemName=KoichiSasada.vscode-rdbg

vscode-gemfile

vscode-gemfile logo

For quick access to the documentation of the gems defined in your Gemfile.

How to use

vscode-gemfile extension demo for Visual Studio Code
vscode-gemfile demo
  • Hover over a gem name, and a popup will appear with a link to the RubyDoc documentation.

Link: https://marketplace.visualstudio.com/items?itemName=bung87.vscode-gemfile

vscode-icons

vscode-icons logo

An icon pack that works very well in Ruby projects.

I’ve tried others, but I didn’t get used to them. Some were too garishly colored, and others too dull. I think this pack has an interesting style without being too flashy.

How to use

vscode-icons extension demo for Visual Studio Code
vscode-icons demo

Just install it, and after reloading the editor, it will ask you to activate the icons.

If the message doesn’t appear, open the command palette and search for the Icons: Activate VSCode Icons option.

Link: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

VSCode Ruby

Ruby extension logo

Includes many valuable snippets. The one I use the most in Ruby classes is to create a method (with the def shortcut). In ERB, I use it to open labels (er and pe shortcuts), close blocks (with the end shortcut), and create conditionals (with if, else and elseif shortcuts).

On the other hand, it has an autocomplete function, as you can see in the screenshot below, opening an additional popup with documentation that you can quickly see.

How to use

VSCode Ruby extension demo for Visual Studio Code
VSCode Ruby demo

After installing it, you can use its snippets. Do not choose the first suggestion if you want to use the def shortcut in a class. It is the second one that comes from this extension.

Regarding the auto-completion, it is activated when you put the dot. If it does not appear, you can force it with CTRL+.

Link: https://marketplace.visualstudio.com/items?itemName=wingrunr21.vscode-ruby

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store