How a VS Code Extension "Todo Tree" can make your coding easier | Todo Tree Configuration | Highlighting Comments in VS Code
Tags: vscode, news, programming, productivity
Published: 2022-10-27 05:27:21

## [Highlighting Comments with Todo Tree VS Code Extension](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

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.

![Todo Tree dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/811txz7olbrysm5hdoho.png)

---

It's now downloaded and has default configurations. But let's make _custom ruleset_.

📌 Go to the **Manage** Option in VS Code


![Manage VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orl1rff362ko5hmnts9f.png)

---

📌 Now Click on **settings**

![Settings VS Code dev.to/koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8sp30srubdvn4czr6vm.png)

The settings file opens.

---

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


![settings.json devto-koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r52ggbb1izkxt20364q.png)

---

📌 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,}.*)*"
}
```
![easy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwyha5cz5apsreu9yr27.gif)
📌 Here is the final result-

![Todo Tree highlighting Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/joqayny7mtkszv6mqu5i.png)

---

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

![Todo Tree dev-to-koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/406pupn2hc0ba6in7q69.png)

---

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

![Todo Tree dev-to-koustav](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp7mnzb78kqdih5jwx3u.png)

**Few things to know before editing the configuration**

- `icon` - used to set a different icon in the tree view. Must be a valid [octicon](https://primer.style/octicons/).

![octicons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0h62psz8sfeqcg8azoey.png)

- `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-

![Done Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezq7eey1hncq1w02go6r.gif)

---
_Share it💚 with someone who may benefit from this_
❤️ Happy Coding!
**Follow for more!**