How to open a local file from the URL bar in VS Code

I just discovered the React component click-to-component. The component adds a visual overlay to your React application, allowing you to click on an element and jump right into your code base. Magic!

Obviously, there's some bundling and build magic involved to figure out the component file path, but I wondered how it opens the editor. Is the running server some shell commands?

Nope. All it does is open a URL with the editor's protocol. Here's an example URL that opens a file of my site.

vscode://file/Users/stefanjudis/Projects/github.com/stefanjudis/stefanjudis-website/index.html

Pretty cool! But where's this vscode protocol coming from? On macOS apparently, applications can register URL handlers in the Info.plist file. Here's the responsible part I discovered in my /Applications/Visual Studio Code.app/Contents/Info.plist.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleTypeRole</key>
        <string>Viewer</string>
        <key>CFBundleURLName</key>
        <string>Visual Studio Code</string>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>vscode</string>
        </array>
      </dict>
    </array>
  </dict>
</plist>

How does it work on Windows? No idea... But if you do, let me know! I'd love to extend this post.