DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for VSCode Extension - TODO Tree
Camilo Martinez
Camilo Martinez

Posted on • Updated 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.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"
    }
  },
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
}
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
πŸ––

ko-fi

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›