Todo-tree is a handy little extension to track issues and comments in your code (I’m not going to get into the debt of weather you should put a TODO comment in code or in story board that for you decide). It adds a new pane to vscode letting you quickly look a repo/pages outstanding issues, or things to note see blow
Its really simple to use (you add a TODO
into your code and new line pop ups in the pane, showing where it is), but I couldnt find the default options where on the extensions site: https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
or an easy guide to customize it should i want to.
Standard options
By installing you get the options of:
TODO: Creates a todo note
FIXME: Creates a bug like note
Customize via palette
You can add a new tag via opening the Command Palette
and typing in Todo Tree: add tag
you then populate it with the name of the tag (say NOTE
) and job done you can add a note (it looks like this:)
As you can see it uses the same icon as TODO
, so while quick and easy to add, not great.
Cusotmize via settings.json
If you want to add your own tag
with a whole bunch of customization options! (read the docs for more info) then you need to edit a file, this is where i got lost as most examples talk about editing a file, but i could never see what file they edited was!. Turns out its the settings.json
in vscode. This file is used by all extensions so be careful as you dont want to mess other extensions up when your Todo-tree
.
To edit settings.json
open the Command Palette
and type: Preferences: Open Settings (JSON)
then add in your customized code. Theres a few out there if you google around, i like jsonasbn dev blog post (Note if you use hes copy the updated code in the comments).
Mine currently is currently:
"todo-tree.highlights.defaultHighlight": {
"type": "text-and-comment"
},
"todo-tree.general.tags": [
"TODO",
"FIXME",
"NOTE"
],
"todo-tree.highlights.customHighlight": {
"TODO": {
"foreground": "black",
"background": "#22B965",
"iconColour": "#22B965",
"icon": "squirrel",
},
"FIXME": {
"foreground": "black",
"background": "#B4292B",
"iconColour": "#B4292B",
"icon": "bug"
},
"NOTE": {
"foreground": "black",
"background": "#2B6DD5",
"iconColour": "#2B6DD5",
"icon": "octoface"
}
}
I was trying to get the colours from the ubuntu wsl as like them against the dark theme in vscode, but there not quiet right. but after spending far to long playing around with it this will do for now! :)
It gives me the below
As a note you can pick the icons from the octicons and thats it. hope this helps.