DEV Community

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

Read full post

Andy Piper • Oct 27 '22

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"
        }
    },

devkoustav • Oct 28 '22 • Edited

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

But it seems to work absolutely fine here!

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!

Andy Piper • Oct 28 '22

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

Rustam-T • Mar 1

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

Alex Omeyer • Oct 28 '22

Check out Stepsize's TODO Manager if you want to turn your TODOs into actual issues that you can track and sync in your issue tracker like Jira, GitHub Issues, Linear etc.

devkoustav • Oct 28 '22

Sounds interesting! Guess I'll check it out.

José Pablo Ramírez Vargas • Oct 28 '22

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

Ar Rakin • Oct 29 '22

Absolutely Amazing!

devkoustav • Oct 29 '22

Thanks✨

Christophe Avonture • Nov 3 '22

Very nice article and snippets. Thanks!

Mohammed Hamdi • Nov 2 '22

Thanks 💙

Merdan Durdyyev • Oct 28 '22

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…