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.
For those just here for the highlights:
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 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
Bracket Pair Colorizer 2
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.