Write Better Comments in VS Code

Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

egghead
egghead
~ just now

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today