Do you use VS Code and add comments, such as TODO, FIXME, BUG, etc? Then there’s a neat extension available, which you can use to show a tree view of these types of comments.
Table of Contents
What is Todo Tree?
The Todo Tree extension for Visual Studio Code (VS Code) gives developers visibility over comments added within their code, such as TODO comments. The extension parses the code, identifies the code comments, and presents them in a tree view within the activity bar, making it easy to navigate to various sections of the codebase where these code comments have been made.
Users can click on any item in the Todo Tree view to be taken directly to the relevant line of code, streamlining the process of addressing marked tasks.
The extension also allows for customisation of recognised comment tags (such as TODO, FIXME, BUG, etc.) and their highlighting in the code.
Usage
Quick steps to get started using Todo Tree:
Install the extension, search for Todo Tree in the VS Code extensions marketplace, and proceed with the installation.
Add some code comments like the following into your code:
// TODO: Make this better later
// FIXME: Fix this thing later
// BUG: Some users from the early 00s said this is broken in IE6Then, click on the Todo Tree icon located in the activity bar, typically on the left side of VS Code. Select items in the Todo Tree view to jump to the corresponding code locations.
If you load a project with lots of these code comments across multiple files, you’ll see a full list of the files, which is really useful for tidying up any code in files you are currently working within.
Customisation
Todo Tree also includes several customisation options, including custom highlighting.