5 Useful VSCode Extensions for Live Coding
💾 bun9000
Posted on October 17, 2019
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?
Posted on October 17, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.