神器啊，从未想过 VSCode 还能这样直接打开仓库URL，原理揭秘~

1. 前言

大家好，我是若川。我倾力持续组织了一年多源码共读，感兴趣的可以加我微信 lxchuan12 参与。另外，想学源码，极力推荐关注我写的专栏《学习源码整体架构系列》，目前是掘金关注人数（4.7k+人）第一的专栏，写有20余篇源码文章。

最近 `antfu`^[1] 在 Twitter 上发推开发了一个 `VSCode`^[2] 插件。

vscode-open-in-github.png

你应该有碰到这样的场景。自己公司项目 gitlab 或者 github 项目。想快速打开网页去做一些操作，但耗时很久。那么有了这个插件后就方便快速很多，直接在状态栏点击一下图标即可打开。

安装插件 open in github button^[3]，github repo^[4] 后，会安装上依赖的另外一个插件 Open in GitHub^[5]，github repo^[6]。

Open in GitHub 插件也提供了一些用户自定义配置。支持配置为自己的域名，比如 gitlab，配置好后就能打开相应的项目地址。

可以全局设置 @ext:fabiospampinato.vscode-open-in-github。如下图所示：

扩展设置

也可以在项目中新增 .vscode/setting.json 配置。

// setting.json
{
  "openInGitHub.github.domain": "github.com", // Custom GitHub domain
  "openInGitHub.remote.name": "origin", // Name of the remote repository
  "openInGitHub.remote.branch": "master", // Name of the remote branch
  "openInGitHub.useLocalBranch": true, // Use the local branch instead of the fixed remote branch
  "openInGitHub.useLocalRange": true, // Highlight the local selection range, if there's one
  "openInGitHub.useLocalLine": false // Highlight the local line if there's no selection range
}

除了包含打开项目的命令，还包含了其他很多命令，比如打开 issue、action、pull request、release 等，可以按快捷键：ctrl + shift + p 输入 >open in github 查看。

本文主要来讲述它们的实现原理。

学完本文，你将学到：

1. 如何开发一个 VSCode 插件
2. 学会开发开源项目的工作流是怎样的
3. 学会调试 VSCode 插件
4. 学会 open in github button vscode 插件的原理是什么
5. 学会 open in github vscode 插件原理

2. 环境准备

# 克隆我的项目
git clone https://github.com/lxchuan12/vscode-open-in-github-button-analysis.git
# npm i -g pnpm
cd vscode-open-in-github-button-analysis/vscode-open-in-github-button
pnpm install
# vscode-open-in-github 项目
cd vscode-open-in-github-button-analysis/vscode-open-in-github
pnpm install

也可以 star 我的项目^[7]

3. vscode-open-in-github-button 项目

3.1 package.json scripts 命令解析

主要依赖依赖如下：

• eslint 配置 @antfu/eslint-config^[8]

• 使用正确的包 @antfu/ni^[9]

• 提升版本发布相关 bumpp^[10]

• 执行node ts 相关 esno^[11]

• pnpm^[12]

• vite^[13]

• vitest^[14]

• vscode 插件发布相关 vsce^[15]

• tsup ts 打包构建相关^[16]

scripts 分析

{
    "scripts": {
        // 用 tsup 打包 vscode 插件扩展
        "build": "tsup src/index.ts --external vscode",
        // 开发
        "dev": "nr build