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

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

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

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

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.

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

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

That’s All Folks!
Happy Coding 🖖