Virtual Studio Code for Ruby on Rails Development

Introduction to Vscode (Visual Studio Code)

Visual Studio Code i.e. Vscode is modern and robust code editor developed by Microsoft.

We can use it for setting up 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?

· Ruby extension:

The first thing you have to do is install 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.

· Debugger:

    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.

· Linters:

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:

1. rubocop

2. ruby-lint

3. reek

4. fasterer

5. debride

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.lint": {

      "reek": true,

      "rubocop": true,

      "ruby": true,

      "fasterer": true,

      "debride": true,

      "ruby-lint": true

},

· Ruby on Rails snippets extension:

Ruby on Rails snippets extension save your lots of time. After installation reload Vscode and just type ‘controller-rest’ it automatically writes all the rest methods for you. It will save your 80% time. There are many snippets available for controllers, models, and views. Go ahead try yourself.

· Ruby Solargraph:

Solargraph is a language server that provides IntelliSense, code completion, and inline documentation for Ruby.

Themes and Editor Settings

· Theme:

Vscode provides a couple of built-in themes. If you are sublime user, just go to ‘File’ > ‘Preferences’ > ‘Color Theme’ and select ‘Monokai’ theme. There are hundreds of themes available for you, just go to ‘File’ > ‘Extensions’ and type theme name and install it.

· Font:

The font is one of the most important things when you are writing code. If the font of your code editor doesn’t looks good you cannot write code for long time and it hurts your eyes.

'. Download it and install on your system. Go to FIRA CODE. There is beautiful font available for you that is ‘Vscode settings and add below settings to activate ‘FIRA CODE’.

"editor.fontFamily": "Fira Code",

"editor.fontLigatures": true,

 · Editor settings:

These are some editor settings that you can prefer.

"editor.lineHeight": 40,

"editor.rulers": [

80,

120

],

"[html]": {

"editor.foldingStrategy": "indentation"

},

"html.format.indentInnerHtml": true,

"editor.tabSize": 2,

"editor.formatOnSave": true,

"editor.autoIndent": true,

"editor.fontWeight": "500",

"html.suggest.html5": true,

"editor.fontSize": 17,

"editor.minimap.maxColumn": 30,

 Task Automation

Lots of tools available to automate tasks like Linting, code formatting, and testing. These tools uses 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 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 root of your project and also creates ‘task.json’ file. Below file generated by Vscode.

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version": "2.0.0",

"tasks": [

{

"label": "echo",

"type": "shell",

"command": "echo Hello"

}]}

 The task array contains all your tasks. Read more about task automation in Vscode. It makes developer life easier.

We have created couple of tasks for htmlbeautifier, Rubocop, rspec, rails server etc. You need to install htmlbeautifier gem to use ‘beautify’ task.

 "version": "2.0.0",

"tasks": [

{

"taskName": "beautify",

"type": "shell",

"command": "htmlbeautifier ${relativeFile}",

"problemMatcher": ,

"presentation": {

"reveal": "never"

}},

{

"taskName": "rubocop",

"type": "shell",

"command": "rubocop --auto-correct ${relativeFile}",

"problemMatcher": ,

"presentation": {

"reveal": "never"

}},

{

"taskName": "rspec",

"type": "shell",

"command": "bundle exec rspec",

"problemMatcher": ,

"presentation": {

"reveal": "always"

}},

{

"taskName": "rspec file",

"type": "shell",

"command": "bundle exec rspec ${relativeFile}",

"problemMatcher": ,

"presentation": {

"reveal": "always"

}},

{

"taskName": "rails c",

"type": "shell",

"command": "bundle exec rails console",

"problemMatcher": ,

"presentation": {

"reveal": "always"

}},

{

"taskName": "rails s",

"type": "shell",

"command": "bundle exec rails server",

"problemMatcher": ,

"presentation": {

"reveal": "always"

}}

 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 contact us :)

Cryptex Technologies - Ruby On Rails Development Contact Details