VSCode: better-comments + todo-tree

Image modified from Unsplash @kmuza

After switching to Visual Studio Code, I found two extensions very helpful: Better-Comments and Todo-Tree. The first allows to highlight comments in your sources to your needs and the second will display specially tagged comments.

As a default Todo-Tree knows the “TODO”, “FIXME” and “BUG” tags and highlights those in your editor as well as shown them in the tree-view.

Better-Comments has defined 4 comment styles per default: “highlight”, “alert”, “ask” and “todo”.

When using both extensions at the same time, they will overlap themselves with their default settings.

So let’s get ready to get best out of both …

1. Tweaking Todo-Tree

Starting with Todo-Tree configurations I made following changes to my settings.json file:

todo-tree settings in settings.json

Get the source from Gist: vscode-config-todo-tree-snippet-json …

First of all I disabled the highlight option and the folder scan at startup. Most of the time I won’t use the “Todo-Tree” views directly when start to code. So deactivating it’s folder scan is a performance boost. The disabled highlight option won’t break Better-Comments anymore.

I added the tags (always case sensitive) “TODO”, “BUG”, “FIX”, “FIXME”, “MARK” and tuned the regex to find those tags.

Now you may write comments (e.g. Ruby) like:

# TODO: prepare a new README.md for the gist
# BUG: checkout issue 123
# MARK: come back later and check that comment

but also

# [ ] fix: check for spaces
# [ ] fix: test on lowercase only
# [ ] BUG: update for security reason

Those comments are now displayed inside the Todo-Tree view. Last but not least I tweaked the visualization and setup some nice icons and labels.

some tasks

Attention: Before using ${tag:uppercase} variable inside labelFormat you have to check the status of my PR on GitHub as a feature request to the owner of Todo-Tree.

If you mark your comments as “done”, those won’t be shown anymore, e.g.:

# [ ] fix: check for spaces
# [x] fix: test on lowercase only
# [x] BUG: update for security reason

some tasks are done

2. Tweaking Better-Comments

All necessary changes to Better-Comments could be done by it’s config settings. This are the changes I placed into my settings.json file:

better-comments settings in settings.json

Get the source from Gist: vscode.config.better-comments.snippet.json …

All changes here are made to align the tags from Todo-Tree with a nice coloring by Better-Comments. You now may prepend some special chars to format your comments, e.g.:

# Simple comments
# * Highlight comment
# ! Alert comment
# ? Question mark

Special: Checkout also the additional [ ] and [x] marks to define open and closed tasks.

examples for better comments

Resume

Better-Comments and Todo-Tree extensions are perfectly work together and help to catch any open task or issue directly from within your source codes. I hope you enjoyed this post and that it is useful for you.