How a VS Code Extension "Todo Tree" can make your coding easier | Todo Tree Configuration | Highlighting Comments in VS Code

Highlighting Comments with Todo Tree VS Code Extension

The Todo Tree extension quickly searches your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).

---

📌 So let's first download and enable it from the extensions.

---

It's now downloaded and has default configurations. But let's make custom ruleset.

📌 Go to the Manage Option in VS Code

---

📌 Now Click on settings

The settings file opens.

---

📌 Now we have to open the settings.json File. Click on the button at the top right corner.

---

📌 Now you can paste the below code there and make your custom changes in it!

{
  "todo-tree.highlights.defaultHighlight": {
    "icon": "alert",
    "type": "text-and-comment",
    "foreground": "black",
    "background": "white",
    "opacity": 50,
    "iconColour": "blue",
    "gutterIcon": true
  },
  "todo-tree.highlights.customHighlight": {
    "TODO": {
      "icon": "checkbox",
      "foreground": "black",
      "background": "yellow",
      "iconColour": "yellow"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "white",
      "background": "cornflowerblue",
      "iconColour": "cornflowerblue"
    },
    "USEFUL": {
      "icon": "verified",
      "foreground": "black",
      "background": "mediumaquamarine",
      "iconColour": "mediumaquamarine"
    },
    "COMMENT": {
      "icon": "comment",
      "foreground": "white",
      "background": "gray",
      "iconColour": "white"
    },
    "LEARN": {
      "icon": "bookmark",
      "foreground": "white",
      "background": "hotpink",
      "iconColour": "hotpink"
    },
    "FIXME": {
      "icon": "tools",
      "foreground": "crimson",
      "background": "burlywood",
      "iconColour": "burlywood"
    },
    "RECHECK": {
      "icon": "codescan",
      "foreground": "white",
      "background": "chocolate",
      "iconColour": "chocolate"
    },
    "INCOMPLETE": {
      "icon": "alert",
      "foreground": "white",
      "background": "mediumvioletred",
      "iconColour": "mediumvioletred"
    },
    "BUG": {
      "icon": "bug",
      "foreground": "white",
      "background": "crimson",
      "iconColour": "crimson"
    },
    "SEE NOTES": {
      "icon": "note",
      "foreground": "white",
      "background": "teal",
      "iconColour": "teal"
    },
    "POST": {
      "icon": "share",
      "foreground": "white",
      "background": "green",
      "iconColour": "green"
    },
    "[ ]": {
      "icon": "check",
      "foreground": "black",
      "background": "white",
      "iconColour": "yellow"
    },
    "[x]": {
      "icon": "check",
      "foreground": "white",
      "background": "green",
      "iconColour": "green"
    }
  },
  "todo-tree.general.tags": [
    "BUG",
    "SEE NOTES",
    "HACK",
    "FIXME",
    "RECHECK",
    "INCOMPLETE",
    "TODO",
    "NOTE",
    "POST",
    "USEFUL",
    "LEARN",
    "COMMENT",
    "[ ]",
    "[x]"
  ],
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS).*(\\n\\s*//\\s{2,}.*)*"
}

📌 Here is the final result-

---

📌 Every Comment comes as a object in this json file. The structure of the object is-

---

📌 You can add more objects based on this structure and include the object name in-

Few things to know before editing the configuration

• icon - used to set a different icon in the tree view. Must be a valid octicon.

• iconColour - used to set the colour of the icon in the tree. If not specified, it will try to use the foreground colour or the background colour.
• gutterIcon - set to true to show the icon in the editor gutter.
• Foreground and background-color can be specified using HTML/CSS colour names (e.g. "Salmon"), RGB hex values (e.g. "#80FF00"), RGB CSS style values (e.g. "rgb(255,128,0)")
• fontWeight, fontStyle, textDecoration - can be used to style the highlight with standard CSS values.

---

And we are-

---

Share it💚 with someone who may benefit from this
❤️ Happy Coding!
Follow for more!

Comments

[Andy Piper]

Great post, this was helpful.

My VSCode complained about the use of HTML color names instead of RGB or HEX values, so here's the same set of config for the highlights, but with the names replaced with the hex equivalents:

    "todo-tree.highlights.defaultHighlight": {
        "icon": "alert",
        "type": "text-and-comment",
        "foreground": "#000000",
        "background": "#FFFFFF",
        "opacity": 50,
        "iconColour": "#0000FF",
        "gutterIcon": true
    },
    "todo-tree.highlights.customHighlight": {
        "TODO": {
            "icon": "check",
            "foreground": "#000000",
            "background": "#FFFF00",
            "iconColour": "#FFFF00"
        },
        "NOTE": {
            "icon": "note",
            "foreground": "#FFFFFF",
            "background": "#6495ED",
            "iconColour": "#6495ED"
        },
        "USEFUL": {
            "icon": "note",
            "foreground": "#000000",
            "background": "#66CDAA",
            "iconColour": "#66CDAA"
        },
        "COMMENT": {
            "icon": "note",
            "foreground": "#FFFFFF",
            "background": "#808080",
            "iconColour": "#808080"
        },
        "LEARN": {
            "icon": "note",
            "foreground": "#FFFFFF",
            "background": "#FF69B4",
            "iconColour": "#FF69B4"
        },
        "FIXME": {
            "foreground": "#DC143C",
            "background": "#DEB887",
            "iconColour": "#DEB887"
        },
        "BUG": {
            "foreground": "#FFFFFF",
            "background": "#DC143C",
            "iconColour": "#DC143C"
        },
        "SEE NOTES": {
            "icon": "check",
            "foreground": "#FFFFFF",
            "background": "#008080",
            "iconColour": "#008080"
        },
        "POST": {
            "icon": "check",
            "foreground": "#FFFFFF",
            "background": "#008000",
            "iconColour": "#008000"
        },
        "[ ]": {
            "icon": "check",
            "foreground": "#000000",
            "background": "#FFFFFF",
            "iconColour": "#FFFF00"
        },
        "[x]": {
            "icon": "check",
            "foreground": "#FFFFFF",
            "background": "#008000",
            "iconColour": "#008000"
        }
    },

[devkoustav]

Hi Andy,
In order to see the problem, I copy pasted the exact same code in my settings.json file

But it seems to work absolutely fine here!

So I would suggest you to check if you made any typo error while typing it. Other than that it should work fine!
In case you missed saving the file and your autosave is off, you can save it and try it once again!

[Andy Piper]

I think I might have a linter that was highlighting the issue. It definitely was not a breaking problem.

[Rustam-T]

Have the same issue with colors.
VSCode is ok with HEX-code, but does not like RGB ))

[José Pablo Ramírez Vargas]

Excelentísimo post my friend. Haven't installed it and I love it already.

[Merdan Durdyyev]

Super helpful post, thank you so much!
I’ve used something similar to this but not with so much settings and configurations.
Eager to try this in my project code…

[devkoustav]

Thanks a lot✨ You should definitely check it out

[Mohammed Hamdi]

Thanks 💙

[Lawrence]

How do you use it for comment? /* */

[devkoustav]

Well I have included /* */ format in todo-tree.regex.regex too! Also you can use other formats too based on the file type!

[balaji]

thnx buddy

[Sri Balaji S]

Thanks. I will check it out.

[Ar Rakin]

Absolutely Amazing!

[devkoustav]

Thanks✨

[Christophe Avonture]

Very nice article and snippets. Thanks!

[devkoustav]

Feeling something missing?
Put your suggestions in the comments 😄

I'll be happy to add your suggestions!