My First VS Code Extension: Open in GitHub
When the Framework-Agnostic Feature Flags – Ezekiel Keator, PayPal talk at JSConf 2025 got into unit testing of the feature flags, I realized that I should write some TypeScript. I wanted to write something practical though. Isn’t that how VS Code extensions are written? This was the motivation I needed to write my first VS Code extension! Searching for how to write a vscode extension led me to Your First Extension | Visual Studio Code Extension API, which got me started.
Installing Node.js on macOS
# Download and install nvm: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash # in lieu of restarting the shell \. "$HOME/.nvm/nvm.sh" # Download and install Node.js: nvm install 22 # Verify the Node.js version: node -v # Should print "v22.20.0". # Verify npm version: npm -v # Should print "10.9.3".
Installing Node.js on Windows
The post on my Introduction to Tauri required me to install Node.js on my Windows (x64) desktop. Interestingly, the node and npm commands cannot be found now even though "C:\Program Files\nodejs\node" -v outputs v22.16.0. Installing the latest MSI fixes this. Running node -v from any directory outputs v22.20.0.
Next, I ran npm install --global yo generator-code – this is the path of “installing Yeoman globally to ease running it repeatedly” as per Your First Extension | Visual Studio Code Extension API.
npm warn deprecated npmlog@2.0.4: This package is no longer supported. npm warn deprecated gauge@1.2.7: This package is no longer supported. npm warn deprecated are-we-there-yet@1.1.7: This package is no longer supported. npm warn deprecated boolean@3.2.0: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. added 941 packages in 24s 151 packages are looking for funding run `npm fund` for details npm notice npm notice New major version of npm available! 10.9.3 -> 11.6.2 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.6.2 npm notice To update run: npm install -g npm@11.6.2 npm notice
I then updated npm before proceeding:
npm install -g npm@11.6.2 added 1 package in 4s 28 packages are looking for funding run `npm fund` for details
Creating my First VS Code Extension
The initial idea I had was for an extension to create a named branch and create a file in a specific subdirectory of the repo. I usually need to do this in OpenJDK development, so it seemed like a good idea for a time saving extension. Naming is hard though, so I went with the name “createfileinbranch” for my extension.
C:\repos\createfileinbranch>yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
New Language Pack (Localization)
New Web Extension (TypeScript)
New Notebook Renderer (TypeScript)
? What type of extension do you want to create? New Extension (TypeScript) ? What's the name of your extension? fileforbranch ? What's the identifier of your extension? fileforbranch ? What's the description of your extension? Create a file from a template in a given branch ? Initialize a git repository? Yes ? Which bundler to use? (Use arrow keys) > unbundled webpack esbuild
The package manager choices were npm, yarn, or pnpm. I selected npm.
C:\repos\createfileinbranch>yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? fileforbranch
? What's the identifier of your extension? fileforbranch
? What's the description of your extension? Create a file from a template in a given branch
? Initialize a git repository? Yes
? Which bundler to use? unbundled
? Which package manager to use? npm
Writing in C:\repos\createfileinbranch\fileforbranch...
create fileforbranch\.vscode\extensions.json
create fileforbranch\.vscode\launch.json
create fileforbranch\.vscode\settings.json
create fileforbranch\.vscode\tasks.json
create fileforbranch\package.json
create fileforbranch\tsconfig.json
create fileforbranch\.vscodeignore
create fileforbranch\vsc-extension-quickstart.md
create fileforbranch\.gitignore
create fileforbranch\README.md
create fileforbranch\CHANGELOG.md
create fileforbranch\src\extension.ts
create fileforbranch\src\test\extension.test.ts
create fileforbranch\.vscode-test.mjs
create fileforbranch\eslint.config.mjs
Changes to package.json were detected.
Running npm install for you to install the required dependencies.
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
added 260 packages, and audited 261 packages in 9s
74 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Your extension fileforbranch has been created!
To start editing with Visual Studio Code, use the following commands:
code fileforbranch
Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.
For more information, also visit http://code.visualstudio.com and follow us @code.
? Do you want to open the new folder with Visual Studio Code? (Use arrow keys)
> Open with `code`
Skip
VS Code asked if I wanted to install the recommended extensions for this project. I agreed, and the suggestions were ESLint – Pluggable JavaScript Linter and the Extension Test Runner. They were shown in the extensions tab with “@recommended” in the search box. I could successfully F5 the extension and obtain the message it displayed in VS Code.
The Open in GitHub Extension
I noticed though that something I do a lot is find files in on GitHub by copying their relative path and pasting it into the search box on the GitHub website. Why can’t I automatically just open that URL? This seemed like a more impactful extension to build! I initially used the fileforbranch extension to experiment with this idea.
I decided to use Copilot to see if I could move things along. I was quite surprised to find that the agent implemented a fully functional extension! Granted it’s not complex, but still, it was surprising that it just worked! The first prompt I used when I opened the extension folder in VS Code was “How to detect if opened folder is in a Git repo”
I returned to this task a few days later and told the agent that I would like to “Add this function directly into my workspace”.
Scrolling through the HTML revealed the paragraphs explaining that no server is available. Seems like the agent should handle this type of failure more gracefully.
The operation succeeded after I retried (I must have been logged out):
It was at this point that I decided to ask the agent to implement the whole thing using this prompt:
Add menu command called "Open in GitHub" when user right clicks on a file
I ran the extension and was pleased to see that it worked perfectly! It even included the current commit to give a stable link!
Creating the Extension in a New Repo
I used the agent in the first extension I had created but I wanted a separate repo to house my (potential) extension collection. I created my swesonga/vscode-extensions repo for this using the GitHub UI then cloned it and created a local folder for the extension.
I initialized the extension using the steps at the beginning of this post. This is the log from the initialization of the new extension. Notice that I selected no when asked to create a Git repo since I was already in the repo I had created in GitHub. I didn’t find any options for a TypeScript or JavaScript .gitignore file in the GitHub UI though so it didn’t have a .gitignore file. The first thing I did after the extension was created was git add . to add all the files to my repo. There were thousands of files added though, which led me to this question: node.js – Should the “node_modules” folder be included in the Git repository? – Stack Overflow. I decided to leave them in the repo for now.
I then used the same prompt to create the extension: Add a menu command called “Open in GitHub” when user right clicks on a file. The image below shows the various steps the agent took.
Claude Sonnet 4’s Summary
I’ve successfully added a “Open in GitHub” context menu command to your VS Code extension. Here’s what was implemented:
Changes Made:
- Updated package.json:
- Added a new command
openingithub.openInGitHubwith the title “Open in GitHub” - Added menu contributions for the explorer context menu that appears when right-clicking on files (not folders)
- Added a new command
- Enhanced extension.ts:
- Added the command handler for the “Open in GitHub” functionality
- Implemented getGitHubUrl() function that:
- Gets the Git remote URL for the current workspace
- Converts Git URLs (both HTTPS and SSH) to GitHub web URLs
- Gets the current branch name
- Constructs the full GitHub URL for the specific file
- Added error handling for various scenarios
- Made the command work both from explorer context menu and when no URI is provided
Features:
- Right-click context menu: Users can right-click on any file in the Explorer and select “Open in GitHub”
- Git integration: Automatically detects the GitHub repository URL from Git remotes
- Branch awareness: Opens the file on the current Git branch
- Error handling: Provides helpful error messages when GitHub URL cannot be determined
- Cross-platform: Works with both SSH and HTTPS Git remotes
How it works:
- When a user right-clicks on a file and selects “Open in GitHub”
- The extension determines the workspace folder and Git repository
- It executes Git commands to get the remote URL and current branch
- Converts the Git URL to a GitHub web URL
- Constructs the full GitHub file URL with the correct branch and file path
- Opens the URL in the default browser
The extension will now show “Open in GitHub” in the context menu when right-clicking on files in the VS Code Explorer, and it will open the corresponding GitHub page for that file in the browser.
Committing Claude Sonnet 4’s Changes
Looking at the changed files in the Source Control view, I noticed that there were files in the out/ subdirectory that I didn’t notice in the filefrombranch extension. This was when I noticed that the filefrombranch extension had a .gitignore file. I therefore decided to remove the node_modules folder from the repo. I used git rm -r openingithub/node_modules then committed that change. Next, I just needed to rebase with fixup to get that change out of the first commit. I tried rebasing using HEAD~5 because there were now 5 commits in the repo.
$ git rebase -i HEAD~5
fatal: invalid upstream 'HEAD~5'I looked at git rebase getting invalid upstream – Stack Overflow before realizing that I needed to use HEAD~4 since I couldn’t include the first commit.
Reinstalling Dependencies
With the node_modules folder deleted, I needed to run npm install again before I could run the extension.
PS C:\repos\vscode-extensions\openingithub> npm install npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported added 260 packages, and audited 261 packages in 2s 74 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
Opening URLs at the Current Commit
The first iteration of this implementation (in the fileforbranch extension) had the handy feature of including the current commit in the URL that was opened. I like this feature so I added it using this prompt:
Add another context menu command to open the URL at the current commitSee Sonnet 4’s implementation in [From Claude Sonnet 4] Enable opening GitHub URL at current commit · swesonga/vscode-extensions@810b779.
Packaging the Extension
The final question was how to install this extension on another computer. The Publishing Extensions | Visual Studio Code Extension API page explains how to package the extension into a .vsix file and install it on another computer.
$ npm install -g @vscode/vsce
added 319 packages in 13s
88 packages are looking for funding
run `npm fund` for details
$ which vsce
/c/Users/saint/AppData/Roaming/npm/vsce
$ vsce package
Executing prepublish script 'npm run vscode:prepublish'...
> openingithub@0.0.1 vscode:prepublish
> npm run compile
> openingithub@0.0.1 compile
> tsc -p ./
ERROR It seems the README.md still contains template text. Make sure to edit the README.md file before you package or publish your extension.I was surprised that I couldn’t publish the extension because the README file still contained template text. Neat check! After stripping it down, I was able to create a .VSIX file and install it on another computer.
Executing prepublish script 'npm run vscode:prepublish'...
> openingithub@0.0.1 vscode:prepublish
> npm run compile
> openingithub@0.0.1 compile
> tsc -p ./
WARNING A 'repository' field is missing from the 'package.json' manifest file.
Use --allow-missing-repository to bypass.
Do you want to continue? [y/N] y
WARNING LICENSE, LICENSE.md, or LICENSE.txt not found
Do you want to continue? [y/N] y
INFO Files included in the VSIX:
openingithub-0.0.1.vsix
├─ [Content_Types].xml
├─ extension.vsixmanifest
└─ extension/
├─ changelog.md [0.23 KB]
├─ initial-setup-output.txt [2.48 KB]
├─ package.json [1.54 KB]
├─ readme.md [0.25 KB]
└─ out/
├─ extension.js [8.22 KB]
└─ test/
└─ extension.test.js [1.94 KB]
DONE Packaged: C:\repos\vscode-extensions\openingithub\openingithub-0.0.1.vsix (8 files, 6.67 KB)
Key Takeaways
These AI Agents are fantastic! I went from never having written an extension to having a practical “Hello World” extension for opening files in their GitHub repos! Reading the agent’s code gave me some insight into the structure of an extension. Using the agent drastically cut down the amount of time it would have taken me to write this extension.
Leave a Reply