AIにコードを伝えるのが面倒だったのでVSCode拡張機能を作った

はじめに

こんにちは、ミツモアでソフトウェアエンジニアをしている門野です。

日々の開発で「このコードの場所をチームメンバーに伝えたい」「AIにコードの文脈を共有したい」という場面がありませんか？

そこで、そんな課題を解決するVSCode拡張「Selection Path Copier」を作成し、公開しました。

TL;DR

選択範囲の「ファイルパス + 行番号」や「コード」をワンアクションでコピーできます
GitHubパーマリンク（commit/branch）も生成でき、PRコメントやAI相談が楽になります
インストール： VSCode Marketplace / Open VSX

こんな人におすすめ

AIにコードを相談するとき、パス/行番号もまとめて渡したい
PRやレビューコメントで、該当行をすぐ開けるリンクを貼りたい
コピーフォーマットを自分好みに揃えたい

この拡張機能でできること

ファイルパス + 行番号をワンクリックでコピー
選択したコードも一緒にコピー（Markdown/プレーン対応）
GitHubパーマリンク（commit/branch）の生成
出力フォーマットを設定で切り替え

作った動機

1. AIとのコード共有

最近はClaude CodeやCodex、Cursorなど、AIに相談しながら開発することが増えました。

AIに「このコードを改善して」と聞くとき、コードだけでなくファイルパスや行番号も一緒に伝えると、より的確な回答が得られます。逆に、場所がないと前後関係が伝わりづらく、追加の往復が発生しがちです。

2. 「ワンアクションでできないか？」

これらの作業をショートカット一発でできる拡張機能が欲しい。

探してみましたが、理想的なものが見つからなかったので自分で作ることにしました。

機能紹介

コマンド一覧（4つ）

コマンド	Mac	Windows/Linux	用途
Copy Path	`Cmd+Alt+C`	`Ctrl+Alt+C`	パス+行番号をコピー
Copy Path with Code	`Cmd+Alt+Shift+C`	`Ctrl+Alt+Shift+C`	パス+コードをコピー
Copy GitHub Permalink	`Cmd+Alt+P`	`Ctrl+Alt+P`	GitHubリンクをコピー
Copy GitHub Permalink with Code	`Cmd+Alt+Shift+P`	`Ctrl+Alt+Shift+P`	GitHubリンク+コードをコピー

出力例

Copy Path：

src/hooks/useAuth.ts#L15-L28

Copy Path with Code：

src/hooks/useAuth.ts#L15-L28

```typescript
const useAuth = () => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user);
      setLoading(false);
    });
    return () => unsubscribe();
  }, []);

  return { user, isAuthenticated: !!user, loading };
};
```

Copy GitHub Permalink：

https://github.com/user/repo/blob/abc1234/src/hooks/useAuth.ts#L15-L28

設定オプション

設定から好みのフォーマットにカスタマイズできます。

設定	選択肢	デフォルト
pathType	relative / absolute	relative
lineNumberFormat	github (`#L10`) / editor (`:10`) / parenthesis (`(10)`)	github
codeFormat	plain / markdown	plain
githubPermalinkType	commit / branch	commit

※ pathType の relative はワークスペース基準の相対パス、absolute はフルパスです。

行番号フォーマットの例：

# GitHub形式（デフォルト）
src/index.ts#L10-L20

# エディタ形式
src/index.ts:10-20

# 括弧形式
src/index.ts(10-20)

ユースケース

1. AIとのコード共有

Before：

このコードを改善してください

const fetchUserData = async (id) => {
  // ...コード
};

After：

このコードを改善してください

src/api/userApi.ts#L23-L35
```typescript
const fetchUserData = async (id: string): Promise<User> => {
  // ...コード
};
```

ファイルパスがあることで、AIは以下を理解できます： - どの層（API層）のコードか - TypeScriptファイルであること - 何行目のコードか

2. PRコメント

GitHubパーマリンクを使えば、コードレビューで特定のコミット時点のコードを永続的に参照できます。

（おまけ）VSCode拡張機能の公開方法

ここから先は「自分も拡張機能を公開してみたい」方向けのメモです。使うだけなら読み飛ばしてOKです。

せっかく作ったので、マーケットプレイスに公開して誰でも使えるようにしました。

普段はCursorも使っているため、VSCode MarketplaceだけでなくOpen VSXにも公開しています。

Open VSXへの公開は .vsix のアップロード（または ovsx で公開）だけなので手順自体はシンプルですが、初回は認証や publisher（Open VSXではnamespace）周りで少し手間がかかりました。正確には以下のイメージです。

EclipseアカウントでPublisher Agreementに同意
Open VSXのaccess tokenを発行
namespace（publisher）がなければ作成（例：npx ovsx create-namespace <publisher> -p <token>）
さらに “verified” 表示にしたい場合は、ownershipをclaimするIssueをGitHubで申請

1. 事前準備

# vsceをインストール
npm install -g @vscode/vsce

