DEV Community

Jp De Los Trinos
Jp De Los Trinos

Posted on • Updated on

Better Comments (VScode Extension)

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:

Better Comments 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.

Discussion (9)

Collapse
andypiper profile image
Andy Piper

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

Collapse
lukeshiru profile image
Luke Shiru

You might enjoy this extension more, it highlights comments that start with TODO and FIXME. Is one of my favorites ❤️

Collapse
jamesthomson profile image
James Thomson

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.

Collapse
andypiper profile image
Andy Piper

Thanks, will take a look!

Collapse
devdotjp profile image
Jp De Los Trinos Author

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!

Collapse
dimitarbogdanov profile image
Dimitar Bogdanov

Can you please share your colours?

Thread Thread
devdotjp profile image
Jp De Los Trinos Author • Edited on

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)
Collapse
faizanurrahman profile image
Faizanur Rahman

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,
    }
  ]
Enter fullscreen mode Exit fullscreen mode

I would love to see other's settings.

Collapse
andrewbaisden profile image
Andrew Baisden

Definitely a must have extension to have installed.