DEV Community

Better Comments (VScode Extension)

Jp De Los Trinos on February 14, 2022

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

Read full post

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?

Rahul charan • Jan 13 • Edited

*For python Users : *

navya • Feb 5

This worked for me