Sublime Text plugin shows TODO comments, and more

TodoReview in Sublime Text 3
TodoReview in Sublime Text 3

I do like a good Sublime Text 3 plugin, and this is one that offers functionality that I was missing since upgrading from ST2 a while back.

TodoReview scans the comments within your code (either open files, project files, or both) and builds a results page that allows you to easily open and jump to the appropriate lines in these files. It’s as simple as navigating to the appropriate line and pressing Enter.

The plugin has four common comment keywords built in, but using regular expressions these can be extended beyond:

  • TODO:
  • NOTE:
  • FIXME:

Not only is this plugin useful for your own code projects, you can also use it to scan through third party open source projects to get an insight into their code. For example, WordPress 4.1.1 has 196 TODO: comments. My favourite is this:

Man o man is this ugly. WebKit is the new IE! Remove this if they ever fix it!

TodoReview can be installed easily using Package Control by Will Bond.

Matching Google Chrome’s developer tools theme to your text editor theme

Sublime Text 2
Sublime Text 2

My main coding text editor is the excellent Sublime Text 2, my favourite theme is called Tomorrow-Night by Chris Kempson, and my go-to browser is Google Chrome.

Being involved in web design I use the Chrome web developer tools all the time for debugging JavaScript, identifying HTML classes and tweaking CSS. It looks like this:

Google Chrome developer tools
Google Chrome developer tools

But as you can see from the screenshot above, the default view is rather dull: white background, uninspiring syntax highlighting. It’s a shame that you can’t match the Chrome developer tools code panel with my text editor of choice.

User StyleSheets

Well, it turns out you can! Chrome provides a “User StyleSheets” directory into what you can drop a Custom.css file.

C:\Users\%username%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/
~/.config/chromium/Default/User StyleSheets/

A number of people have also done the hard work for us and made available ready-to-use CSS files for various themes. These are my two favourite dark themes:

  • Tomorrow
  • Monokai (UPDATED: This version works better when editing code in the Elements tab.)

Having saved the code to your Custom.css file and saved it, Chrome updates immediately:

Google Chrome developer tools with Tomorrow theme
Google Chrome developer tools with Tomorrow theme