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

Posted on • Updated on

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

Highlighting Comments with Todo Tree VS Code Extension

The Todo Tree extension quickly searches your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).


πŸ“Œ So let's first download and enable it from the extensions.

Todo Tree dev.to/koustav


It's now downloaded and has default configurations. But let's make custom ruleset.

πŸ“Œ Go to the Manage Option in VS Code

Manage VS Code


πŸ“Œ Now Click on settings

Settings VS Code dev.to/koustav

The settings file opens.


πŸ“Œ Now we have to open the settings.json File. Click on the button at the top right corner.

settings.json devto-koustav


πŸ“Œ Now you can paste the below code there and make your custom changes in it!

{
  "todo-tree.highlights.defaultHighlight": {
    "icon": "alert",
    "type": "text-and-comment",
    "foreground": "black",
    "background": "white",
    "opacity": 50,
    "iconColour": "blue",
    "gutterIcon": true
  },
  "todo-tree.highlights.customHighlight": {
    "TODO": {
      "icon": "checkbox",
      "foreground": "black",
      "background": "yellow",
      "iconColour": "yellow"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "white",
      "background": "cornflowerblue",
      "iconColour": "cornflowerblue"
    },
    "USEFUL": {
      "icon": "verified",
      "foreground": "black",
      "background": "mediumaquamarine",
      "iconColour": "mediumaquamarine"
    },
    "COMMENT": {
      "icon": "comment",
      "foreground": "white",
      "background": "gray",
      "iconColour": "white"
    },
    "LEARN": {
      "icon": "bookmark",
      "foreground": "white",
      "background": "hotpink",
      "iconColour": "hotpink"
    },
    "FIXME": {
      "icon": "tools",
      "foreground": "crimson",
      "background": "burlywood",
      "iconColour": "burlywood"
    },
    "RECHECK": {
      "icon": "codescan",
      "foreground": "white",
      "background": "chocolate",
      "iconColour": "chocolate"
    },
    "INCOMPLETE": {
      "icon": "alert",
      "foreground": "white",
      "background": "mediumvioletred",
      "iconColour": "mediumvioletred"
    },
    "BUG": {
      "icon": "bug",
      "foreground": "white",
      "background": "crimson",
      "iconColour": "crimson"
    },
    "SEE NOTES": {
      "icon": "note",
      "foreground": "white",
      "background": "teal",
      "iconColour": "teal"
    },
    "POST": {
      "icon": "share",
      "foreground": "white",
      "background": "green",
      "iconColour": "green"
    },
    "[ ]": {
      "icon": "check",
      "foreground": "black",
      "background": "white",
      "iconColour": "yellow"
    },
    "[x]": {
      "icon": "check",
      "foreground": "white",
      "background": "green",
      "iconColour": "green"
    }
  },
  "todo-tree.general.tags": [
    "BUG",
    "SEE NOTES",
    "HACK",
    "FIXME",
    "RECHECK",
    "INCOMPLETE",
    "TODO",
    "NOTE",
    "POST",
    "USEFUL",
    "LEARN",
    "COMMENT",
    "[ ]",
    "[x]"
  ],
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS).*(\\n\\s*//\\s{2,}.*)*"
}
Enter fullscreen mode Exit fullscreen mode

easy
πŸ“Œ Here is the final result-

Todo Tree highlighting Comments


πŸ“Œ Every Comment comes as a object in this json file. The structure of the object is-

Todo Tree dev-to-koustav


πŸ“Œ You can add more objects based on this structure and include the object name in-

Todo Tree dev-to-koustav

Few things to know before editing the configuration

  • icon - used to set a different icon in the tree view. Must be a valid octicon.

octicons

  • iconColour - used to set the colour of the icon in the tree. If not specified, it will try to use the foreground colour or the background colour.
  • gutterIcon - set to true to show the icon in the editor gutter.
  • Foreground and background-color can be specified using HTML/CSS colour names (e.g. "Salmon"), RGB hex values (e.g. "#80FF00"), RGB CSS style values (e.g. "rgb(255,128,0)")
  • fontWeight, fontStyle, textDecoration - can be used to style the highlight with standard CSS values.

And we are-

Done Meme


Share itπŸ’š with someone who may benefit from this
❀️ Happy Coding!
Follow for more!

Latest comments (24)

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

Collapse
 
cavo789 profile image
Christophe Avonture

Very nice article and snippets. Thanks!

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
 
srisham profile image
Sri Balaji S

Thanks. I will check it out.

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
 
rakinar2 profile image
Ar Rakin

Absolutely Amazing!

Collapse
 
koustav profile image
devkoustav

Thanks✨

Collapse
 
alexomeyer profile image
Alex Omeyer

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.

Collapse
 
koustav profile image
devkoustav

Sounds interesting! Guess I'll check it out.

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
 
anirudhav profile image
Anirudh A V

Wow great post, Thanks so much

Collapse
 
koustav profile image
devkoustav

Thanks a lot✨

Collapse
 
balajin96 profile image
balaji

thnx buddy

Collapse
 
webjose profile image
JosΓ© Pablo RamΓ­rez Vargas

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

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
 
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
 
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
 
koustav profile image
devkoustav

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

lets_code_together

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more