The 8 Best Visual Studio Code Extensions for Programming Ruby
Tags: ruby, vscode, codequality, productivity
Published: 2020-10-01 23:33:58

> This post was originally created for the [Rootstrap blog](https://www.rootstrap.com/blog/the-8-best-visual-studio-code-extensions-for-programming-ruby/)

<!-- wp:heading -->
<h2>Choosing a Text Editor</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It may be a tough decision, as a programmer, to choose a text editor, since it will be your main tool to do your work, and you will use it every day in your work-life.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Everybody has their favorite text editor, I have known people who use&nbsp;<strong><a href="https://www.vim.org/">Vim</a>,&nbsp;<a href="https://notepad-plus-plus.org/">Notepad++</a>,&nbsp;<a href="https://www.sublimetext.com/">Sublime Text</a>,&nbsp;<a href="https://atom.io/">Atom</a></strong>, and many others.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I have tried different text editors in my career and was always looking for the perfect one. At first, I started with Sublime Text, later the pretty UI of Atom hooked me, and for the last year I have been coding with&nbsp;<strong>Visual Studio Code</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I was enjoying Atom, but in some cases, my computer at the time couldn't handle it very well and it was getting a bit laggy to open the text editor or work with it. So a friend of mine told me that maybe Visual Studio Code could fit my needs, and he was right.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Visual Studio Code Extensions</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">GitLens</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This extension includes a lot of cool functionalities of Git in Visual Studio Code: "GitLens simply helps you&nbsp;<strong>better understand code</strong>" says Eric Amodio, the creator of the extension.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I love Gitlens because it allows me to detect who wrote the code that I am reading, and this is really useful because when I have doubts about the code, I know who to talk to.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Features:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>An unobtrusive current line blame annotation at the end of the line with detailed blame information accessible via hovers</li><li>Authorship code lens showing the most recent commit and # of authors to the top of files and/or on code blocks</li><li>A status bar blame annotation showing author and date for the current line</li><li>On-demand gutter blame annotations, including a heatmap, for the whole file</li><li>On-demand gutter heatmap annotations to show how recently lines were changed, relative to all the other changes in the file (hot vs. cold)</li><li>On-demand recent changes annotations to highlight lines changed by the most recent commit</li><li>And much&nbsp;<a href="https://gitlens.amod.io/#features">more</a>.</li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":5715,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.rootstrap.com/blog/wp-content/uploads/2020/08/gitlens-preview.gif" alt="" class="wp-image-5715"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2><a href="https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby">Ruby</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This extension provides enhanced Ruby language and debugging support. One of the coolest things about this extension is the syntax support to our ruby files, so this is a&nbsp;<strong>must-have</strong>&nbsp;if you are a Ruby developer.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Features:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Automatic Ruby environment detection with support for rvm, rbenv, chruby, and asdf</li><li>Lint support via RuboCop, Standard, and Reek</li><li>Format support via RuboCop, Standard, Rufo, and RubyFMT</li><li>Semantic code folding support</li><li>Semantic highlighting support</li><li>Basic Intellisense support</li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":5716,"className":"size-large"} -->
<figure class="wp-block-image size-large"><img src="https://www.rootstrap.com/blog/wp-content/uploads/2020/08/vsrubycode-1024x800.png" alt="" class="wp-image-5716"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2><a href="https://marketplace.visualstudio.com/items?itemName=castwide.solargraph">Ruby Solargraph</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Another&nbsp;<strong>vital</strong>&nbsp;extension if you are a Ruby developer, which gives Visual Studio Code some features that can be found in IDE's like "Go to definition" for classes, modules, and methods. Also provides documentation and code completion. If you are learning Ruby, this extension will help you a lot.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Features:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Context-aware suggestions and documentation for the Ruby core</li><li>Detection of some variable types and method return values (e.g., String.new. returns String instance methods)</li><li>Identification of local, class, and instance variables within the current scope</li><li>Find references and rename symbols (experimental as of solargraph gem v0.22.0)</li><li>Support for gems</li><li>Near-complete support for the Ruby core and stdlib</li><li>Partial support for Ruby on Rails</li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":5717,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.rootstrap.com/blog/wp-content/uploads/2020/08/rubysolargraph.gif" alt="" class="wp-image-5717"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2><a href="https://marketplace.visualstudio.com/items?itemName=misogi.ruby-rubocop">ruby-rubocop</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Having RuboCop configured in your ruby project will help you maintain the quality of the code, especially if your project is being developed by a team. This extension will let you autoformat and correct your code basing it the directives written in the .rubucop.yml file. With only a key shortcut your code will be formatted in a second, it's fast, it's good, it's an&nbsp;<strong>essential</strong>&nbsp;extension.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Features:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Lint by executing the command "Ruby: lint by rubocop" (cmd+shift+p and type command)</li><li>Auto invoke when saving file</li><li>Auto correct command "Ruby: autocorrect by rubocop"</li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":5718,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.rootstrap.com/blog/wp-content/uploads/2020/08/rubyrubocop.gif" alt="" class="wp-image-5718"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This extension will help you to format the code of Javascript, HTML, CSS, JSON, and many more files. Is simple and quick, is not as configurable as other code-formatter extensions.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Features:</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Supports many languages</li><li>You press save and code is formatted</li><li>No need to discuss style in code review</li><li>Saves you time and energy</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2><a href="https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons">VSCode Great Icons</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A very simple one, adds icons to your files and it personally helps me a lot to know instantly which kind of file I'm viewing.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5719,"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.rootstrap.com/blog/wp-content/uploads/2020/08/vscodegreaticons-1024x670.jpg" alt="" class="wp-image-5719"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Switching from Atom to Visual Studio Code</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I missed the Atom shortcut keymap so much when I made the switch, but here is your salvation.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings">Atom Keymap</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This extension ports popular Atom keyboard shortcuts to Visual Studio Code and helps to make the switch between code editors a lot easier.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark">Atom One Dark Theme</a></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>And the last extension that I will share with you is an aesthetic one, when I started using Visual Studio Code I missed the theme that Atom provides, so this extension fixed that problem for me.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Conclusion</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>These are currently my favorite extensions for Visual Studio Code. I hope this famous code editor will help you improve your experience. Please feel free to comment below if you have any other extension recommendations!</p>
<!-- /wp:paragraph -->