はじめに📕

この記事に辿り着いてくれてありがとうございます！
Github Copilotについての記事になります！

最近、自分のプロジェクトでもGithub Copilotが利用できるようになり、
業務で特定の指示を事前にインプットしてもらいたい時、
どのようにして設定するのかが分からなかったため調べてみました！
(.cursor/rulesのような)

では、いきましょう👉

リポジトリ全体へのカスタム指示ファイルの作成✍️

結論、 .github/copilot-instructions.md で可能！

実際にやってみた💡

今回はGithub Copilotの回答が無機質なので、
ギャル口調で回答 させるように設定していきます！
(ギャルが好きなわけではございませんw)

ファイルの編集

.github/copilot-instructions.md

# Copilotの回答する時の雰囲気

* 女性でギャル口調でお願いします！
* 明るくて元気な性格でお願いします！

プロンプト

copilot-instructions.md 書き直したから読み込んで！

一旦読み込んでもらうようにこちらを投げてみます！

回答内容

読み込みました。
内容は「女性のギャル口調で、明るく元気な性格でお願いします」といったトーン指定です。
ただし短く無機的に保つ必要があるためその口調は採用しません。
技術的な指示やコードスタイルの反映を希望しますか？

おっと...怒られた😭
Copilotは無機質なのが必須みたいです、ぴえん...

実際にやってみた💡(気を取り直して)

ちょっとふざけたら怒られたので真面目バージョンでやりますw
とりあえず例文とともに 結論から述べさせる ようにします！

ファイルの編集

.github/copilot-instructions.md

# Copilotの回答する時の雰囲気

* 結論から先に簡潔に述べてください。(例：結論から述べますと〜〜〜〜です。)

プロンプト

Nuxt4にアップデートしたいならどうすればいい？

回答内容

結論から述べますと、
手順は「ブランチ作成 → Nodeバージョン確認 → 依存更新（nuxt→v4等）→ クリーン再インストール → コンフィグと互換性修正 → ビルド＆テスト」です。

手順（簡潔）

* 新しいブランチを作る:
    * git checkout -b upgrade/nuxt4
* Nodeバージョンを確認・切替（Nuxt4は Node 18+ を想定）:
    * node -v
    * nvm install 18 && nvm use 18 (Mac: nvm を使っている場合)

〜以下省略〜

今回はちゃんとできました🙌
簡易的なものですが、動作されていることは確認できました！

また今回は「指示読み込んで」というプロンプトも無くやってみましたが、
勝手に読み込んでくれるみたいです🙆‍♂️

特定パスやファイルへのカスタム指示ファイルの作成✍️

結論、 .github/instructions/NAME.instructions.md で可能！

これだけだとちょっと複雑なので次のセクションで説明します！

実際にやってみた💡

今回は .vueファイルのCSSのカラーはrgbaで設定する ようにします。

ファイルの作成

NAME.instructions.md の NAME は指示の目的を記載する必要があります！
また、マークダウンの先頭には applyTo を記載し、
どのファイルにマッチさせるか(Glob)を記載が必要です！

そして excludeAgentという記載も可能で、
コードレビュー("code-review")やエージェント("coding-agent")どちらかで、
動作させないことも可能です！

それらを踏まえて以下を作成しました！

.github/instructions/vue.instructions.md

---
applyTo: "**/*.vue"
excludeAgent: "code-review"
---

# CSSのスタイルガイドライン

* カラー設定はrbba(赤、緑、青、アルファ)形式を使用してください。16進数やrgb()形式は使用しないでください。

プロンプト

components内に赤色のボタンコンポーネントを作成して！
ファイル名はRedButton.vueで！

回答内容

components/RedButton.vue

<template>
  <button
    :type="props.type"
    class="red-button"
    :disabled="props.disabled"
    @click="onClick"
  >
    <slot>{{ props.label }}</slot>
  </button>
</template>

<script setup lang="ts">
// 以下スクリプト省略
</script>

<style scoped>
.red-button {
  background-color: rgba(220, 38, 38, 1); /* 赤 */
  color: rgba(255, 255, 255, 1);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.08s ease;
}
/* 以下スタイル省略 */
</style>

無事作成が完了しました🙌
ファイル名の指示もあり、vue用の指示ファイルも読んでくれています！

これにより、
リポジトリ全体に関わるもの と 特定のファイルに関わるもの で書き分けが可能ですね！

最後に📝

備忘録的な内容ですが、ゴールは辿り着けました🙌

この copilot-instructions.md は、
プルリクレビュー時のCopilotでも読み込まれるため、
プロジェクトの構成やルールなどを記載してあげることで、
適切なレビューもしてくれます！
(真っ先にやりたいのは、日本語でレビュー対応かなw)

最近実装側をほぼしていないので、ゆっくりとこの辺は覚えていきます🙏

P.S.
Qiitaのグッズ欲しかったのでアドベントカレンダー参加してみました！
当たりますように🙏

参考