🐙

GitHub のコードスニペットへのパーマリンクを "VS Code から" 取得する

に公開
GitHub
VS Code
VS Code 拡張機能
tech

GitHub には、ファイルやコードスニペットを特定のコミットに紐づけて共有できる「パーマリンク」機能があります。このパーマリンクはブランチに紐づくリンクと異なり、変更に伴ってリンク先がずれたり消失したりすることがありません。そのためこの機能はリンク切れを防ぐためのプラクティスとして有用です。

パーマリンクの取得方法について、一般的に紹介されているのは Web 版の GitHub を用いる方法です。しかし、エディタでコードを読んでいる際にパーマリンクを取得したくなったとき、わざわざブラウザを開いて該当箇所を探すのは手間がかかります。

そこで今回は、VS Code から直接パーマリンクを取得する方法を調査しました。

TL;DR

次の手順で、VS Code からパーマリンクを取得できます。

  1. GitHub Pull Requests をインストールする
  2. 目的のコードスニペットを選択する
  3. コマンドパレットを開き（Ctrl+Shift+P）、コマンド「GitHub Issues: Copy GitHub Permalink」を実行する

以上が最低限の方法ですが、以下では類似機能やコマンド以外を用いる方法についてもまとめています。

方法

GitHub 公式の拡張機能 GitHub Pull Requests を利用します。

利用する機能について明確なドキュメントが見つけられなかったため、パーマリンク取得に利用できるコマンドと、その機能へのアクセス方法についてまとめておきます。
なお、以下で紹介する内容は記事執筆時点で最新版のバージョン 0.119.2025092700 で動作を確認済みです。

利用可能なコマンド

パーマリンク取得に使える GitHub Pull Requests のコマンドを紹介します。

  1. GitHub Issues: Copy GitHub Permalink
    • 選択したコードスニペットへのパーマリンクをクリップボードに書き込む
    • エディタで開いているリポジトリの現在のコミットに対して紐づく
    • 選択していない場合はカーソル行へのパーマリンクになる
  2. GitHub Issues: Copy GitHub Permalink as Markdown
    • パーマリンクを Markdown のリンク形式でクリップボードに書き込む
    • リンクテキストは次のようになる
      • コードを選択している場合、選択箇所の開始行になる
      • コードを選択していない場合、カーソル位置の単語になる
      • コードを選択しておらずカーソル位置に単語がない場合はファイル名になる

その他関連するコマンドも紹介しておきます。

  1. GitHub Issues: Copy GitHub Head Link
    • HEAD に紐づいたリンクをクリップボードに書き込む
    • ブランチに紐づいたリンクを得たいときに利用できる
    • detached HEAD の場合はパーマリンク取得と等価
  2. GitHub Issues: Open on GitHub
    • ブラウザが起動し、パーマリンクのアドレスへアクセスする（GitHub で該当箇所を閲覧できる）

機能へのアクセス

1. コマンドパレットを利用する方法

  1. リンクを作成したい箇所を選択
  2. コマンドパレットを開く（Ctrl + Shift + P ）
  3. コマンドを選ぶ
    • GitHub Issues: Copy GitHub Permalink 等

コマンドパレットのキャプチャ

2. 行番号部分を右クリックする方法

  1. 行番号を右クリックする
    1. （単一行の場合）該当行の行番号を右クリック
    2. （複数行の場合）対象コードを選択して、その範囲内の行番号を右クリック
  2. Copy GitHub Permalink 等を選択

行番号右クリックで表示される選択肢のキャプチャ

3. 選択範囲を右クリックする方法

  1. コードを選択
  2. 選択箇所を右クリック
  3. Copy As または Share → Copy GitHub Permalink 等を選択

選択範囲右クリックでの選択肢のキャプチャ

その他の選択肢

その他の方法や関連ツール（拡張機能）について、見つかったものを記しておきます。

  • GitLens
    • id: eamodio.gitlens
    • コマンド Copy Remote File URL でファイルのリモートURLを取得できる
    • Copy Remote File URL From... コマンドを使うとブランチを選択可能
    • 調べた限りではパーマリンクを取得する機能は無い
  • vscode-copy-github-permalink
    • id: hogashi.vscode-copy-github-permalink
    • スニペットへのパーマリンクを取得する Copy GitHub Permalink というコマンドを提供する拡張機能
  • Copy GitHub URL
    • id: mattlott.copy-github-url
    • カレントブランチ起点のリンク・パーマリンク・デフォルトブランチ起点のスニペットへのリンクを取得できる
    • キーバインド割り当ても含まれている

まとめ

本稿では、VS Code から GitHub のコードスニペットへのパーマリンクを取得する方法について、GitHub 公式拡張機能および関連ツールを用いた手順を紹介しました。

最初は拡張機能を作ろうと考えていたのですが、よく調べてみたらぴったりの機能がすでに存在していました。ドキュメントがないので調査が面倒でしたがまとめられてよかったです。

Discussion