This post was originally published at https://stevenmercatante.com
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
console.log is a JavaScript developer's best friend. You don't need to install or import it, it's instantly recognizable, and it gets the job done. But it's annoying having to type it all the time. This is where Turbo Console Log comes in to play. TCL speeds up the logging process by letting us select a variable and trigger a keyboard shortcut to instantly add a 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.
👀 See it in action
🚀 Install Turbo Console Log
VSCode Dimmer
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.
👀 See it in action
Better Comments
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 !, ?, and 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.
👀 See it in action
Git Lens
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.
🚀 Install Git Lens
Import Cost
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.)
🚀 Install Import Cost
What are some of your favorite extensions? Let me know in the comments below!
👋 Enjoyed this post?
Join my newsletter and follow me on Twitter @mercatante for more content like this.
Top comments (2)
Thanks for sharing! This is what I get when I run
code --list-extensions:The super important ones: Vim, Git Lens, and Prettier,
Thanks for sharing this list! I need to check some of those out.