Visual Studio Code i.e. Vscode is a modern and robust code editor developed by Microsoft.
We can use it for setting up the Ruby on Rails development environment.
It combines the simplicity of code editor with powerful tools like IntelliSense, code completion, debugging, and built-in Git support. One of the beauties of Vscode it's free and open source.
It is available for Windows, Mac, and Linux with huge community support.
How to Install Vscode?
Installation steps of Vscode are pretty simple, go to Visual Studio it will automatically detect the operating system you are using and provides a download link. After installation, you are ready to start customizing Vscode for Rails development.
How do you set up Vscode for Rails?
The first thing you have to do is install a ruby extension in vscode. Press f1, type ext install then search for ruby OR go to ‘View’ > ‘Extensions’ and search for ruby and hit install.
In ruby extension, there is ruby-debug ide protocol to allow Vscode to communicate with ruby-debug. It requires ruby-debug-ide to be installed on your system. This is how Ruby Mine/Net Beans does by default. Read the documentation GitHub to install ruby-debug-ide protocol.
Linting is the process of running a program that will analyze code for potential errors. Below is the list of linters supported by ruby. You will need to install the ruby gems for each of these for Linting to work:
After installing ruby gems for linters, enable each one in your workspace or user settings. To do this go to ‘File’ > ‘Preferences’ > ‘Settings’ and paste the below settings.
Ruby on Rails snippets extension:
Ruby on Rails snippets extension saves you lots of time. After installation reloads Vscode and just type ‘controller-rest’ it automatically writes all the rest methods for you. It will save you 80% time. There are many snippets available for controllers, models, and views. Go ahead try yourself.
Solargraph is a language server that provides IntelliSense, code completion, and inline documentation for Ruby.
Themes and Editor Settings
Vscode provides a couple of built-in themes. If you are the sublime user, just go to ‘File’ > ‘Preferences’ > ‘Color Theme’ and select the ‘Monokai’ theme. There are hundreds of themes available for you, just go to ‘File’ > ‘Extensions’ and type theme name and install it.
The font is one of the most important things when you are writing code. If the font of your code editor doesn’t look good you cannot write code for a long time and it hurts your eyes.
'Download it and install it on your system. Go to FIRA CODE. There is a beautiful font available for you that is ‘Vscode setting's and add below settings to activate ‘FIRA CODE’.
These are some editor settings that you can prefer.
Lots of tools are available to automate tasks like Linting, code formatting, and testing. These tools use a command-line interface to run the tasks. But we want everything in our editor, we don’t want to switch from editor to terminal for running a single command.
To create tasks in Vscode click on ‘Task’ > ‘Configure Task’ > ‘Create task.json file form template’ > ‘Others’ it will create ‘.vscode’ directory into the root of your project and also creates a ‘task.json’ file. Below file generated by Vscode.
The task array contains all your tasks. Read more about task automation in Vscode. It makes developer life easier.
We have created a couple of tasks for HTML beautifier, Rubocop, RSpec, rails server, etc. You need to install the HTML beautifier gem to use the ‘beautify’ task.
So here it is folks, you can create many tasks as per your requirement. If you need any help for setting up Vscode for Ruby on Rails development please comment below :)