Click here to Skip to main content
15,175,179 members
Articles / VS Code
Tip/Trick
Posted 2 Mar 2019

Tagged as

Stats

17.1K views
3 bookmarked

VSCode TODO Helper Extensions

Rate me:
Please Sign up or sign in to vote.
4.97/5 (11 votes)
2 Mar 2019CPOL3 min read
A couple of useful extensions for VSCode to help manage your TODOs FIXMEs, etc.

Introduction

I have found myself using Visual Studio Code (VSCode) more and more lately, as I have been playing around a lot with Python, Vue.js, Node.js and a few other things.

I don't know about you, but I will drop reminders into the code, to come back and tidy up or to fix/improve something later, you know the TODO items, etc. and that was one feature in Visual Studio that I used. VSCode does not have that ability by default.

Out of curiosity, I went to the marketplace in VSCode and searched for TODO. Sure enough, a number of extensions appeared.

I like the sound of two of them:

TODO Highlight

"highlight TODOs, FIXMEs, and any keywords, annotations..."
by: Wayou Liu
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

Todo Tree

"Show TODO, FIXME, etc. comment tags in a tree view"
by: Gruntfuggly
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

So installing them onto VSCode, I took them for a spin.

TODO Highlight

This extension scans your code and colour highlights your source where the tag exists. It makes the tag standout if you are scrolling down through your source, allowing you to easily spot where your holds are.

You can customise your own tags to search for and also set your own colour scheme, but this is something I have not needed to do as just the default TODO: and default FIXME: tags were sufficient for the time being.

You can see in the image below what the default tag highlighters look like in an HTML file, but looks just the same in a JavaScript file or other type, you just need to surround the tag with the appropriate commenting style for the language you are using.

Image 1

Todo Tree

The Todo Tree extension scans your source files for the Todo tags and builds a tree view of all references it finds, you can then click on the treeview item and it will open and take you to the reference in the appropriate source file. Handy for quickly taking you to the item you want to address.

As you can see below, the Activity Bar of VSCode has a TodoTree icon added following installation. Clicking on an item in the treeview, which is structured based on file path, will open and take you to the tag on the source code. You can see the other extension Todo highlight is also active and highlights the tag in question.

Image 2

Todo Tree has default support for TODO: and FIXME: tags, but you can also set up your own customisation tags and themes.

Todo Tree has highlight capability as well, this is turned off by default. You can easily enable it by changing the settings.json file as per the instructions for the extension. This would, of course, remove the need for two extensions. I was happy with how the two extensions worked independently using their default settings so decided not to use custom settings.

You can also filter the list and change the view of the list to a simple flat view by clicking  the various icons at the top of the tree view panel.

There are a couple of quirks with this extension in that it sometimes duplicates the found tags in the list or misses out the FIXME until a refresh is clicked, but no great problem, I'm sure the developer will fix this in the future, but it certainly doesn't stop this extension being useful.

Conclusion

So there you have it, a quick tip on a couple of extensions that may help your overall code management and task tracking if you are using VSCode. I have found them useful.

If you find other useful extensions, why not share them in the comments below or write your own little tip on them.

History

  • 2nd March 2019: 1.0 First release

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DaveAuld
Engineer
Scotland Scotland
I have been working in the Oil & Gas Industry for over 30 years now.

Core Discipline is Instrumentation and Control Systems.

Completed Bsc Honours Degree (B29 in Computing) with the Open University in 2012.

Currently, Offshore Installation Manager in the Al Shaheen oil field, which is located off the coast of Qatar. Prior to this, 25 years of North Sea Oil & Gas experience.

Comments and Discussions

 
Questiontodo-tree Pin
Gruntfuggly28-Mar-19 14:07
MemberGruntfuggly28-Mar-19 14:07 
QuestionI wouldn't use it Pin
Member 1056055625-Mar-19 0:53
professionalMember 1056055625-Mar-19 0:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.