GitHub - Open in Visual Studio Code Insiders

VS Code just released an update that lets you embed an “Open in Visual Studio Code” button in your GitHub readme. It uses the Remote Repositories VS Code extension to directly open the repo without having to clone it.

More info here: https://open.vscode.dev/

Remote Repositories extension: https://code.visualstudio.com/blogs/2021/06/10/remote-repositories

I use VS Code Insiders 99% of the time and didn’t see a way to wire up the new button with Insiders.

I figured out how to get it working. You can see it in action here: https://github.com/jongio/memealyzer#memealyzer

Here’s how:

1. Create a short link using TinyUrl.com - it’s the only site I could find that supports redirects for non-http URLs, the “Open” button uses vscode://, not http, which most shorteners don’t support.

Go here: https://tinyurl.com/app/

Here’s the link: vscode-insiders://github.remotehub/open?url%3Dhttps%3A%2F%2Fgithub.com%2Fjongio%2Fmemealyzer

Replace ‘jongio’ with your GH user and ‘memealyzer’ with your repo name.

Choose a link name and enter it.

Create the link.

2. Create or use my “Open in Visual Studio Code Insiders” button

Here’s a link to mine: https://raw.githubusercontent.com/jongio/memealyzer/main/assets/open-in-vscode-insiders.svg

3. Add the markdown to your README

[![Open in Visual Studio Code Insiders](assets/open-in-vscode-insiders.svg)](https://tinyurl.com/memealyzercodeinsiders)

Change the svg path to the full URL or the url in your repo. Here’s the full URL: https://raw.githubusercontent.com/jongio/memealyzer/main/assets/open-in-vscode-insiders.svg

Change the tinyurl link to the one you created above.