# Azure DevOpsでPersonal Access Token（PAT）を取得
# https://dev.azure.com で組織を作成し、PATを発行

# Open VSX用（必要な場合）
# - EclipseアカウントでPublisher Agreementに同意
# - Open VSXのaccess tokenを発行

2. package.jsonの設定

※ version は例です。公開するバージョンに合わせて変更してください。

{
  "name": "selection-path-copier",
  "displayName": "Selection Path Copier",
  "version": "x.y.z",
  "publisher": "yoshi47",
  "repository": {
    "type": "git",
    "url": "https://github.com/yoshi47/selection-path-copier"
  },
  "engines": {
    "vscode": "^1.74.0"
  }
}

重要なポイント： - publisher: マーケットプレイスでの公開者ID - repository: GitHubリポジトリへのリンク（あると信頼性UP） - engines.vscode: 対応するVSCodeのバージョン

3. パッケージング＆公開

# .vsixファイルを生成
vsce package

# マーケットプレイスに公開
vsce publish

初回は vsce login <publisher> でPATを使ってログインが必要です。

4. バージョンアップ

# パッチバージョンを上げて公開
vsce publish patch

# マイナーバージョンを上げて公開
vsce publish minor

5. Open VSXへの公開

CursorなどVSCode Marketplace非対応のエディタ向けに、Open VSXにも公開できます。

事前準備：アカウント設定

Open VSXでは、拡張機能を公開する前に以下の設定が必要です。

Eclipse.org でアカウントを作成（GitHubユーザー名を入力）
Open VSX にGitHubアカウントでログイン
プロフィール設定ページで「Log in with Eclipse」をクリックし、Publisher Agreementに同意
「Access Tokens」ページで「Generate New Token」をクリックしてトークンを生成・保存

namespace（名前空間）の作成

VSCode Marketplaceの publisher に相当するnamespaceを作成します。

npx ovsx create-namespace <namespace名> -p <アクセストークン>

※ namespace名は package.json の publisher と同じ値にしてください。

拡張機能のアップロード

namespaceが作成されたら、以下のいずれかの方法で公開できます。

方法1：GUIから 1. vsce package で .vsix ファイルを生成 2. Open VSXにログイン 3. 「Publish Extension」ページで .vsix ファイルをドラッグ&ドロップ

方法2：CLIから

npx ovsx publish <ファイル名>.vsix -p <アクセストークン>

詳細は公式ドキュメントを参照：Open VSX Wiki - Publishing Extensions

インストール方法

マーケットプレイスから（推奨）

VSCodeを開く
拡張機能タブ（Cmd+Shift+X）を開く
「Selection Path Copier」で検索
インストールをクリック

.vsixファイルから

code --install-extension selection-path-copier-x.y.z.vsix

※ x.y.z は手元の .vsix のバージョンに置き換えてください。

まとめ

日常の開発で感じた「ちょっとした不便」を解決するために、VSCode拡張機能を作成しました。

この拡張機能で解決したこと： - コードレビューでファイル箇所を伝える手間 - AIにコードの文脈を共有する作業 - GitHubパーマリンクの手動生成

日常の「ちょっとした不便」を解決するために作った拡張機能ですが、自分で使ってみると想像以上に便利でした。特にAIとのやりとりでは、ファイルパスがあるだけでコンテキストの伝わり方が全然違います。

今後は使いながら改善点を見つけて、より使いやすくしていきたいと思っています。同じ課題を持つ方の役に立てば幸いです。

参考リンク： - 拡張機能： VSCode Marketplace / Open VSX - VSCode Extension API - vsce - Publishing Extensions - Open VSX - Publishing Extensions - Open VSX - Namespace Access

ミツモアではソフトウェアエンジニア、プロダクトマネージャーなどを募集中です。エンジニア60人規模でCTO経験者が5人以上在籍し、15か国以上の国籍のメンバーが集まる多様なチームで働いてみませんか？日本語でも英語でも仕事がしたい、急成長中のSaaSを開発したい、AIエージェントの開発がしたいといった方はぜひ応募をお待ちしております！

https://corp.meetsmore.com/

ミツモア Tech blog

「ミツモア」を運営する株式会社ミツモアの技術ブログです

AIにコードを伝えるのが面倒だったのでVSCode拡張機能を作った

はじめに

TL;DR

こんな人におすすめ

この拡張機能でできること

作った動機

1. AIとのコード共有

2. 「ワンアクションでできないか？」

機能紹介

コマンド一覧（4つ）

出力例

設定オプション

ユースケース

1. AIとのコード共有

2. PRコメント

（おまけ）VSCode拡張機能の公開方法

1. 事前準備

2. package.jsonの設定

3. パッケージング＆公開

4. バージョンアップ

5. Open VSXへの公開

事前準備：アカウント設定

namespace（名前空間）の作成

拡張機能のアップロード

インストール方法

マーケットプレイスから（推奨）

.vsixファイルから

まとめ