Sublime Text で GitHub Copilot を使う方法


## はじめに
GitHub Copilotは、VSCodeやJetBrains IDEsなどの統合開発環境（IDE）で利用する人が多いと思いますが、実際にはVimやNeovim、そしてSublime Textのようなエディターでも利用することができます。この記事では、Sublime TextでGitHub Copilotを利用する方法を紹介します。

## インストール方法
Sublime TextでGitHub Copilotを使用するには、「[LSP-copilot](https://github.com/TerminalFi/LSP-copilot)」というパッケージをインストールする必要があります。
LSP-copilotのインストール および セットアップについてはLSP-copilotのREADMEに記載がありますが、当記事でも一連の流れを説明します。

### LSP-copilotのインストール
このパッケージは、Sublime TextにLSP（Language Server Protocol）ベースの補完機能を提供します。LSP-copilotをインストールする前に、まずLSP本体をインストールする必要があります。

1. **LSPのインストール**:
    - Sublime Textのコマンドパレット（Ctrl+Shift+P）を開き、「Install Package」を選択します。
    - 「LSP」を検索し、インストールします。
2. **LSP-copilotのインストール**:
    - 同様にコマンドパレットを開き、「Install Package」を選択します。
    - 「LSP-copilot」を検索し、インストールします。
    - インストール中にNode.jsのダウンロードを促すダイアログが表示される場合があります。この場合は「Download」ボタンをクリックしてNode.jsをダウンロードしてください。
    - インストールが完了したら、Sublime Textを再起動します。

## セットアップ方法
### GitHub Copilotへのサインイン

LSP-copilotをインストールしたら、次にGitHub Copilotにサインインします。

**サインイン手順**:
  - コマンドパレットから「Copilot: Sign In」を検索して実行して下さい。
  - するとブラウザーで以下のような画面が開きコードの入力を促されます。この画面が開いた時点で、クリップボードにコードがコピーされていますのでそのままペーストして下さい。

![GitHub Activation.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3859135/fcf810f7-4f18-ba80-a885-bb6e88c2476f.jpeg)
  
  - この画面が表示されるとサインイン完了です。ブラウザーは閉じて問題ありません。

![GitHub Activation Complete.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3859135/6e7d95ac-c0d4-4a4f-575d-f7fa396d5e69.jpeg)

  - Sublime Text側にもこのようなダイアログが表示されていますが、サインイン完了後は閉じて下さい。

![SublimeText LSP-copilot Sign In Dialog.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3859135/0a7d6d29-1409-c060-f91e-3212f1f67f2a.jpeg)

  
**コマンドパレットに「Copilot: Sign In」が表示されない場合**:
	LSP-copilotのインストール直後に「Copilot: Sign In」がコマンドパレットに表示されない場合がありました。
	その場合はSublime Textを一旦閉じてから、編集したいファイルやプロジェクトを開いて下さい。


## 入力補完の設定
LSP-copilotには2種類の補完スタイルがあります。
コマンドパレット「Preferences: LSP-copilot Settings」から設定項目 `completion_style` 設で変更が可能です。

**popup:**
	デフォルトの設定です。補完候補がポップアップ表示されます。

![completion_style popup.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3859135/f1ae8c51-7b46-56d2-0b6b-b6830a3efa53.jpeg)

ポップアップ右上の青いハンバーガーボタンを押すと画面右側のパネルに補完候補が一覧表示されます。

![completion_style popup panel.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3859135/97a5c24f-7b7e-1a3e-066c-5cb7af589e86.jpeg)

**phantom**:
	カーソルの位置にインラインで表示されます。
	まだ実験的な機能で不具合があるとのことですが、それほど不都合は感じません。

![completion_style phantom.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3859135/43b27d2f-a4e6-124b-5ee1-3d2831155896.jpeg)

## Chat
Sublime TextでもGitHub Copilot Chatを利用できます。
コマンドパレットから「Copilot: Chat」を実行すると画面下部にチャットプロンプト、画面右側にチャット結果パネルが表示されます。

#### コードの生成
プロンプトに「goで最大公約数を返す関数」と入力すると、次のようなコードを生成してくれました。

![コード生成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3859135/1371abdd-f5fb-053b-c960-3681684893dd.jpeg)

#### テストの生成
プロンプトに「/tests」と入力すると、コードに対応するテストを生成します。

![テスト生成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3859135/39505da0-141a-74d2-1ed2-fd201aa69ac0.jpeg)

#### コードの説明
対象のソースファイルを開いてコードを選択してからプロンプトに「/explain」と入力するとそのコードの説明を生成します。

![説明英語.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3859135/cd04e3e1-8d12-3859-aa8d-52469bd89c03.jpeg)

「/explain 日本語」と入力すると日本語での説明を生成してくれます。

![説明日本語.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3859135/1646409b-cbba-c49d-b12e-7a80034b21f4.jpeg)


## おわりに
GitHub Copilotは、VSCodeのようなIDEだけでなく、Sublime Textのようなエディターでも十分に活用できます。この記事が、普段使い慣れたSublime TextでCopilotを活用したいと考えている方々にとって、参考になれば幸いです。