DEV Community

Cover image for How a VS Code Extension "Todo Tree" can make your coding easier | Todo Tree Configuration | Highlighting Comments in VS Code

How a VS Code Extension "Todo Tree" can make your coding easier | Todo Tree Configuration | Highlighting Comments in VS Code

devkoustav on October 27, 2022

Highlighting Comments with Todo Tree VS Code Extension The Todo Tree extension quickly searches your workspace for comment tags like TOD...
Collapse
 
andypiper profile image
Andy Piper

Great post, this was helpful.

My VSCode complained about the use of HTML color names instead of RGB or HEX values, so here's the same set of config for the highlights, but with the names replaced with the hex equivalents:

    "todo-tree.highlights.defaultHighlight": {
        "icon": "alert",
        "type": "text-and-comment",
        "foreground": "#000000",
        "background": "#FFFFFF",
        "opacity": 50,
        "iconColour": "#0000FF",
        "gutterIcon": true
    },
    "todo-tree.highlights.customHighlight": {
        "TODO": {
            "icon": "check",
            "foreground": "#000000",
            "background": "#FFFF00",
            "iconColour": "#FFFF00"
        },
        "NOTE": {
            "icon": "note",
            "foreground": "#FFFFFF",
            "background": "#6495ED",
            "iconColour": "#6495ED"
        },
        "USEFUL": {
            "icon": "note",
            "foreground": "#000000",
            "background": "#66CDAA",
            "iconColour": "#66CDAA"
        },
        "COMMENT": {
            "icon": "note",
            "foreground": "#FFFFFF",
            "background": "#808080",
            "iconColour": "#808080"
        },
        "LEARN": {
            "icon": "note",
            "foreground": "#FFFFFF",
            "background": "#FF69B4",
            "iconColour": "#FF69B4"
        },
        "FIXME": {
            "foreground": "#DC143C",
            "background": "#DEB887",
            "iconColour": "#DEB887"
        },
        "BUG": {
            "foreground": "#FFFFFF",
            "background": "#DC143C",
            "iconColour": "#DC143C"
        },
        "SEE NOTES": {
            "icon": "check",
            "foreground": "#FFFFFF",
            "background": "#008080",
            "iconColour": "#008080"
        },
        "POST": {
            "icon": "check",
            "foreground": "#FFFFFF",
            "background": "#008000",
            "iconColour": "#008000"
        },
        "[ ]": {
            "icon": "check",
            "foreground": "#000000",
            "background": "#FFFFFF",
            "iconColour": "#FFFF00"
        },
        "[x]": {
            "icon": "check",
            "foreground": "#FFFFFF",
            "background": "#008000",
            "iconColour": "#008000"
        }
    },
Enter fullscreen mode Exit fullscreen mode
Collapse
 
koustav profile image
devkoustav • Edited

Hi Andy,
In order to see the problem, I copy pasted the exact same code in my settings.json file

settings.json vs-code dev-to-koustav

settings.json vs-code dev-to-koustav

But it seems to work absolutely fine here!
Todo Tree vs-code dev-to-koustav

So I would suggest you to check if you made any typo error while typing it. Other than that it should work fine!
In case you missed saving the file and your autosave is off, you can save it and try it once again!

Collapse
 
andypiper profile image
Andy Piper

I think I might have a linter that was highlighting the issue. It definitely was not a breaking problem.

Collapse
 
rustam_t profile image
Rustam-T

Have the same issue with colors.
VSCode is ok with HEX-code, but does not like RGB ))
Image description

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

Excelentísimo post my friend. Haven't installed it and I love it already.

Collapse
 
eminarium profile image
Merdan Durdyyev

Super helpful post, thank you so much!
I’ve used something similar to this but not with so much settings and configurations.
Eager to try this in my project code…

Collapse
 
koustav profile image
devkoustav

Thanks a lot✨ You should definitely check it out

Collapse
 
mohameddev19 profile image
Mohammed Hamdi

Thanks 💙

Collapse
 
fedoravpn profile image
Lawrence

How do you use it for comment? /* */

Collapse
 
koustav profile image
devkoustav

Well I have included /* */ format in todo-tree.regex.regex too! Also you can use other formats too based on the file type!

Todo Tree Configuration

Collapse
 
balajin96 profile image
balaji

thnx buddy

Collapse
 
srisham profile image
Sri Balaji S

Thanks. I will check it out.

Collapse
 
rakinar2 profile image
Ar Rakin

Absolutely Amazing!

Collapse
 
koustav profile image
devkoustav

Thanks✨

Collapse
 
cavo789 profile image
Christophe Avonture

Very nice article and snippets. Thanks!

Collapse
 
koustav profile image
devkoustav

Feeling something missing?
Put your suggestions in the comments 😄

I'll be happy to add your suggestions!

Collapse
 
michealgreat224 profile image
Micheal Great • Edited

The problem maybe typographical error tho, because i've encounter such several times....
just calmand cross check your codes again

Collapse
 
koustav profile image
devkoustav

Sounds interesting! Guess I'll check it out.

Collapse
 
anirudhav profile image
Anirudh A V

Wow great post, Thanks so much

Collapse
 
koustav profile image
devkoustav

Thanks a lot✨

Collapse
 
koustav profile image
devkoustav

Did this post help you?
Save it for later...

lets_code_together

Collapse
 
jebarpg profile image
Jeb

Thank you!!!

Collapse
 
hongz1 profile image
Jae Hong Lee

you need to use #RRGGBBAA format if you want to make exact same color as css color names regardless of vscode theme color.

i.e. crimson --> #dc143cff instead of #dc143c

Some comments have been hidden by the post's author - find out more