Useful VSCode Extensions

#beginners #vscode #extensions #shortcuts

VSCode (Visual Studio Code) is one of many code editors. A few of them are Atom, Sublime, and Brackets. All of these text editors have their pros and cons, advantages and shortcomings. Needless to say, they are all similar in the fact that they were created to make writing code easier for the coder. The languages, libraries and frameworks that I use regularly are JavaScript, React, Ruby, and Ruby on Rails.

Here are some of my favorite extensions and why.

1) Bracket Pair Colorizer. It does what the name suggests: this extension makes reading and debugging easier. You can see that it will also add a colored line to the pair of brackets or parentheses.

Although I have not set this up on my own VSCode, you are also able to customize when the brackets change color.

Even the standard configuration is a great setup and has been very helpful at reducing syntax errors.

2) Rainbow End is along the same vein and colors your ends in Ruby (it works with other languages as well). It has been very easy to identify when I am missing an end or if I have to many ends. Here are some examples of Ruby methods with Rainbow End enabled:

3) Draw.io Integration. If you work on your own projects, I'm sure that you have at least heard of Draw.io. It is a user-friendly web app for making diagrams. The integration extension is not officially from Draw.io, but this particular extension is very useful as it allows you to have any and all of your relevant diagrams in your project file, which ends up being a big time saver. I have not tested the full capabilities of this extension yet, but I'm sure that there are plenty of features that I would like.

The only drawback that I have run into is, when I have a large diagram up on one side of my VSCode and the code that I am editing on the other side, I will sometimes have to scroll through the diagram because I can't see the full diagram or have it on a separate screen.

These next few extensions come with a caveat, as they can instill some bad habits. So use with caution.

4) Endwise is nice because it will automatically add end when you are writing methods in Ruby. It is also pretty intuitive at knowing when an end is needed or not. This gif is not a great example but you can get an idea of how it works:

The downside this is that you can become reliant on the extension to add all of your ends, and then you have a propensity to completely forget common syntax of the coding language.

5) Tabnine is another "double edged sword" extension. This is an autocomplete, or AI-assisted code completion, AI-powered code completion, AI copilot, AI code snippets... whatever you want to call it is up to you, but it can definitely help to save time. I like to use longer names for my function names, so the autocomplete is great for saving key strokes. I'm not the greatest at spelling so the spellcheck is also nice. It does have some quirks as well, especially when it tries to be too helpful by giving you suggestions that you don't need or want. Like this I only want the method of show and it thinks I would like show_exceptions, which hinders me from being able to just hit enter and go to the next line, as I would normally do. There is a shortcut to bypass this suggestion from Tabnine: you can hit "command + enter" for Mac or "control + enter" for PC, and it will move you to the next line.

All these extensions have been very helpful for me in my projects. I am sure that there are a number of other extensions out there I have yet to discover and may find even more useful, but for now, these are some my favorites. I hope that these can be helpful to you as well.

Postscript: A good indicator to determine if an extension is noteworthy or relevant is by looking at how many downloads it has and if there have been recent updates/responses to questions by its originator.

Comment below about your favorite extensions.