How To Use the Comment Shortcut in VS Code

In coding, comments are one of the few ways of preserving thoughts for the future. They can help you gloss across code snippets and can be helpful for the next developer that will be trying to understand what you wrote days before. If you’re using Visual Studio Code (VS Code), there’s no need to tirelessly type out comment delimiters every time. VS Code has a built-in shortcut feature that saves seconds (and even minutes) of your time.

The Quick VS Code Comment Shortcut

For those in a hurry, here’s your golden ticket:

• For a single-line comment, use the Ctrl + / key combination on Windows or Linux or Cmd + / on a Mac.
  ,
• For a block comment, use Shift + Alt + A on Windows or Linux or Shift + Option + A on a Mac instead.
  ,
• To comment out code, you can press Ctrl + K + C on Windows or Cmd + K + U on Mac.
  ,

Most coders comment a lot. And it isn’t just about leaving actual comments, but perhaps more importantly, you will be commenting out and uncommenting code. This is viable for testing, experimenting, and debugging.

Shortcuts are there to make this more palatable. They expedite navigation and alteration, permitting you to toggle comments without disrupting coding momentum.

Commenting Beyond the Basics

While the basic shortcuts are a real gift, there’s so much more to commenting VS Code. Let’s delve deeper:

Toggle Comments

The best part about the VS Code comment shortcuts is their toggle feature. You don’t need to fiddle about and remove each comment marker manually if you change your mind (or during debugging). Instead, you just use the same shortcuts. With the same key combinations, you get to quickly switch between commented and uncommented code to stay organized when you need it most.

Commenting Multiple Lines

If you need to mute a lengthy block of code or leave an extensive, detailed comment, you don’t want to spend time arduously adding comments line by line. So instead, you can select the lines you want to deactivate and use the comment shortcut to let VS Code insert comments into each line.

Nested Comments

Sometimes, inserting comments into a code block can lead to unexpected results and errors if the delimiters don’t match up really well. This is where Visual Studio Code’s Intellisense can help you out. It will adjust the comment formatting for you even within an already commented-out block, so there won’t be conflicts with nested comments.

Extensions to Supercharge Commenting

VS Code is an open-source editor serving as a platform for developers to put out their best extension work. The marketplace is brimming with extensions to give you more power and utility when commenting:

Better Comments

Commenting may seem like a small and optional part of coding, but there are so many creative ways to use comments. The Better Comments extension helps you add purpose and clarity to the comments you sprinkle about by categorizing them into alerts, queries, TODOs, and other categories. And that’s all with the added bonus of color-coding for improved visibility and organization. Your comments become guiding points and separators that make your code neater and more approachable.

Comment Anchors

Comment Anchors keep you grounded in your code with pinpoints that distinguish sections or essential spots within. If you try this extension, it will let you rapidly find precise notes and remarks. If your project is vast and your code is getting crammed and hard to follow, this might make it much more digestible.

Polacode

Polacode transforms your code and comments into visually interesting, easily legible, shareable images that are perfect for social media. It lets you resize, color-code, change the background, and more. You benefit from greater readability, and any teammates can collaborate and share insights much easier.

Why Comment?

Commenting isn’t just a box to tick or some optional chore that wordy people do; it’s an integral part of coding. Here are some of the reasons for that:

Clarity

Coders seek to make the intractable intelligible. Writing code that works can sometimes be more straightforward than writing code that’s easy to understand and follow. Comments are a developer’s compass – an invaluable aid to navigating expanses of code, be they light and young or dense and mature. You might be dealing with convoluted algorithms or arcane business processes. In any case, comments provide a familiar handhold in a sea of complexity.

Collaboration

Comments are handy when you’re a solo developer. But they’re necessary when working as a team if you wish your project makes any progress. Within a collaborative effort, comments let multiple developers seamlessly work together even when not interacting. Team members get to explain the code and share their thought processes and reasoning behind their decisions. This serves as a bridge that allows everyone to be on the same page with both the project and each other.

Debugging

If you find yourself revisiting old code or trying to debug something that mystifies you, comments become your saving grace. They keep a record of your past logic and thought process that can point you to the possible flawed logic and may lead you back to the bug’s origins. With this reminder of where you had been in the past, you can revert problematic changes, optimize older code, and get back on track.

Tips for Effective Commenting

Now you know how to use the comment shortcuts, have some convenient additional extensions, and comprehend scenarios when commenting is the most useful. All you have left is to consider some commenting best practices, and you will have graduated from the coding comments course.

Be Concise

There’s artistry in leaving behind concise, easily-digestible comments. Leave in just enough to give your future self or your team members the right idea, but not so much to be overwhelming. Each word of your comment should have a purpose and help build on the message you’re trying to convey. If your comment is too brief, it may fail to convey its message, but if it’s too long, you’re more likely to skim over or get confused by it in the future.

Avoid Obvious Comments

Relevancy should be your primary concern in creating clear and understandable code. If you already write your code so that its meaning is obvious, there is no need to mention something that can be seen at first glance. Let the code do the talking whenever it can and use comments to add extra context or provide new perspectives.

Use Comments for “Why,” not “What”

Your code lays out the facts of what is happening. But comments can tell a deeper story. They convey the motivations and thought processes behind your decisions. Why did you pick this algorithm over another? What were the pitfalls to keep in mind? Perhaps you tried some code many would recommend, but it didn’t work or wasn’t performing well. You can convey so much more than mere instructions with well-crafted comments.

Leaving a Comment

The VS Code commenting feature could be more than a convenience. If you take full advantage of it, the difference in the navigability and understandability of your codebase can be massive. Supplemented with clever extensions and a thorough strategy, you could soon create well-documented code that reads like a masterpiece.

Do you leave many comments to explain your code? Or do you mostly use comments to exclude broken or experimental code from the debugger? Tell us your story in the comments below. They are here to stay.