GitHub Copilot in VS Code でカスタムインストラクションを利用可能になりました

若槻龍太
2024.11.13
こんにちは、製造ビジネステクノロジー部の若槻です。
GitHub Copilot in VS Code October release (v0.22) より、custom instructions（カスタムインストラクション） を利用可能になりました。
https://github.blog/changelog/2024-10-29-multi-file-editing-code-review-custom-instructions-and-more-for-github-copilot-in-vs-code-october-release-v0-22/#file-based-custom-instructions-enabled-by-default-preview
ドキュメントはこちらです。

https://code.visualstudio.com/docs/copilot/copilot-customization#_use-a-githubcopilotinstructionsmd-file
これにより、自然言語で記述したコーディングガイドラインなどのドキュメントを元に VS Code 上で GitHub Copilot によるコードのサジェストをカスタマイズさせることが可能となりました。
 やってみた 前提Visual Studio Code 1.95.2
GitHub Copilot Extension v1.245.0
GitHub Copilot Chat Extension v0.22.2
使用したユーザーは GitHub Copilot Business プランを利用しています。
 設定しない場合まず始めに、比較のために設定しない場合の動作を確認します。
hoge.ts ファイルで 数値のリストの各値を 3 倍にする関数 というコメントを記述すると、インラインのサジェストは function 関数宣言となります。

また Copilot Chat で 数値のリストの各値を 3 倍にする TypeScript コード のように入力すると、ここでもサジェストされるコードは function 関数宣言となります。
関数宣言はアロー関数を使いたいところですが、デフォルトでは function 関数宣言がサジェストされる場合が多いようです。
 カスタムインストラクションの設定それではカスタムインストラクションを設定してみます。
まず .github ディレクトリ配下に copilot-instructions.md ファイルを作成します。そこにコーディングガイドラインを記述します。マークダウン形式で記述することができます。
.github/copilot-instructions.md
# コーディングガイドライン

- 関数宣言はアロー関数を使うこと
- 変数名はキャメルケースを使うこと
- JSDoc を記述すること
そして VS Code の settings.json に以下の設定を追加します。
"github.copilot.chat.codeGeneration.useInstructionFiles": true
もしくは .vscode/settings.json に設定を追加すれば、プロジェクトの設定として管理することも可能です。
.vscode/settings.json
{
  "github.copilot.chat.codeGeneration.useInstructionFiles": true
}
以上が最低限の設定となります。
 動作確認インラインでのサジェストは引き続き function 関数宣言となりました。こちらはカスタムインストラクションの対象外のようです。

サジェストされた function 関数宣言のコードを利用して他のサジェスト方法を試してみます。
src/hoge.ts
// 数値のリストの各値を 3 倍にする関数
export function tripleEachNumber(numbers: number[]): number[] {
  return numbers.map((n) => n * 3);
}
Copilot Chat に該当ファイルをコンテキストとして @workspace /fix と入力すると、ガイドラインに従ったコードがサジェストされました。
コードを選択して Fix メニューを使用すると、ガイドラインに従ったコードがサジェストされました。
コードを選択して Review and Comment メニューを使用すると、ガイドラインに従ったコードがサジェストされました。
良い感じですね。
 settings.json にカスタムインストラクションを直接記述も可能ここまでは copilot-instructions.md ファイル内でコーディングガイドラインを指示しましたが、settings.json に直接記述したり、カスタムな名前のファイルを使用することも可能です。
コードを生成する場合は github.copilot.chat.codeGeneration.instructions を利用します。
  "github.copilot.chat.codeGeneration.instructions": [
    {
      "text": "Always add a comment: 'Generated by Copilot'."
    },
    {
      "text": "In TypeScript always use underscore for private field names."
    },
    {
      "file": "code-style.md" // import instructions from file `code-style.md`
    }
  ],
テストを生成する場合は github.copilot.chat.testGeneration.instructions を利用します。
  "github.copilot.chat.testGeneration.instructions": [
    {
      "text": "Always use vitest for testing React components."
    },
    {
      "text": "Use Jest for testing JavaScript code."
    },
    {
      "file": "code-style.md" // import instructions from file `code-style.md`
    }
  ],
必要に応じて使い分けるようにしましょう。
 おわりにGitHub Copilot in VS Code でカスタムインストラクションを利用可能になったのでご紹介しました。
インラインでのサジェスト以外の GitHub Copilot の機能で、カスタムインストラクションが有効になっていることが確認できました。
プロジェクトやチーム内でコーディングガイドラインを策定している場合でも、それを徹底させることが難しいことは往々にしてあります。そこで今回のカスタムインストラクションを利用することで、開発者はガイドラインに従ったコードをより簡単に書くことができるようになります。レビュアーもレビュー負荷も少なくなるでしょう。明日からでも実際にプロジェクトで活用したい機能だと思いました。
以上