WP Ad Inserter plugin for WordPress

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

Read Time:1 Minute, 57 Second

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).


  1. So let’s first download and enable it from the extensions.

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


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

  1. Go to the Manage Option in VS Code

Manage VS Code


  1. Now Click on settings

Settings VS Code dev.to/koustav

The settings file opens.


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

settings.json devto-koustav


  1. 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": "check", "foreground": "black", "background": "yellow", "iconColour": "yellow" }, "NOTE": { "icon": "note", "foreground": "white", "background": "cornflowerblue", "iconColour": "cornflowerblue" }, "USEFUL": { "icon": "note", "foreground": "black", "background": "mediumaquamarine", "iconColour": "mediumaquamarine" }, "COMMENT": { "icon": "note", "foreground": "white", "background": "gray", "iconColour": "gray" }, "LEARN": { "icon": "note", "foreground": "white", "background": "hotpink", "iconColour": "hotpink" }, "FIXME": { "foreground": "crimson", "background": "burlywood", "iconColour": "burlywood" }, "BUG": { "foreground": "white", "background": "crimson", "iconColour": "crimson" }, "SEE NOTES": { "icon": "check", "foreground": "white", "background": "teal", "iconColour": "teal" }, "POST": { "icon": "check", "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", "TODO", "NOTE", "POST", "USEFUL", "LEARN", "COMMENT", "[ ]", "[x]" ], "todo-tree.regex.regex": "(//|#|<!--|;|/\*|^|^\s*(-|\d+.))\s*($TAGS).*(\n\s*//\s{2,}.*)*"
}
Enter fullscreen mode Exit fullscreen mode

Here is the final result-

Todo Tree Configuration dev.to/koustav


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

Todo Tree dev-to-koustav


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

Todo Tree dev-to-koustav

  • 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.

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

Source: https://dev.to/koustav/how-a-vs-code-extension-todo-tree-can-make-your-coding-easier-todo-tree-configuration-and-use-cases-11kc

Passing Markdown components to React or Preact in Astro Previous post Passing Markdown components to React or Preact in Astro
Optimization techniques for Rive animations in React apps Next post Optimization techniques for Rive animations in React apps

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.