Jp De Los Trinos

Posted on Feb 14, 2022 • Updated on Feb 15, 2022

Better Comments (VScode Extension)

#webdev #css #html #vscode

Not too long ago, I found out about this VSCode Extension called Better Comments when I was watching a youtube video. I've been using it ever since. What it does is spice up your code commenting game by allowing different colored comments which would make them stand out rather than the boring grey default.

How to use it

Using the extension is very straightforward. Some special characters are just needed to be prepended after the comment symbol (ex: // for javascript) and before the actual comment itself.

Examples:

These are the default font configurations for every comment type like red for alert but it's completely up to you what configurations you use (ex: different font colors, weight, style, etc). They can be easily changed in the settings.json file. See Extension Page for the exact steps.

Closing Thoughts

I think this is a must-have extension for every developer because it just improves the quality of life and makes important comments stand out which would save you the headache of finding them. It sucks having to break your concentration when you're on a roll.

Top comments (14)

Andy Piper • Feb 14 '22

This is super handy, I leave myself TODO reminders in my code, so I like to have this extension installed as well.

Jp De Los Trinos • Feb 14 '22

My only challenge when setting it up was choosing the best color for the theme I'm using (Dracula) to make it stand out. Although it's not that much of a challenge but still one nonetheless. Cheers!

Dimitar Bogdanov • Feb 15 '22

Can you please share your colours?

Jp De Los Trinos • Feb 15 '22 • Edited

I basically just copied the color palette from the Dracula theme but utilized the background color of the comments to make them stand out more. Here are the hex codes:
Comment Example (color, backgroundColor). Cheers!

// * Comment Example (282A36, 50FA7B)
// ? Comment Example (282A36, 8BE9FD)
// ! Comment Example (F8F8F2, FF5555)
// TODO Comment Example (282A36, FFB86C)

Faizanur Rahman • Apr 27 '22

most needed extension...
here is my vscode setting for this extension


 "better-comments.tags": [
    {
      "tag": "setting",
      "color": "#322e2f",
      "backgroundColor": "#10ff3d",
      "bold": true,
      "italic": true,
      "strikethrough": false,
      "underline": false,
    },
     {
      "tag": "added",
      "color": "#00CCFF",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "#833AB4",
      "bold": true,
      "italic": true
    },
     {
      "tag": "edited",
      "color": "#1F1926",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "#008FFF",
      "bold": true,
      "italic": true
    },
     {
      "tag": "refactor",
      "color": "#1F1926",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "#FCEAFF",
      "bold": true,
      "italic": true
    },
    {
      "tag": "removed",
      "color": "#926D00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "#C4FCEF",
      "bold": false,
      "italic": false
    },
    {
      "tag": "-",
      "color": "#926D00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "#C4FCEF",
      "bold": false,
      "italic": false
    },
    {
      "tag": "!",
      "color": "#FF0000",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "#B0A8B9",
      "bold": true,
      "italic": true
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "//",
      "color": "#474747",
      "strikethrough": true,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "#e2d92a",
      "bold": false,
      "italic": true
    },
    {
      "tag": "*",
      "color": "#aa0af4",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "#000",
      "bold": false,
      "italic": false
    },
    {
      "tag": "fixme",
      "color": "red",
      "backgroundColor": "#1c33a2",
      "bold": true,
      "italic": true
    },
    {
      "tag": "note",
      "color": "#322e2f",
      "backgroundColor": "#12a4d9",
      "bold": true,
      "italic": true,
      "strikethrough": false,
      "underline": false,
    },
    {
      "tag": "reference",
      "color": "#10ff0d",
      "bold": true,
      "italic": true,
      "backgroundColor": "#12a4ff",
    },
    {
      "tag": "fixed",
      "color": "#10ff3d",
      "backgroundColor": "#1c33a2",
      "bold": true,
      "italic": true,
      "strikethrough": false,
      "underline": false,
    }
  ]

I would love to see other's settings.

nayab12345 • Oct 20 '22

where should we add these in vs code?

James Thomson • Feb 15 '22

That's a nice one, I like the highlighting. I quite like Todo Tree which gives you a nice directory tree UI to work with.

Andrew Baisden • Feb 19 '22

Definitely a must have extension to have installed.

Davide • Oct 28 '23

Hi, in the extension info there are lot of languages compatible with but i still didnt understand how to make it works in HTML since the comments starts with <!-- and not //.
Every hint will be apreciated.

Davide • Oct 28 '23

i respond to myself. it just needs to do <!-- plus the character/word you want to use.

Andy Piper • Feb 14 '22

Thanks, will take a look!

I aM 🐴 • Jan 4

I've used this extension forever, but I want to add jinja comment tags "{#" to "#}". I see the settings.json key/value pair to enable multiline comments in general, but not how to register {# and #} as opening and closing tags. I tried adding them individually, but it just reads as a single line tag.

Anyone have an idea?