Twitch Line Highlighter VS Code Extension
A VS Code extension to allow your Twitch viewers to help in spotting bugs, typos, etc. by sending a command in chat that will highlight the line of code they want you to check.
In order to use this extension you will need the following things before going to the Getting Started section:
- An installed version of VS Code
- A Twitch account for yourself or a separate one to be used as a chat bot (sign up here)
- While logged in as your own account or as a separate account go to this site to generate a token for the chat bot: http://www.twitchapps.com/tmi
- Save this token temporarily in a safe place as you will need it later in the Getting Started section.
Install the extension from the marketplace
Open your VS Code settings
- Keyboard shortcut:
CTRL/CMD + ,
Type in "twitch" into the search bar
Twitch Highlighter: Channels setting and enter the name of the channel(s) to which you'd like the extension to connect. Example:
clarkio If you'd like to connect to more than one channel separate them by commas
Save your changes and close that tab. Go back to the Settings UI tab.
Nickname setting. If you are using your own account for the chat bot then enter your account username as the value here. If you created a separate account use that username. Save your changes.
In the status bar, click the "Disconnected" button. After clicking it, you'll see a notification that the extension is missing Twitch Credentials.
Click the "Set Credentials" button
You'll now see a prompt in the top middle of VS Code asking you to enter your Twitch Client Id. This is what you copied and saved from earlier. Copy and paste the value into this prompt and press
Next you'll be prompted to enter your Twitch token. This is the secret you copied and saved from earlier. It should be a value prefixed with
oauth:. Copy and paste the secret into this prompt and press
Disconnected button and you should see notifications indicating the extension is starting and finally started listening to the Twitch chat.
To highlight a line, use:
!highlight <LineNumber> OR !line <LineNumber>
To unhighlight a line, use:
To highlight multiple lines, use the same syntax as above but include a range of lines to highlight:
Additionally, you can also include comments:
!line <LineNumber> This is a comment
twitchHighlighter.channels: A comma separated list of channel name(s) to connect to on Twitch. Example: 'clarkio', Another Example: 'clarkio, parithon'
twitchHighlighter.nickname: The username the bot should use when joining a Twitch channel.
Note: this is required if you'd like to have the bot send join/leave messages in your chat. It also needs to match the Twitch username with which you generated the OAuth token.
twitchHighlighter.highlightColor: Background color of the decoration (default: green). Use rgba() and define transparent background colors to play well with other decorations.
twitchHighlighter.highlightFontColor: Font color of the decoration (default: white). Use rgba() and define transparent background colors to play well with other decorations.
twitchHighlighter.highlightBorder: CSS styling property that will be applied to text enclosed by a decoration.
twitchHighlighter.announceBot: Whether or not the bot should announce its joining or leaving the chat room.
twitchHighlighter.joinMessage: The message the bot will say when joining a chat room
twitchHighlighter.leaveMessage: The message the bot will say when leaving a chat room
twitchHighlighter.showHighlightsInActivityBar: Show the Highlights icon in the activity bar to display the tree view.
twitchHighlighter.usageTip: A tip shared by the bot when a user chats: '!line'.
Some of the code in this extension has been adapted from the twitchlint extension built by @irth
- Extension doesn't allow specifying the file to put the highlight in. This is a work in progress.