Todo Tree in VSCode

When you're working on a large codebase, sooner or later you'll find some annotations like @TODO or // TODO put there by people (perhaps you) as a reminder for "Don't forget to (do something)...". And, for sure, these todos remain there months or years because, yup, the programmer forgot they were there.

Personally, I sometimes work on code and comment on the call to a particular method or block. Often during a debugging session (for example on Linux Bash scripts) but, danger, don't forget to remove the comments and return the code to its original state. In that situation, I add a comment like // TEMPORARY just before the first commented line.

A dashboard helps you remember; a hook stops you. Git - pre-commit-hooks can refuse a commit that still contains a TEMPORARY marker.

The idea behind the Todo Tree VSCode addon (you can find the download page https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) is to summarize such annotations and display a dashboard with all TODOS, TOFIX, ... and your own too.

Once the addon has been installed, you'll get a new icon in your left sidebar (see indicator 1. on the image below). By clicking on it, you'll get items like BUG, CHECK, FIXME, TODO, ... and by clicking on an item you'll be directly redirected to where the todo is located in your codebase.

Thanks to this summary, you'll never forget your todos, temporary hacks, things you should still fix, ...

I recommend reading the https://dev.to/koustav/how-a-vs-code-extension-todo-tree-can-make-your-coding-easier-todo-tree-configuration-and-use-cases-11kc article to learn more about it.

Really nice addon to never forget your TODOs, TOFIX, TEMPORARY, ... annotations.

If you like the idea of surfacing what your editor normally keeps out of sight, have a look at Error Lens too: it does the same for errors and warnings, straight in the editing area. And once you've collected a few must-have addons, exporting your list of extensions makes them easy to reinstall on your next machine.