Beginners guide for a Ruby-on-Rails ready Visual Studio Code

Image for post
Image for post
Ruby on rails in VSCode

Visual Studio Code is gaining popularity now amongst web developers around the globe. In fact, VSCode tops the latest StackOverflow 2019 survey for Most Popular Development Environments. This is because VSCode offers a wide range of features like;

Intellisense — for code-completion and syntax highlighting,
Extension — which are third-party plugins that makes VSCode more usable, and,
Git Integrated Terminal — which provides a built-in terminal inside VSCode.

It also offers support for popular languages such as PHP, C++, C#, and of course, Ruby.

I am Ivan Ray Buglosa, a Ruby On Rails developer, and I’ve been using VSCode since I started writing codes 3 years ago. This article will mainly discuss how to configure a Ruby-on-Rails-ready Visual Studio Code…

VSCode Extensions

VSCode has a lot of third-party plugins that you can use to boost your productivity. I’ve listed some of the extensions that I’m currently using below or you can also visit the VSCode Marketplace and browse for additional extensions.

Ruby

This is basically the most useful extension that you want to use if your coding in Ruby. It lets VSCode support Ruby programming language and offers syntax highlighting specifically built for Ruby. Emmet, which is already built-in in VSCode automatically shows snippets and code-completion for your ruby code.

Rails

If you’re currently coding in ruby, you’ll probably be going to proceed to ruby-on-rails soon. Rails extension gives you the same functionality with Ruby extension like syntax highlighting and Rails framework support. This extension also offers extra functionality for debugging and testing processes in Rails.

Ruby on Rails

Ruby on Rails extension is both Ruby and Rails extension combined. It offers a more specific emmet and syntax highlighting functionality for .html.erb and .rb files. One notable feature of this extension is the code completion of emmet. You can just put the opening rails tag(<%=) and automatically, VSCode emmet will suggest some possible methods that you’re going to use. It will surely improve your work process.

Simple Ruby ERB

Simple Ruby ERB extension focuses on improving ruby file structure with HTML. Some of its features are the same with Ruby on Rails extension but its surely important to have this one when you want to code in ruby on rails.

Atom Dark One Theme

One of the biggest rivals of VSCode in development environment applications is Atom. I was an Atom-user before VSCode and I was attached to its theme, font-style, and simplicity. If you’re just like me, you can use the Atom Dark One Theme to basically mimic the theme of Atom to your editor. The font-style, font-colour of your codes and dark theme editor can greatly lessen the stress of your eyes if working for longer hours.

vscode-icons

Image for post
Image for post
vscode-icons in ruby-on-rails

VSCode-icons automatically detects the file extension and directory contents in your project file structure and adds an appropriate icon. It’s just a simple extension but it does help organize your project structure.

User Settings Configuration

VScode doesn’t support Ruby and Ruby on Rails by default. This means emmet doesn’t have auto-close tag feature for .rb and .html.erb files. But since the editor is very flexible in terms of configurations and modifications, you can hack through some configurations and enable the auto-close tag of emmet.

You can open user settings by ⌘+` and search include languages.

Image for post
Image for post
user settings configurations

Click the Edit in settings.json to customize the languages in emmet. And add ”emmet.includeLanguages”: {“erb”: “html”} in the settings.

Image for post
Image for post
Enable .erb file support for emmet

This will enable the auto-close tag for ruby related files.

Git Integrated Terminal

Any rails application is automatically initialized with git, so if you’re working alone or in a team, the integrated terminal will surely boost your coding process. Code and commit to one app.

Image for post
Image for post
Open integrated terminal in VSCode

You can open the terminal by following the image displayed at the top or ⌘+` for mac or Ctrl+` for windows.

The integrated terminal provides features for debugging, git, and console commands. You can develop Ruby applications and run it immediately in the terminal.

Image for post
Image for post
Basic Ruby app with integrated terminal

By default, VSCode terminal will automatically use the default shell in your computer. I recommend using git bash if you're using either windows or mac but if you really want to go advanced, you can install Oh My Zsh! which offers more unique features like git-branching mechanism and a dynamic theme for your terminal. Oh My Zsh! is currently only available for mac.

And that’s it! After installing the extensions and getting to know more about the terminal, you can now develop your next ruby on rails application. I suggest reading the documentation of VSCode or each extension to know more about the functionality of the application.

Written by

Web Developer and an aspiring writer

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