5 Useful VSCode Extensions for Live Coding

Live-streaming a development process introduces some unique challenges. Aside from the obvious challenge of edutaining a large group of people (for potentially hours on end), you're also collaborating with them while doing your best to stay on task and not lose their focus either.

Here's a list of 5 extensions I've found extremely useful for overcoming those challenges.

1. Twitch Highlighter

This awesome extension (made during Live Coding streams by a fellow Live Coders teammate Clarkio) lets viewers help you debug your code — highlight lines with a simple chat command!

Missing a semi-colon? !line 36.

2. Bracket Pair Colorizer 2

In a perfect world, your viewers could give you 100% of their attention 100% of the time. In reality, they're probably also working on their own projects, cooking, or second-screening at their desk. Help your viewers quickly parse what's going on at a glance and feel less disoriented when they look away for a few seconds, glance back, and a few parens or curlies moved around.

💡 PRO-TIP™ - Extensions that help viewers more easily spot syntax errors make it easier to mob-program and debug with your viewers!

3. TODO+

Keep track of current tasks, ideas, bugs you find, and more with this extremely useful but little-known extension. Shortcuts like alt+s to start, alt+d to mark as done, and alt+c to cancel make TODO+ an easy to use task tracker. The extension also supports custom symbols for check boxes and custom-defined tags.

💡 PRO-TIP™ - Tracking stream tasks and progress in a list is a good Live Coding tactic. Viewers often drop-in mid stream and need help getting oriented and caught up. After the stream, use the list to write a recap blog.

4. Live Share

Pair program with guests on stream with Live Share! It's an excellent collaboration tool and a must have for every Live Coder's toolkit.

5. Comment Anchors

This is another useful (but little-known) tool to help viewers follow along and stay engaged. Comment Anchors supports custom tags and colors as well, so you can use them to label any sort of comment!

💡 PRO-TIP™ - If you feel lost during a stream, sift through Comment Anchor tags in the side bar for TODO's and refactor tasks you can focus on until you figure out what to do next!

EDIT: Honorable Mentions

I wanted to update this post with some great suggestions from the dev.to community in the comments below that I've adopted for regular use on Twitch.

Highlight Trailing Whitespaces & Indent Block Highlighting

Shoutout to Juan Carlos for these recommendations! Not only does this scratch a visual itch and keep code looking clean, but it's another thing viewers/chat can help out with (esp in Python where white-space matters!)

Snake Trail

Thanks Rich Somerfield for developing this extension. It's so purty!

Share your favs!

What are your favorite extensions for Live Coding?