Write Better Comments in VS Code

Share this video with your friends

Social Share Links

Send Tweet

The better-comments extension lets us specify different types of comments and color them accordingly. This lets you add semantic meaning to your comments, for example: you can mark some comments as TODO, and others as important, or as questions. You can also define your own custom types of comments.

Instructor: [0:00] Start by searching for the Better Comments extension and install it. Now that that's installed, let's see how it works. Regular comments will continue to appear the same, but now we have the ability to add specialized comments. We can add specific to-do comments. We can add important comments. We can add questions. We can add emphasized comments.

[0:38] We can also strike out regular comments by adding two additional slashes. The characters that control the appearance of the comments are known as tags. We can customize these tags as well as create our own custom ones. Open up your settings, and search for "better comments".

[0:58] Where it says, "Better Comments Tags," click edit settings JSON. Type Better Comments Tags and hit enter for auto completion. This list shows the existing five tags that Better Comments supports. Let's create a custom one by copying this.

[1:22] Now, whenever we start a comments with the @ sign, we want the color to be pink. You can see that the custom color hasn't taken effect. That's because we actually need to restart VS Code after changing those settings.

[1:41] I just restarted VS Code, and you can now see that our custom comment has the specific color we asked for. Any time you change the settings for Better Comments, remember to restart VS Code.