8 Incredible Extensions For Visual Studio Code

Gene Campbell III
5 min readOct 19, 2020

Visual Studio Code is a free code editor redefined and optimized for building and debugging modern web and cloud applications. It supports a wide variety of programming languages such as JavaScript, TypeScript, Node.js, C++, C#, Java, Python, and more! I’ve been a developer for almost 4 years now, and I love VS code. I use it for all my projects. Primary, I use VS code for JavaScript and Ruby as these are my most frequently used languages. As you know though, VS code has support for much more!

Over my years of using VS code I’ve discovered or been informed about a couple valuable VS code extensions that I would like to share. They make my job easier as a developer, and I believe you should use them too if you’re not already doing so. I will now go over a couple different extensions that you should download today! As I mentioned above, I primarily code in Ruby and JavaScript, so these extensions will be aimed towards the previously mentioned languages. All of these extensions listed can be downloaded by going to the extensions tab in VS code on the left panel.

1. VSCode Ruby and Ruby

What It Is:

Provides improved syntax highlighting, language configuration, and snippets to Ruby and ERB files within Visual Studio Code. It is meant to be run alongside the Ruby extension. The Ruby extension is necessary to write code in Ruby in Visual Studio Code.

What I Think:

— This extension will change the color of variables and functions/methods text to make them easily identifiable.

2. IntelliSense for CSS class names in HTML

What It Is:

A Visual Studio extension that provides CSS class name completion for the HTML class attribute based on definition found in your workplace.

What I Think:

— If you begin to type in a “class” name for an HTML tag that has already been declared or used, the full name will be provided for easy completion.

— Saves time when repeating class names, especially when they are long.

3. indent-rainbow

What It Is:

An extension that colorizes the indentation in front of your text alternating four different colors on each step.

What I Think:

— This makes it really easy to understand the flow of your indentations when coding.

4. endwise

What It Is:

An extension that wisely adds the “end” keyword to code structures in Ruby while keeping the correct indentation levels.

What I Think:

— Every time you write an “if” or “do” and hit enter, VS code will automatically add an “end” to your statement with correct indentation.

— Supports more than just “if” and “do” statements

5. Bracket Pair Colorizer

What It Is:

An extension that allows matching brackets to be identified with colors.

What I Think:

— This extension is awesome when you have nested functions or loops. It helps keep everything organized and easily to follow and maintain.

6. Code Spell Checker

What It Is:

A basic spell checker that works with camelCase too.

What I Think:

— This is very helpful because I know I always make spelling errors when writing paragraphs of information for a web site or project.

— Only words with 3 or more character will be checked!

7. GitLens

What It Is:

This extension helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

What I Think:

— It displays comments of any git updates on the code file. It also shows which user made which updates and configurations.

— This is great when working solo or with a team. Each team member can easily view additions and deletions from each team member by name.

8. Material Icon Theme

What It Is:

This extension adds Material Design Icons to VS Code.

What I Think:

— Changes how the folders are displayed on the left panel for each project.

— It makes folders such as images, videos, components, views, and more to have their own specific folder icon. This makes them easier to find and navigate through when exploring through the project.

I hope you rush to your Visual Studio Code to add these extensions if you haven’t already. I promise they will make your life easier as a developer! I hope you found this article helpful, and please feel free to reach out to me if you like. You can connect with me on LinkedIn or check out my portfolio site! Thanks for reading and have a great day!

Sources:

--

--