DEV Community

Cover image for VSCode Extension - TODO Tree
Camilo Martinez
Camilo Martinez

Posted on • Edited on

VSCode Extension - TODO Tree

I would like to highlight, recommend and dedicate this publication to the TODO Tree extension.

TODO Tree

For me, is on top of my top 10 favorite extensions because of its versatility to create todos, notes, bookmarks, and even checklists.

No matter the software language, as long as you have commenting syntax you will be able to use the TODO Tree... but if you want to unleash its true potential, let's make some changes.


Configurations



{
  "todo-tree.general.showActivityBarBadge": true,
  "todo-tree.general.tags": ["NOTE", "TODO", "FIXME", "MARK", "[ ]", "[x]"],
  "todo-tree.highlights.defaultHighlight": {
    "type": "tag",
    "fontWeight": "bold",
    "foreground": "#000000",
    "opacity": 90
  },
  "todo-tree.highlights.customHighlight": {
    "NOTE": {
      "background": "#FFA500",
      "iconColour": "#FFA500",
      "icon": "file"
    },
    "TODO": {
      "background": "#FFD703",
      "iconColour": "#FFD703",
      "icon": "tasklist"
    },
    "FIXME": {
      "background": "#FF01FF",
      "iconColour": "#FF01FF",
      "icon": "bug"
    },
    "MARK": {
      "background": "#157EFB",
      "iconColour": "#157EFB",
      "icon": "tag"
    },
    "[ ]": {
      "background": "#ff000080",
      "iconColour": "#ff000080",
      "icon": "square"
    },
    "[x]": {
      "background": "#00ff0080",
      "iconColour": "#00ff0080",
      "icon": "square-fill"
    }
  },
}


Enter fullscreen mode Exit fullscreen mode

It will give us a list of different available possibilities to use as tags.

todo-tree example

Create Tag

If those tags are not enough, you can create a lot more, using this example, and include them inside the "todo-tree.highlights.customHighlight" property.



"HOT": {
  "background": "#f80b2180",
  "iconColour": "#f80b2180",
  "icon": "flame"
}


Enter fullscreen mode Exit fullscreen mode

icon property is used to set a different icon in the tree view and Must be a valid octicon.


In Action

Now is ready to use. You can find the extension on the VSCode sidebar bar menu, and clicking it will open a tag explorer.

Todo Tree in Action

It has available different types of views, grouping, and filters.

Views

And also, one of my favorites. The support on Markdown to create a task list with colors.

Task List


That’s All Folks!
Happy Coding
🖖

beer

Top comments (1)

Collapse
 
jamesbond_ profile image
JamesBond

This was excellent. Thanks.