Six VSCode Extensions For New Web Developers

Photo by Christin Hume on Unsplash

When the iPhone first hit the market, I would commonly hear the phrase “there’s an app for that”. Need a scientific calculator? Want a way to see what restaurants are nearby? Need access to multiple email inboxes? There’s an app for that. The Apple catch phrase was good at marketing without singling out specific apps, but rather encouraged the user to explore the growing field for themselves.

In a similar way, VSCode could make its slogan “there’s an extension for that”. Do you always forget to put an “end” after a method when coding in Ruby? Does your HTML look like it needs some serious formatting? Do you wish your indenting was consistent as you type furiously on a project? Odds are, there’s an extension for that. While this is by no means comprehensive, I’ve compiled a list of six extensions that I personally find helpful as I delve into Ruby, Ruby on Rails, and Javascript.

Let’s see some VSCode extensions at work!

This extension makes each indented block of code a different color. Particularly with HTML, this extension is extremely helpful. It makes working with nested data smoother, and helps me stay organized!

Screenshot of some of my schoolwork. Rainbows of organization!
Photo by Wesson Wang on Unsplash

This extension keeps track of which open and closing tags go together, and if one is renamed, the other follows suit. I find this helpful if I change an HTML header tag from H4 to H2, for example. No more hunting for corresponding div tags- this extension has got you covered!

image source:

Endwise is a Ruby specific VSCode extension that adds an “end” as needed to blocks of code. This has become a lifesaver for me when coding with enumerable methods- I often miss when a do needs an end.

image source:

Chrome developer tools already come in handy when working in the browser. This debugger extension allows you to open up Javascript code from within the browser to work on code without having to toggle between VSCode and the browser. Especially when coding on a single screen, this extension makes life a little simpler! Note that this extension does not save any changes you may make to your code on the browser, but more-so acts as a console for your whole code at large.

Selecting the index.js file I am currently working on from Debugger for Chrome
Photo by Tianyi Ma on Unsplash

As a newcomer to Javascript, this VSCode extension has been a real life saver. Each curly bracket, square bracket, and set of parenthesis is a different color, to help speed up debugging if one gets deleted, inserted into, or otherwise unbalanced.

Look at all of those corresponding color pairs

VS Color Picker

Especially when working with CSS, this color picking extension will help you find *just* the right color for your background.

image source:

This is hardly scratching the surface when it comes to VSCode extensions. I have linked a few other blogs that list other helpful extensions, keyboard shortcuts, and terminal customizers.

Venturing into these extensions has certainly helped me feel more involved and aware of my code as I learn. It makes learning a little more interactive and fun, and spurs me on when I feel burnout on the horizon.

Hopefully this inspires other new developers to go do some exploring of their own. While the vast sea of options is overwhelming, even one extension can help you on your journey in web development. Odds are, there’s an extension for that.

Additional sources:

Blog by Sywia Vargas

Post by X-team

Blog by Dev Genius

Blog by Bits and Pieces

Software Engineer in training at Flatiron School. Passionate about coding, cats, and crossfit

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store