5 Useful VSCode Extensions for Live Coding 
Tags: beginners, vscode, livecoding, career
Published: 2019-10-17 10:53:39

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](http://bit.ly/2MRxkI3)

![line highlighter](https://github.com/clarkio/vscode-twitch-highlighter/raw/master/resources/intro-vid.gif)

This awesome extension (made during Live Coding streams by a fellow [Live Coders](http://bit.ly/livecoders) teammate [Clarkio](http://bit.ly/2P5bTGj)) 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](http://bit.ly/2IUQo6P)

![bracket pair colorizer](https://github.com/CoenraadS/Bracket-Pair-Colorizer-2/raw/master/images/activeScopeBorder.png)

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+](http://bit.ly/33EIhDv)

![todo+ example](https://i.imgur.com/EPgiym4.png)

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](http://bit.ly/2qjWDuB)

![live share](https://aka.ms/vsls/quickstart/viewlet-host)

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](https://marketplace.visualstudio.com/items?itemName=ExodiusStudios.comment-anchors)

![comment anchors](http://bit.ly/2oOs4gh)

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](https://marketplace.visualstudio.com/items?itemName=ybaumes.highlight-trailing-white-spaces) & [Indent Block Highlighting](https://marketplace.visualstudio.com/items?itemName=byi8220.indented-block-highlighting)

![whitespace](https://i.imgur.com/OcuIlPD.gif)

Shoutout to [Juan Carlos](https://dev.to/juancarlospaco) 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](https://marketplace.visualstudio.com/items?itemName=richie5um2.snake-trail)

![snakes!](https://i.imgur.com/QWaDLRV.gif)

Thanks [Rich Somerfield](https://dev.to/richie5um) for developing this extension. It's so purty!

## Share your favs!
What are your favorite extensions for Live Coding?