VS Code Extensions We Live For

MH - Senior Developer

10/08/20

Visual Studio Code is our text editor of choice, pros and cons aside, it’s the most fun you can have editing text in 2020. There’s a huge marketplace of extensions to further enhance the experience. Language support and linters are grand, but we all know about those (VS code will inform you of relevant extensions depending on file type). Instead, we want to share just a few of the VS Code extensions that make our working life that much sweeter. This list may grow over time, I would check back sometime.

Better Comments

Comments are good, but they can be better.

Help yourself to help yourself. Highlight comments based on how we actually use them. Like syntax highlighting for your comments, go beyond the forward slash and asterix. Draw the attention to your documentation and show your colleagues the inner workings of your mind. Maybe if those TODOs jump from the page they might actually get done one day. Maybe.

Footsteps

Vim users, look away. Never lose your place in a code monolith again. Quick visual highlighting for recently viewed lines of code. Scroll away and return once more with precision. Maybe a tad overkill for projects with small files, but configuration is king. Keybind flicking back to previous edits for the full experience. This new guy on the block may be one to watch, if you can remember where to find it.

The extension in-action
Where was I again?

Bracket Pair Colorizer

These brackets have matching colours
Colour coding can

We find this one especially useful for junior developers, keep track of code encapsulation with colour coded brackets. We have found that those who are new to programming can struggle keeping parenthesis in tow, big red errors are scary to the uninitiated. This format keeps the visual noise down while still providing a strong visual cue. Once you become a master you’ll probably just resent the deviation from your sick custom colour scheme.

Vuln Cost & Import Cost

Vuln cost reacting to a dependency vulnerability, scary.
Vulnerabilities are Snyky.

Two for one time, bargain. It wouldn’t be a C+C blog if we didn’t mention security, mitigate disasters with help from our favourite security watch dogs, Snyk! Every module you import will be scrutinised there and then, save yourself the headache in production. Similarly, import cost will keep the cost of javascript fresh in mind, presenting scary kilobyte counts. Enable this extension on projects where bundle size is a concern (hint: all of them).

Remote – WSL & Remote SSH

Developers limited to the Windows operating system benefit enormously from the Windows subsystem for Linux (WSL). Edit and execute your linux projects seamlessly with this part of the Remote family of extensions.

In a similar vein, Remote SSH functions similarly if you ssh to your development environment. This came in very handy when we got stuck abroad! There’s more in this line of extensions, check out the marketplace to see if there’s one that suits your team.

VSCode-Spotify

A scene from the social network demonstrating the cataclysmic effects programming.
Don’t disturb him, he’s wired in.

The office is alive with music and we need to skip our colleagues’ songs, or maybe you’re wired in and cannot be separated from your code. You can’t make it obvious by having the spotify app or web page open. Control your playlist from inside VS code, cool.

Visual studio code status bar displaying inline spotify commands.
Next, pause, and rewind all the time.

Polacode

wordpress widget code snippet in a pretty box
Best foot forward

Make your code snippets look gorgeous while infuriating myriad wanton copy and pasters. We’ve used it for presentations, social media posts and bragging rights. We saw this window dressing from carbon first, but this handy extension fits the bill without opening any more browser tabs.

That’s all this time, but hopefully you found your next favourite VS Code extension!