Six VSCode Extensions For New Web Developers
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.
TL;DR
For those just here for the highlights:
Indent-Rainbow
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!
Auto Rename Tag
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!
endwise
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.
Debugger for Chrome
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.
Bracket Pair Colorizer 2
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.
VS Color Picker
Especially when working with CSS, this color picking extension will help you find *just* the right color for your background.
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:
