Ruby on Rails Basics with VS Code— Top 5 extensions
This article is addressed to newbies in the Ruby on Rails world and is meant to make your coding experience with Ruby and Rails easier and FASTER.
Below is a list of the extensions I found so helpful that I had to share. Please note that you might need to restart VS Code after installing some of these extensions to enable them.
1. Ruby
How annoying is it when you start writing in .erb or html.erb files and the syntax colors of html and ruby tags are all messed up? This happens because the default language mode for this file is “Ruby”, as you can see in the bottom right corner of the VS Code screen.
The extension Ruby will provide accurate syntax coloring by adding the language mode “erb”. Once the extension installed, click on “Ruby” at the bottom left of your file and select “erb”. If you restart VS Code, the .erb and .html.erb file will pick up the “erb” language mode automatically.
Link to install the Ruby extension:
2. Endwise
Endwise is a great extension for Ruby in general. Its purpose is to add automatically “end” to code structures such as methods or conditions.
The struggle of typing “emd” instead of “end” has come to an end!
Link to install Endwise extension:
3. VS-Code Icons
Creating an app on Rails generates dozens of folders and makes it harder to navigate in the explorer. The extension VS-Code icons can help you to easily spot the folder you are looking for by adding icons based on the folder’s functionality. I also think it makes the explorer look prettier.
Link to install VS-Code icons extension:
4. ERB-VSCode-Snippets
Please note that this extension only works if you added the language mode “erb” (ref to part 1 of this article to install it)
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?
My favorite erb snippets are:
Link to install Erb-VSCode Snippets:
5. Emmet
Last but not least, Emmet is my dream coming true when typing html tags in .erb or .html.erb files. Instead of painfully writing the opening and closing of a tag such as h1, all you have to do is write the name of the tag and it will output the full tag for you.
For example, if I type “h1”, it will output “<h1></h1>”
To enable Emmet, you need to go to VS Code settings.
Type “include languages” and click on “edit in settings.json”
Enter"emmet.includeLanguages": {"erb": "html"} in the block and save the file.
This is a small peak of all the things Emmet can do. There are countless shortcuts to write code really fast as you can see in the cheat sheet below:
Final Note
I hope this article was helpful, feel free to add your favorite Ruby extensions or your questions in the comment section.
Shout-out to Oliver Burt and George Kirby for showing me some of these extensions!
Thanks to the publishers and contributors for building and improving these amazing extensions!
