Best VS-code Extensions for Ruby and Rails Newbies

Sure you can guess by now this article is addressed to developers who are just getting started with Ruby or Rails, and most likely very interested in getting a convenient and FAST working environment.

I have outlined the setups for a few VS Code extensions that will make your building rails app FASTER and less Error-Prone.

1. Ruby rebornix.ruby

It gets pretty boring and tedious when hard coding every tag in the view files of a Rails app. To get started, one's working environment must be configured to detect the files. From the image below, we do see 'application.html.erb' open, yet the editor still detects 'ruby' at the bottom right corner of the image below.

The extension Ruby will provide accurate syntax coloring by adding the language mode “erb”. Once the 'Ruby' extension is installed, click on “ruby” at the bottom right of your editor and select “erb”.Restarting the editor will enable the changes made as shown below.

2. ERB-VSCode-Snippets

Installing the first installation is a prerequisite for this extension. Install the 'ERB-VSCode-Snippets' extension from VS Code editor to enjoy its features. ERB-VSCode-Snippets allows you to quickly enter ruby tags in .erb or .html.erb files. For example, when you enter “pe”, it will output “<%= %>”. So much quicker to write, isn’t it?

Visit zneuray.erb-vscode-snippets for more snippets

3. Emmet

This tool is more or less similar in functionality to ERB-VSCode Snippets as it got snippets for HTML tags for quick and concise typing.

From accessing the settings as shown above or otherwise, search for 'include languages' and click 'edit in settings.json'

Add the line below in the block as shown in the image, restart the editor, and see the magic happen.

"emmet.includeLanguages": {"erb": "html"}

For example, if I type “h1”, it will output “<h1></h1>”

4. Endwise

Endwise will wisely add an 'end' to your ruby code based on just the structure. eg def, if/else, while,...

For example, typing

def create

and hit enter will result in

def create

end

This enables us to write better code without worrying about lots of typo errors.

Simply install the 'Endwise' extension in your code editor and you're good to go.

Acknowledgment

Special thanks to Aude Faucheux for opening my eyes to these extensions. Folks, your feedback on this will be much appreciated.