👩‍💻 The three extensions you need for Rails development in VS Code
Tags: productivity, vscode, rails, ruby
Published: 2019-12-02 09:42:49

---
title: 👩‍💻 The three extensions you need for Rails development in VS Code
published: true
description: Learn how to best configure VS Code for Ruby and Ruby On Rails development
tags: productivity, vscode, rails, ruby
cover_image: https://thepracticaldev.s3.amazonaws.com/i/okjo1xzn9ykrehmfwikd.png
---

*This article was extracted and enhanced from [Rails 6: the missing developer setup guide](https://dev.to/vvo/a-rails-6-setup-guide-for-2019-and-2020-hf5)*

Hi there 👋 and welcome. Here you'll learn how to setup Visual Studio Code for Ruby and Ruby On Rails development. VS Code is my editor of choice and becoming more and more popular in the whole development world. Heck even Facebook who built their own [Atom extension called Nuclide](https://engineering.fb.com/developer-tools/building-nuclide-a-unified-developer-experience/) then [switched to VSCode](https://developers.facebook.com/blog/post/v2/2019/11/19/facebook-microsoft-partnering-remote-development/) in 2019.

There are other popular Ruby and Ruby On Rails editors as shown in the [Ruby 2019 State of the developer ecosystem](https://www.jetbrains.com/lp/devecosystem-2019/ruby/) like [RubyMine](https://www.jetbrains.com/ruby/). If you used it, just let me know in the comments.

![Most used code editors for Ruby in 2019](https://thepracticaldev.s3.amazonaws.com/i/5kl45593p9ho424270n9.png)

**As for extensions in VS Code**, there are A LOT of them related to Ruby and Rails. I tried them all and this post is here so that you don't have to go on 10 different blogs trying to find the right ones.

Now let's configure VS Code!

**Table of contents:**
- [Ruby and Ruby On Rails VS Code extensions](#ruby-and-ruby-on-rails-vs-code-extensions)
  * [endwise](#-endwise--https---marketplacevisualstudiocom-items-itemname-kaiwoodendwise-)
  * [Ruby Solargraph](#-ruby-solargraph--https---marketplacevisualstudiocom-items-itemname-castwidesolargraph-)
  * [Gem Lens](#-gem-lens--https---marketplacevisualstudiocom-items-itemname-ninosekivscode-gem-lens-)
- [Configuration strategy for teams](#configuration-strategy-for-teams)
  * [Suggesting extensions](#suggesting-extensions)
  * [Workspace settings](#workspace-settings)
- [Missing features](#missing-features)
- [Other useful VS Code extensions](#other-useful-vs-code-extensions)

# Ruby and Ruby On Rails VS Code extensions

As for Ruby and Rails development, those are the only extensions ones I use. They provide me the best setup, for now.

## [endwise](https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise)

We start lightly with an extension that *wisely* adds `end` blocks where needed. I believe this should be implemented in VS Code by default but that's not the case. Here's how it looks like:

![endwise extension demo](https://thepracticaldev.s3.amazonaws.com/i/jwwqfe9ijcrovy19r2tj.gif)

## [Ruby Solargraph](https://marketplace.visualstudio.com/items?itemName=castwide.solargraph)

Now for some heavy stuff. If you were used to VS Code awesome JavaScript autocompletion then you will love Solargraph and its VS Code extension.

*Solargraph is a Ruby gem that provides intellisense features through Microsoft's* [solargraph.org](https://solargraph.org/).

![Solargraph demo](https://thepracticaldev.s3.amazonaws.com/i/e892kij0gs4jfhf3dzht.gif)

Solagraph can do more than that, I especially like the linting and autoformatting being done with [RuboCop](https://www.rubocop.org/), see:

![Solargraph lint and format demo](https://thepracticaldev.s3.amazonaws.com/i/0ayxygycpbt4pyxt030v.gif)

To benefit from Solargraph features you have to add the dependency to your Gemfile:

```txt
gem 'solargraph', group: :development
```

And if you're gonna use the RuboCop features then you need to add this dependency too:

```txt
gem 'rubocop', group: :development
```

Finally, you can go further and [configure Solargraph to be smarter with your Rail codebase](https://solargraph.org/guides/rails).

## [Gem Lens](https://marketplace.visualstudio.com/items?itemName=ninoseki.vscode-gem-lens)

This extension is extremely useful when you quickly want to check the description and latest version of a gem from your `Gemfile`. See:

![Gem Lens demo](https://thepracticaldev.s3.amazonaws.com/i/xdrpa0txx3q9849bh2bd.gif)

# Configuration strategy for teams

My goal as a developer is to best configure my editor but also be sure that this configuration is stored in the project and can be used by other developers. Even if it hurts sometimes, it's best for everyone contributing on the same project to use the same editor and configuration. So that you can focus on building applications and not on configuring 10 different editors for linting and formatting.

Now to achieve that, VS Code has neat features allowing you to:
1. suggest extensions
2. automatically apply some settings

This is all done via [VS Code workspace settings](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations) so we will be using that.

All you have to do is to **create a `.vscode`** folder in your project:

![Create a .vscode folder to store workspace settings](https://thepracticaldev.s3.amazonaws.com/i/hyq58skvt18654t4ueuu.png)

## Suggesting extensions

Let's suggest the three extensions we have seen previously:

**.vscode/extensions.json**

```json
{
  "recommendations": [
    "kaiwood.endwise",
    "ninoseki.vscode-gem-lens",
    "castwide.solargraph"
  ]
}
```

Anyone opening your project in VS Code will see this:

![VS Code extensions recommendations](https://thepracticaldev.s3.amazonaws.com/i/jqqj2i4hqdcb1zmj4cps.png)

## Workspace settings

You can also enforce some settings for the project in VS Code. Usually you want to do so to:
1. Ease setupping new environnements/new team members
2. Enforce with ease some default linting/formatting on top of any continuous integration system. Here are my own settings related to the three extensions we have seen:

**.vscode/settings.json**
```json
{
  "files.associations": {
    "*.html.erb": "html"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "editor.formatOnSave": true,
  "solargraph.autoformat": true,
  "solargraph.diagnostics": true,
  "solargraph.formatting": true
}
```

This configures Solargraph will linting and autoformatting, along with `.html.erb` auto formatting.

# Missing features

Right now the state of linting, syntax highlighting and autoformatting of `.*.erb` files is not good at all. So I went for the simple solution of considering those files as their output format (HTML, CSS). Eventually maybe [Prettier](https://prettier.io/) and its [Ruby plugin](https://github.com/prettier/plugin-ruby) will be the best options but as of now [it does not support formatting `.html.erb`](https://github.com/prettier/plugin-ruby/issues/371).

# Other useful VS Code extensions

Those are the extensions I use and have installed:
- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
- [File Utils](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils)
- [GitHub Plus Theme](https://marketplace.visualstudio.com/items?itemName=thenikso.github-plus-theme) the theme used in the screenshots in this post. And the one I use daily
- [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)
- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- [Heroku](https://marketplace.visualstudio.com/items?itemName=ivangabriele.vscode-heroku)
- [Local History](https://marketplace.visualstudio.com/items?itemName=xyz.local-history)
- [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
- [Travis CI Status](https://marketplace.visualstudio.com/items?itemName=felixrieseberg.vsc-travis-ci-status)

---

🔚 That's it!

Have some extensions you cannot live without, especially some for Rails? Drop me a comment and I will update this post!

Thanks for reading, if you enjoyed this post, share it for others to discover it:

{% twitter 1201493692613365760 %}

![Cat shitposting GIF](https://thepracticaldev.s3.amazonaws.com/i/e8391xrkjsgevicaed7u.gif)