loading...
Cover image for 5 Useful VSCode Extensions for Live Coding

5 Useful VSCode Extensions for Live Coding

ninjabunny9000 profile image ๐Ÿ’พ bun.py Updated on ใƒป3 min read

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

line 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

bracket pair colorizer

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+

todo+ example

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

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

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

whitespace

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

snakes!

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

Share your favs!

What are your favorite extensions for Live Coding?

Posted on by:

ninjabunny9000 profile

๐Ÿ’พ bun.py

@ninjabunny9000

A notoriously nerdy space cowgirl living out her cyberpunk future through Live Coding & DJing on Twitch. ~*Microsoft MVP*~

Discussion

markdown guide
 
 

Hi

Thanks a lot for this great article.
A update about Live Share : this is yet buggy extension. I use it a lot for my training courses, and my students and me have seen some hard buggy (for example : showing good directory list, ...)

 

Oh no! Still buggy? That's a bummer. I know it used to be REALLY bad.. and it's definitely gotten better. I haven't run into any issues myself recently, but if it's not good enough for training/courses, that's a big red flag. Hopefully they take of these issues soon! It otherwise has so much potential!

 
 

WHOA!! This is awesome! I might try this out during a stream. Ty for the suggestion and contribution to the extension community! <3

 
 

I've updated the article to add your extension as an honorable mentions. Thanks! :D

 

Awesome tips! I got mad respect for live coders!

 

Preview on Web Browser -perfect for html, css development-

Bookmarks

Night Owl

Vscode pdf

 

๐Ÿ˜ Bookmarks!! Such great extensions!

 
 

Thanks for sharing, I love the Comment Anchors and the TODO+ :)