DEV Community 👩‍💻👨‍💻

jonasbn
jonasbn

Posted on

TIL: Todo Tree a nifty VScode Extension

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"
    ]
}
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (1)

Collapse
 
jonasbn profile image
jonasbn • Edited on

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

Want to Create an Account?
Now it's your turn!
 
🗒 Share a tutorial
🤔 Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.