vscode中快速打开项目的远程仓库

平常在项目的开发中，常遇到需要打开本地代码关联的远程代码仓库，用以查看远程仓库的最新提交或者是分支的差异。

过去我的操作是使用 git remote -v命令来显示本地仓库关联的远程仓库地址，这条命令它会输出两条结果：

$ git remote -v
origin  https://github.com/Fascinating-W/caring-ui.git (fetch)
origin  https://github.com/Fascinating-W/caring-ui.git (push)

这两条结果随便点开一条就会打开浏览器跳转远程仓库所在地址，但是有的时候需要频繁查看，即便这个命令已经挺简短了，但是毕竟通过敲击键盘还是需要几秒钟的时间，于是我就想能不能通过一个快捷键帮我自动执行这条命令并且使用浏览器打开远程仓库。

经过一番摸索找到了解决方案，答案就是通过 创建脚本+配置 git 别名+vscode terminal 插件，下面是具体的实现步骤。

创建脚本

因为我是用的是 macOS，所以这里只说在 mac 电脑上怎么配置脚本：

1、打开访达，使用 快捷键 commond + shift + g 打开前往：输入路径 /usr/local/bin/，这会跳转到 mac 存放可执行文件的目录：

2、 在 bin目录下创建一个脚本文件，我这里命名的是 open-git-remote.sh，表示这是一个打开 git远程仓库的脚本，写入脚本内容：

#!/bin/bash

# 获取远程仓库的 URL
remote_url=$(git config --get remote.origin.url)

# 检查是否获取到 URL
if [ -z "$remote_url" ]; then
  echo "没有找到远程仓库 URL。"
  exit 1
fi

# 使用默认浏览器打开远程仓库 URL
if command -v xdg-open > /dev/null; then
  xdg-open "$remote_url"
elif command -v open > /dev/null; then
  open "$remote_url"
else
  echo "无法检测到打开浏览器的命令。请手动打开以下 URL："
  echo "$remote_url"
fi

脚本的意思我就不具体解释了，只奉上大概注释，主要在于实现需求，没必要深究脚本。

3、打开终端，为这条脚本配置可执行权限

chmod +x /usr/local/bin/open-git-remote.sh

配置 Git 别名

4、 接下来，为这个脚本配置一个 Git 别名，我这里用的是 open

git config --global alias.open "!/usr/local/bin/open-git-remote.sh"

5、验证别名，运行以下命令来验证别名是否配置成功：

git open

如果按照我的上述步骤操作下来，那么此时使用这条命令，就可以自动打开默认的浏览器跳转本地仓库对应的远程仓库了。

事情到这里还没有结束，因为使用 git open命令看来也只是比 git remote -v命令少输了几个字符以及少了一个点击的操作，还是不够快速，还能更快速么？

答案是能的，使用快捷键只需要一只手操作就可以秒开远程仓库，下面就需要使用 vscode 的插件来实现这一效果了，请看第三步。

使用插件配置命令快捷键

打开 vscode，使用 command + shift + x 打开扩展边栏，搜索 terminal-command-keys，大概就是这么个插件：

看名字就能知道这个插件的意思了，用来配置终端命令快捷键的，下面是这个插件的使用。

通过 commond + shift + p 打开 vscode 命令面板，输入 shortcuts，选择 首选项：打开键盘快捷方式（JSON）

这个命令会打开系统快捷方式的 JSON 文件，在这里增加下面的快捷键配置：

{
    "key": "cmd+ctrl+r",
    "command": "terminalCommandKeys.run",
    "args": {
        "cmd": "git open"
    }
}

简单解释下，这个配置就是说当键入 command + control + r时，使用上面下载的那个插件打开一个终端并执行 git open命令。

当然这里的 key也可以换成你想要设置的快捷键，因为是打开远程仓库，所以我就用 r来表示 remote了，而且 commond + control的组合也不和其他快捷键冲突，并且只需要左手就能一次性按全，推荐如此配置。

此时保存这个文件，使用command + control + r快捷键，就会发现 vscode 自动开启了一个终端执行 git open命令，然后打开默认的浏览器跳转本地仓库对应的远程仓库。

至此在 vscode中如何快速打开项目的远程仓库就配置完成了，顺便提一嘴，terminal-command-keys 这个插件也可以配置其他的快捷键，我一开始用这个插件就是因为在运行 Vue 的项目时会频繁使用 npm run dev以及 npm run build这个命令，所以我就找到了找个插件配置了下面的两个命令。

{
      "key": "alt+b",
      "command": "terminalCommandKeys.run",
      "args": {
          "cmd": "npm run build"
      }
  },
  {
      "key": "alt+d",
      "command": "terminalCommandKeys.run",
      "args": {
          "cmd": "npm run dev || npm run serve"
      }
  }

效果嘛相比聪明的读者就都知道了，我就不多说了，大家自己下去实验吧。

---

—— 公众号「风度前端」 ——

为每一个有志优秀的「前端er」引路领航，筑梦心声。

Just to be an excellent front end engineer！