DEV Community

loading...

TIL: Todo Tree a nifty VScode Extension

jonasbn
Computer programmer, runner, LEGO builder, powernapper, yakshaver and father of 2 boys all squeezed in the few hours available.
・1 min read

This is a really nifty extension for vscode.

It lets you define tags in your code like TODO and FIXME (the defaults) which will then be highlighted in your code and will appear in a special sidebar section.

Todo Tree screenshot example

This is my configuration used for the above example.

{
    "todo-tree.autoRefresh": true,
    "todo-tree.defaultHighlight": {
        "type": "text-and-comment"
    },
    "todo-tree.customHighlight": {
        "TODO": {
            "foreground": "black",
            "background": "green",
            "iconColour": "green",
            "icon": "check",
            "type": "text"
        },
        "FIXME": {
            "foreground": "black",
            "background": "red",
            "iconColour": "red",
            "icon": "bug"
        },
        "REVIEW": {
            "foreground": "black",
            "background": "cyan",
            "iconColour": "lightblue",
            "icon": "eye"
        },
        "HACK": {
            "foreground": "black",
            "background": "#FFA500",
            "iconColour": "orange",
            "icon": "alert"
        },
        "REF": {
            "foreground": "black",
            "background": "grey",
            "iconColour": "grey",
            "icon": "link",
            "type": "tag"
        }
    },
    "todo-tree.tags": [
        "TODO",
        "FIXME",
        "REVIEW",
        "HACK",
        "REF"
    ]
}

You can define you own tags and can assign, icons and colour schemes, based on your preferences.

This TIL was lifted from my TIL collection.

Resources:

Discussion (1)

Collapse
jonasbn profile image
jonasbn Author • Edited

The configuration format has changed, so here is an update to the example outlined above

{
    "todo-tree.tree.autoRefresh": true,
    "todo-tree.highlights.defaultHighlight": {
        "type": "text-and-comment"
    },
    "todo-tree.highlights.customHighlight": {
        "TODO": {
            "foreground": "black",
            "background": "green",
            "iconColour": "green",
            "icon": "check",
            "type": "text"
        },
        "FIXME": {
            "foreground": "black",
            "background": "red",
            "iconColour": "red",
            "icon": "bug"
        },
        "REVIEW": {
            "foreground": "black",
            "background": "cyan",
            "iconColour": "lightblue",
            "icon": "eye"
        },
        "HACK": {
            "foreground": "black",
            "background": "#FFA500",
            "iconColour": "orange",
            "icon": "alert"
        },
        "REF": {
            "foreground": "black",
            "background": "grey",
            "iconColour": "grey",
            "icon": "link",
            "type": "tag"
        }
    },
    "todo-tree.general.tags": [
        "TODO",
        "FIXME",
        "REVIEW",
        "HACK",
        "REF"
    ]
}

The mentioned TIL has also been updated, including some nifty snippets to write the suggested annotations