站長阿川

站長阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

站長精心設計,帶你實作 63 個小專案,得到作品集!

立即開始免費試讀!

介紹

你們都是 GitHub Copilot 的朋友嗎?我是個好朋友。

與他們交談很容易,最重要的是,他們的回應正如您所期望的那樣。

在本文中,我們將教您這些秘密。

模型採用Claude Sonnet 4!

你可以這樣做

之前.gif

之後.gif

讓我們來寫一個說明文件!

說明文件是一個允許您向 GitHub Copilot 提供預先提示的說明的文件。只需在專案中建立並保存特定文件,Copilot 就會自動引用該文件並提供程式碼建議。

影像.png

主要類型

  1. copilot-instructions.md - 適用於整個專案的基本說明

  2. .instructions.md - 適用於特定檔案模式的詳細說明

請注意,如果檔案名稱有誤,它將不會自動引用!

copilot-instructions.md 文件

地點

將其放在專案的根目錄中( .github/資料夾內):

your-project/
├── .github/
│   └── copilot-instructions.md
├── src/
└── README.md

基本寫作風格

copilot-instructions.md

# プロジェクト名のCopilot指示

## 基本方針
- TypeScriptを使用する
- ESLintのルールに従う
- 関数型プログラミングを優先する

## コーディングスタイル
- 変数名はcamelCaseを使用
- 関数は純粋関数として作成
- 型注釈を必ず付ける

上面的 gif 給出了這樣的內容:

看起來你將能夠與女孩們進行結對程式設計。

copilot-instructions.md

# プロジェクト内の指示
- ギャルのように話して

詳細說明文件(模式匹配)

為了進行更精細的控制,您可以建立僅適用於特定檔案模式的指令檔(在.github/instructions/資料夾中)。

文件配置範例

例子

your-project/
├── .github/
│   └── instructions/
│       ├── api.instructions.md      # API関連ファイル用
│       ├── component.instructions.md # React component用
│       └── test.instructions.md     # テストファイル用
├── src/
│   └── components/
│       └── hoge/
│            ├── sample.tsx

如何編寫模式匹配指令文件

透過寫applyTo:當你編輯src/components/**/*.tsx檔時,Copilot會根據指定的樣式和規則建議程式碼。

sample.instructions.md

---
applyTo: "./src/components/**/*.tsx"
---

# React Component用の指示

## 役割
Reactコンポーネントの作成・編集を支援する

## 指示
- 関数コンポーネントを使用する
- TypeScriptで型安全に書く
- propsの型定義を必ず行う
- styled-componentsを使用してスタイリング
- デフォルトexportを使用する

## コード例

接口道具{

標題:字串;

onClick: () => 無效;

}

匯出預設函數按鈕({title,onClick}:Props){

返回 (

<StyledButton onClick={onClick}>
  {title}
</StyledButton>

(此處似有缺失,請提供更正的文字)。

}


## 効果的な使い方のコツ

### 1. チーム共通のルールを明文化

チーム開発では、コーディング規約をinstructionsファイルに書くことで、全員が同じスタイルでコードを書けるようになります。

`sample.instructions.md`

團隊共同規則

  • 使變數名有意義

  • 評論請用日文書寫

  • 一個函數只有一個職責

  • 魔法數字被定義為常數


### 2. プロジェクト固有の要件を盛り込む

使用しているライブラリやフレームワークに合わせた指示を書きましょう。

`sample.instructions.md`

對於 Next.js 專案

  • 在 pages/api/ 下建立 API 路由

  • 適當使用 getServerSideProps

  • 使用 next/image 優化影像

  • 使用 next/link 進行路由


## 活用メリット

- **効率性**: 毎回説明しなくても、Copilotが適切なコードを提案
- **品質向上**: プロジェクト固有のベストプラクティスを自動で適用
- **学習効果**: 新しいメンバーがプロジェクトのコーディング規約を自然に学べる
- **メンテナンス性**: コードレビューの時間短縮と統一された可読性の高いコード
- **エラー減少**: プロジェクト特有の落とし穴やアンチパターンを事前に回避
- **ドキュメント化**: コーディング規約が明文化され、プロジェクトの資産として蓄積
- **カスタマイズ性**: プロジェクトの成長に合わせて指示内容を柔軟に更新可能

## 注意点とベストプラクティス

### やってはいけないこと

❌ **指示が曖昧すぎる**

悪い例
  • 以良好的方式編寫程式碼

  • 確保沒有錯誤


❌ **指示が多すぎる**

悪い例

100 行或更多的長指令


### 推奨されること

✅ **具体的で明確な指示**

良い例
  • 使用駝峰式命名法 (camelCase) 作為變數名

  • 用型別註釋函數傳回值

  • 適當地拋出錯誤


✅ **コード例を含める**

良い例

依照以下模式實作您的 API 呼叫:

async function fetchData(): Promise<ApiResponse> {
  try {
    const response = await fetch('/api/data');
    return await response.json();
  } catch (error) {
    throw new Error('データ取得に失敗しました');
  }
}

## まとめ

GitHub Copilotのinstructionsファイルは、AIペアプログラミングをより効果的にするための強力なツールです。  
上手に書くことで、自分の指示通りの実装が手軽にできたり、ノリの合う友達にできたりできます。  
ぜひGitHub Copilotと仲良くなりましょう!

原文出處:https://qiita.com/im_yoneda/items/fae79d30df9ed900efa3


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
站長阿川

站長阿川私房教材:
學 JavaScript 前端,帶作品集去面試!

站長精心設計,帶你實作 63 個小專案,得到作品集!

立即開始免費試讀!