Like most devs, I often leave notes directly in the codebase I am working on.  Forgetful humans need reminders! In the past, I would try to use a format that would stand out when I review the file later.

I would speckle my code with entries like the following:

//————-TODO ——————–

const myLameCodeBlock = function(someDumbList){

//Get list of items

//Iterate through list

//Do something interesting


I found myself using a lot of dashes or equal signs coupled with CAPITAL LETTERs to help draw the eye.

VSCode with an extension has the ability to bring COLOR into the mix – a much better solution to draw your eye.

  1. Go out and get the TODO Highlight extension and install it. “Preferences” then “Extensions”.  A search for TODO should bring up the one we want.
  2. Add your desired highlight settings to the settings.json file.  I like to keep mine at the end.

You can find the file via “Preferences” then “Settings”

VSCODE Settings.json file

In the upper right there will be a small icon to open the settings.json file:

Find the last curly close bracket and place your color settings

The four main highlighters I use:


  • A placeholder for code I need to complete or implement.


  • When I know there is a bug, but don’t have time or context to fix it right now


  • I need to test this code


  • Let’s optimize or take a better approach.

    //My Settings.json entry for TODO Highlight


    “todohighlight.isCaseSensitive”: true, “todohighlight.keywords”: [ { “text”: “//TODO”, “color”: “#333”, “backgroundColor”: “#E10000” }, { “text”: “//BUG”, “color”: “#333”, “backgroundColor”: “#FFD800” }, { “text”: “//TEST”, “color”: “#333”, “backgroundColor”: “#59D5FF” }, { “text”: “//REFACTOR”, “color”: “#333”, “backgroundColor”: “#EC5EFF” } ]

The result is cleaner yet is much more effective in drawing your attention!

Now just enter your keywords formatted correctly (I chose to use double-slash comments in the example – you can choose whatever you like!)

I hope you find this tidbit useful!