I've been using Visual Studio Code for over 3 years, and in that time I've used many different extensions. In this article I want to talk about some of my favorite ones, and how they make my life easier.
Turbo Console Log
log call for that variable. Not only that, but it can include the name of the function or class that contains the variable you're logging. This instantly adds more context to your logs without requiring extra typing from you. It also provides handy keyboard shortcuts to comment, uncomment, and delete any log statements it adds.
VSCode Dimmer is one of those tools that doesn't make me more productive when coding, but it definitely helps me when teaching or explaining code to others. It works by dimming the code surrounding the currently selected line. Basically, it's like shining a flashlight on the code you want the user to focus on. This is especially useful for screencasts, or getting your audience to focus on specific blocks of code during a presentation. VSCode Dimmer lets you configure a keyboard shortcut to quickly enable and disable it, as well as configure how many lines of code to dim.
This is one of those extensions whose functionality should be included in every editor. It's such a simple idea, but so useful. By adding specific characters to the beginning of your comments (like
TODO) it applies different colors to your comments. So if you've got an important comment, prefix it with
! and it'll appear red. My favorite feature of this extension is being able to add your own custom prefixes and colors - you're not limited to the prefixes provided out of the box.
Git Lens's tagline is "Git supercharged", and it is not kidding. I love this extension because of the additional information it provides at a glance. You can quickly see who authored a commit and when, browse repositories, travel through history, and more - all without leaving VS Code. Plus, it's super customizable. This is one of my favorite tools when navigating a large existing codebase. It's impossible for me to list all the features available in this article - I highly recommend installing it and seeing everything it has to offer.
There's no denying the benefits of NPM and the ease of installing packages, but it's easy for your app's size to bloat without realizing it. Import Cost shows you the filesize of the package you're importing, so you can see at a glance how much heavier your app will be. It can be an uncomfortable wakeup call, but a necessary one (kinda like when fast food restaurants show the calorie count next to their items.)