VS Code Extensions for Ruby on Rails Developers

Orginally published at Medium on Sep 9th 2020.

Powerful extensions for Rails developers.

Ruby is built with developer happiness in mind. However, if your editor is not correctly set up, you’re in for a painful ride. Finding the right extensions on VS Code can take you down a long trial-and-error path.

Here’s a list of powerful extensions for Ruby on Rails developers.

Ruby

1. Ruby
2. Ruby Solargraph
3. Endwise
4. ERB Helper tags
5. Rails DB Schema
6. Rubocop
7. ERB Formatter
8. Emmet in ERB

General

1. Atom Dark Theme
2. VSCode-icons
3. DotENV
4. Output Colorizer
5. Auto Rename Tag
6. Highlight Matching Tag
7. Bracket Pair Colorizer 2

Ruby

1. Ruby

This speaks for itself. Ruby syntax highlighting.

2. Ruby Solargraph

Intelligent code completion and documentation while you’re writing code.

3. Endwise

Be wise and never forget to close the end immediately.

4. ERB Helper Tags

Useful shortcuts to save you time.

5. Rails DB Schema

Get quick insight on the defined database schema while you’re typing.

6. Rubocop

Code formatter for writing Ruby.

If you’re running into the following error, follow this guide to link the right execution path:

rubocop is not excutable 
execute path is empty!

7. ERB Formatter/Beautify

Not being able to indent your html.erb files in VS Code can be a real pain. ERB Formatter depends on the htmlbeautifier gem, so we need to install that dependency too: gem install htmlbeautifier.

"files.associations": {
  "*.erb": "erb"
},
"[erb]": {
  "editor.defaultFormatter":"aliariff.vscode-erb-beautify" ,
},
"[html]": {
  "editor.defaultFormatter": "aliariff.vscode-erb-beautify",
},
"files.associations": {
  "*.erb": "erb"
}

8. Emmet in ERB

It’s not an extension, yet it’s something you really want. If you’re writing html.erb files, you want to have access to the available emmet in HTML. It requires this setup:

"emmet.includeLanguages": {
        "erb": "html"
      },
"emmet.showAbbreviationSuggestions": true,
"emmet.showSuggestionsAsSnippets": true

General

1. Atom One Dark Theme

The theme of your editor is a personal choice. Choose what’s pleasant to your eyes and provides useful syntax highlighting. Alternatively, check Material Theme.

2. VS Code — Icons

Beautiful icons make it easy to distinguish between folder and file types.

3. DotENV

Syntax highlighting for your .env file.

4. Output Colorizer

Make it easy to read through the logs with colorised log files.

5. Auto Rename Tag

Save yourself 50% of the time spent selecting closing tags.

6. Highlight Matching Tag

Spot opening and closing tags immediately. I’ve also added some optional custom config to highlight both the left and right chevron (< …. >) when selecting a tag.

"highlight-matching-tag.enabled": true,
"highlight-matching-tag.styles": {
   "opening": {
     "left": {
       "custom": {
         "borderWidth": "0 0 0 1px",
         "borderStyle": "solid",
         "borderColor": "yellow",
         "overviewRulerColor": "white"
       }
     },
     "right": {
       "custom": {
         "borderWidth": "0 1px 0 0",
         "borderStyle": "solid",
         "borderColor": "yellow",
         "overviewRulerColor": "white"
       }
     },
     "name": {
       "underline": "yellow"
     }
   }
 }

7. Bracket Pair Colorizer 2

JavaScript syntax highlighting and formatting are extensively covered in VS Code. Depending on the framework you use, you might want to add other extensions too.

Thanks for reading!

*Photo by @sejadisruptivo on Unsplash.