Thumbnail photo by me for once! But still go check out unsplash.com!

Configure Visual Studio Code For Ruby On Rails 6 With This Quick Guide

Configure Visual Studio Code For Ruby On Rails 6 with these extensions for Code Formatting, Syntax Highlighting, and Code Autocompletion.

Configure Visual Studio Code For Ruby On Rails 6

One of the hardest in any language is usually the initial setup. At least, that’s been my experience as a Software Developer.  That’s why today I’m going to show you how to configure Visual Studio Code for Ruby on Rails 6. The installation is always a pain, something inevitably goes wrong, and finding the right IDE is awful. Now sure, some of my professors would argue that this is why they taught VIM, but that’s not why we’re here today.

I wanted to take a quick break from the usual videos with this tutorial, and just quickly cover a few extensions. Using these extensions, you can quickly configure Visual Studio Code for Ruby On Rails 6. We’re going to cover a few extensions, as well as Emmet, and then you’ll be good to go.

First, we’ll cover setting up Rubocop, a necessary evil. Then we’ll add in our syntax highlighter, auto-completer, and file icons. Finally, we’ll quickly enable Emmet tab expansion.

I Originally Covered This On YouTube

This is part 3 of my series for WSL 2. I made this series to cover using the Windows Subsystem For Linux V2 (WSL 2) to run Ruby on Rails on your Windows 10 machine using Ubuntu.

In part 1 we covered how to set up WSL 2 on a Windows 10 computer to run Ruby on Rails inside Ubuntu.

For part 2, we talked about how to install Ruby on Rails inside of this virtual Ubuntu installation.

Installing Rubocop For Code Formatting

Because I’m anticipating that you’re going to be using Rubocop for more than one project, we’re going to install it globally. This means that whenever you create a new Ruby on Rails 6 project, you will automatically have Rubocop enabled. To Rubocop globally, use the following command inside of your Linux terminal. Please note that in the video I misspoke, the command below is the correct one to use.


    rvm @global do gem install rubocop

Autocompletion For Ruby On Rails 6

Inside of Visual Studio Code, navigate to your extensions tab, which should look something like the figure below. Search for “Ruby On Rails” and install the Ruby on Rails extension by Hridoy by clicking “Install Locally” in the information panel header. For me, this extension was the third option down. If any of these extensions don’t work initially, restart VSCode. This was the number one solution to the problems I encountered.

Once you have this extension installed, you should see some autocomplete suggestions inside your .rb files. I’ve attached an example of my before_action’s autocomplete suggestions below. As always, code completion can be a bit of a pain at times,  but overall it usually saves time. The code pictured below is from week 1 of my 20in20 challenge where I showed off how to create a blog in Ruby on Rails 6. Not really related, but it might be worth checking out!

Syntax Highlighting And File Icons For Ruby On Rails 6

This is similar to the first extension. You’re just going to head to your extensions tab and search for VSCode Ruby. Click install but don’t restart Visual Studio Code yet. You’re also going to want to search for vscode-icons. This will give you those clean looking file and folder icons seen in my screenshots. After you install both of these plugins, completely restart Visual Studio Code.

Emmet Tab Expansion In Visual Studio Code

Although Emmet ships with Visual Studio Code, the tab completion is not enabled by default. In order to enable tab expansion, go into:

File -> Preferences -> Settings

And search for Emmet. Scroll to the bottom and make sure that

Emmet: Trigger Expansion On Tab

is selected. I’ll attach an image for reference again.

Conclusion

At this point, you should have Ruby on Rails code formatting, autocompletion, syntax highlighting, file icons, and Emmet compatibility enabled. This set of tools will allow you to very quickly format your code and build out the HTML in your ERB files.

I know that it’s very difficult to find articles that succinctly cover how to set up these bare necessities. I’m hoping that this brief little article, and accompanying video, were helpful in seeing how my environment is set up though. If you have any questions, please leave them in the comments below. And maybe share any extensions that you like that I didn’t cover! We’re all in this together, after all.

Disclaimer: I may be provided an Amazon Affiliate commission for any sales made through any Amazon links on this website. You pay the same as you normally would, but a small portion of what Amazon is paid goes to me.

Share this post

Share on twitter
Share on facebook
Share on linkedin
Share on reddit
Share on pinterest
Share on email

Leave a Reply