This is Part 3 in the WSL 2 Rails Series
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.
Looking to learn more about WSL 2? Check out this wonderful book that is full of tips, tricks, and configuration options for WSL. The book is available via this affiliate link to its store page on Amazon: WSL 2 Tips and Tricks
I Originally Covered This On YouTube
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.
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.