The most useful Visual Studio Code extensions I use for Ruby development
I use Visual Studio Code daily for web development with Ruby on Rails. By default, it is a great editor with handy tools. But its great power lies in its extension system. It’s like the phrase “there’s an app for that”. You could also say that “there’s an extension for that”: for almost anything you need in your development work, there is undoubtedly an extension that will make things easier.
Below is a list of the extensions I use in alphabetical order.
ANSI Colors
If you open a log file in Rails, you will see that there are strange codes all over the place, making them almost impossible to read. Those codes are ANSI codes for coloring the lines.
With this extension, you will be able to translate those codes to colors and read the logs comfortably, just like in the development console.
How to use
Once the extension is installed, open the log and then the command palette (CMD+Shift+P on macOS) and find the ANSI Text: Open Preview option.
The text will be colorized, as you can see in the image above.
Link: https://marketplace.visualstudio.com/items?itemName=iliazeus.vscode-ansi
Auto Close Tag
To automatically close HTML tags.
Although by default, Visual Studio Code already automatically closes HTML tags using the “html.autoClosingTags” option, this extension allows you to configure in which languages to activate the function.
How to use
It works automatically closing tags in file types other than HTML (where Visual Studio Code already does it by default).
It also allows auto-complete tag closing, like Sublime Text does.
But the most helpful feature is its shortcut (CMD+Shift+. on macOS), especially in templates.
Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Copy With Line Numbers
To copy code snippets next to their line numbers.
You can also copy the file name.
How to use
Select the code snippet you want to copy, open the command palette and look for the Copy With Line Numbers option. You have 2 variants: With File Name and Without Path.
Then just paste it wherever you want.
Link: https://marketplace.visualstudio.com/items?itemName=yassh.copy-with-line-numbers
Endwise
To add the end automatically to Ruby blocks.
How to use
After opening the block, press Enter, and the end is automatically added.
It is also added if you do CMD+Enter in the middle of the line.
Link: https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise
ERB Linter
To check the code style in an ERB file.
How to use
You need the erb_lint gem. You can install it globally or via the Gemfile with Bundler.
You have several ways to check the style from Visual Studio Code:
- Save the ERB file, and it will flag errors.
- Open the command palette, and choose ERB Linter: lint with erb-lint to check the style.
- Also, from the command palette, choose ERB Linter: autocorrect current file with erb-lint to autocorrect potential errors.
Link: https://marketplace.visualstudio.com/items?itemName=manuelpuyol.erb-linter
ESLint
To integrate ESLint into Visual Studio Code.
One way or another, your application will end up having JavaScript. This extension ensures that your code follows JavaScript style standards.
How to use
First, install and configure eslint on your machine, and then this extension.
When you open a JavaScript file, the extension will check the syntax and style you chose when you installed the library.
Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Git Blame
To show who and when wrote the line of code where the keyboard cursor is in the status bar.
How to use
Simply place the keyboard cursor on a line of code and watch the status bar.
In addition, a click on this information opens the last commit that changed the line.
Link: https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame
GitHub Theme
The official GitHub theme, with various color schemes.
How to use
After installing the theme, open the theme list (on macOS, this is done with CMD+K and then CMD+T, I think on Windows it is the same but with CTRL).
You will see the different theme variations for the light and dark versions.
Link: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
Output Colorizer
It colorizes the panels, such as the output panel.
How to use
You don’t have to do anything. The content of the panels is automatically colorized.
Link: https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer
Rails DB Schema
- Autocomplete attributes on model objects
- Access the definition of those objects
- Access schema tables
- Insert attributes defined in the schema where the cursor is located
How to use
- The auto-completion works after you type a dot.
- To access the definition of an object, press CMD (or ALT on Windows/Linux) and point the mouse at the object. An underline will appear. Click, and you will see where it has been defined, inside a floating zone. The truth is that it is very convenient and helpful.
- To access the tables defined in the schema, you must access the command palette and search for Rails DB Schema: Open
- To insert attributes, the same thing: access the command palette and search for Rails DB Schema: Insert
Link: https://marketplace.visualstudio.com/items?itemName=aki77.rails-db-schema
Ruby Solargraph
Auto-completion, code check, and documentation for Ruby.
How to use
For this extension to work, you have to install the solargraph gem: gem install solargraph
- As you see in the demo above, it detects variables and objects and provides auto-completion after putting a dot. If it doesn’t appear automatically, you can press CMD+Space on macOS (or CTRL+Space on Linux/Windows).
- If you hover on any object or method, a popup with documentation appears.
- It has a linter included to verify the code style with Rubocop. You must access the extension configuration and enable the Diagnostics option. I like its high speed and that you don’t need to save the file to verify it.
If you open the command palette and select Solargraph: Create a Solargraph config file, it will create the .solargraph.yml file in the project’s root.
The most interesting options are where to do the checks and which linters to use. I usually assign all! to the reporters option so that it uses them all.
Link: https://marketplace.visualstudio.com/items?itemName=castwide.solargraph
SVG
To create, modify, minify and preview SVGs.
How to use
- As you edit an SVG file, it shows you auto-complete suggestions.
- If you want to remove everything unnecessary, access the command palette with the SVG file open and choose Minify SVG.
- The most interesting, in my opinion, is when you want to preview images in SVG format. Right-click on the file and choose Preview SVG. You can also select that option from the command palette if you already have the file open.
Link: https://marketplace.visualstudio.com/items?itemName=jock.svg
VSCode rdbg Ruby Debugger
To debug Ruby with Visual Studio Code tools.
Perhaps one of the most exciting extensions I use since debugging in Ruby is usually done in the console. But this way, you can do it visually.
How to use
You will need to have the debug gem installed on your system, the new standard in Ruby.
- Go to the Run and Debug section and create a new launch.json file.
- Choose Ruby as the language.
- Configure it with whatever you need. For example, if you want to do debugging in Ruby on Rails, put this in the script option: “${workspaceFolder}/bin/rails server”.
If you’re interested in this topic, I’m currently working on a course for LinkedIn Learning that you’ll find very useful. Follow me, and I’ll post an update when it’s ready, with a surprise.
Link: https://marketplace.visualstudio.com/items?itemName=KoichiSasada.vscode-rdbg
vscode-gemfile
For quick access to the documentation of the gems defined in your Gemfile.
How to use
- Hover over a gem name, and a popup will appear with a link to the RubyDoc documentation.
Link: https://marketplace.visualstudio.com/items?itemName=bung87.vscode-gemfile
vscode-icons
An icon pack that works very well in Ruby projects.
I’ve tried others, but I didn’t get used to them. Some were too garishly colored, and others too dull. I think this pack has an interesting style without being too flashy.
How to use
Just install it, and after reloading the editor, it will ask you to activate the icons.
If the message doesn’t appear, open the command palette and search for the Icons: Activate VSCode Icons option.
Link: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
VSCode Ruby
Includes many valuable snippets. The one I use the most in Ruby classes is to create a method (with the def shortcut). In ERB, I use it to open labels (er and pe shortcuts), close blocks (with the end shortcut), and create conditionals (with if, else and elseif shortcuts).
On the other hand, it has an autocomplete function, as you can see in the screenshot below, opening an additional popup with documentation that you can quickly see.
How to use
After installing it, you can use its snippets. Do not choose the first suggestion if you want to use the def shortcut in a class. It is the second one that comes from this extension.
Regarding the auto-completion, it is activated when you put the dot. If it does not appear, you can force it with CTRL+.
Link: https://marketplace.visualstudio.com/items?itemName=wingrunr21.vscode-ruby
