<!--
  canonical-url: https://www.avonture.be/blog/vscode-todo-tree
  published:     2025-03-07
  This is a static plain-Markdown mirror generated at build time.
  Visit the canonical URL above for the fully rendered page, with images and interactive components.
-->

# Todo Tree in VSCode

> Stop forgetting your TODOs and FIXMEs! Use the VSCode Todo Tree extension to summarize all code annotations like TODO, FIXME, and TEMPORARY into one easy-to-track dashboard.

---
![Todo Tree in VSCode](/img/v2/vscode_tips.webp)

**TL;DR**

Never lose track of your code annotations again. This article introduces the 'Todo Tree' extension for Visual Studio Code, a powerful tool that scans your entire workspace for comments like `TODO`, `FIXME`, and other custom tags. It then organizes them into a convenient tree view in the sidebar, allowing you to quickly see all your pending tasks and navigate directly to the relevant code with a single click. It's an essential extension for staying organized and ensuring no task is forgotten.

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](/blog/git-precommit) 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.

![Todo Tree in VSCode](./images/todo-tree.webp)

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](/blog/vscode-errorlens) 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](/blog/vscode-export-list-of-extensions) makes them easy to reinstall on your next machine.
