Chuyển đến nội dung chính

レッスン 2: VS Code で GitHub Copilot をインストールして構成する

GitHub Copilot (Free/Pro/Pro+/Enterprise) にサインアップし、拡張機能をインストールし、設定を構成し、モデル (GPT-5.4、Claude、Gemini) を選択し、自動モデル選択、キーボード ショートカット、および基本的なワークフローを行います。

💻 プログラミング — レッスン 2 レッスン 2: GitHub Copilot のインストールと構成 VSコードで

GitHub Copilot を使用した Vibe コーディング: 基本から高度まで

パート 1: Vibe コーディング プラットフォームと GitHub Copilot

xdev.asia

1. GitHub コパイロット パッケージ (2026)

GitHub Copilot は、個人や企業に適したさまざまなプランを提供しています。

パッケージ 価格 主な特徴
副操縦士無料 $0/月 インラインでの提案とチャットでのやりとりを月ごとに制限します。自動モデルの選択。
コパイロット プロ $10/月 無制限の完了とチャット。多くのモデル。コパイロット メモリ (プレビュー)。
コパイロット プロ+ $39/月 プレミアム モデル、Copilot メモリ、クラウド エージェント、より高いレート制限。
副操縦士事業 ユーザーあたり月額 19 ドル 組織のポリシー、コンテンツの除外、監査ログ、IP 補償。
副操縦士エンタープライズ ユーザーあたり月額 39 ドル ナレッジベース、微調整されたモデル、高度なセキュリティ。

特に学生向け: GitHub はプログラムを通じて Copilot を無料で提供します GitHub 教育 (GitHub 学生開発者パック)。

2. VS Code に GitHub Copilot をインストールする

ステップ 1: VS コードをインストールする

からダウンロードしてインストールします code.visualstudio.com。使用を推奨するバージョン 安定した (または インサイダー 最新の機能を体験したい場合)。

ステップ 2: GitHub Copilot にログインする

  1. VS コードを開く
  2. ホバーイン 副操縦士のアイコン ステータスバー(右下隅)
  3. 選択 「副操縦士の設定」
  4. GitHub アカウントにログインします
  5. 定期購読をお持ちでない場合 → 自動的に定期購読されます 副操縦士無料
Status Bar: [Copilot Icon] → "Set up Copilot" → Sign in with GitHub

ステップ 3: インストールを確認する

ログインに成功した後:

  • ステータス バーのコパイロット アイコンがアクティブな状態に変わります
  • 任意のコード ファイルを開く → 入力を開始する → インライン候補 (ゴースト テキスト) を表示する
  • チャットビューを開く Ctrl+Cmd+I (macOS) または Ctrl+Alt+I (Windows/Linux)

3. AIモデルの選択

GitHub Copilot を使用すると、各タスクに適切な AI モデルを選択できます。

現在のモデル (2026 年 3 月):

モデル プロバイダー 特徴
GPT-5.4 OpenAI コーディングに最適な最新、最強。 2026 年 3 月から一般提供開始。
GPT-5.4ミニ OpenAI より軽く、より速く、単純な作業に適しています。
GPT-5.3-コーデックス OpenAI コード生成用に最適化された長期サポート。
クロード (人族) 人間的 推理力に優れ、指示は従う。
ジェミニ 3.1 プロ Google 長いコンテキスト。JetBrains/Xcode/Eclipse をサポートします。
Grok コード高速 1 xAI 高速で、Copilot Free 自動選択で使用されます。

自動モデル選択

デフォルトでは、Copilot が使用されます 自動 — 各プロンプトに対して最適なモデルを自動的に選択します。クリックすると変更できます モデルのドロップダウン チャットビューで。

Chat view → Model dropdown (góc trên) → Chọn model cụ thể hoặc "Auto"

4. 重要な設定を構成する

VS コード設定を開く (コマンド+、)「副操縦士」を検索します。

4.1.インライン提案

{
  // Bật/tắt inline suggestions
  "editor.inlineSuggest.enabled": true,

// Bật Next Edit Suggestions (NES) "editor.inlineSuggest.edits.enabled": true,

// Tự động hiển thị suggestions "github.copilot.editor.enableAutoCompletions": true }

4.2.エージェントモード

{
  // Bật Agent mode (quan trọng!)
  "chat.agent.enabled": true,

// Cho phép agent chạy terminal commands "github.copilot.chat.agent.runCommands": true }

4.3.特定の言語

{
  // Tắt Copilot cho một số ngôn ngữ
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": true,
    "yaml": true
  }
}

5. 覚えておきたいキーボードショートカット

ショートカット (macOS) ショートカット (Win/Linux) 機能
タブ タブ インライン提案を受け入れる
Esc Esc 提案を却下する
オプション+] Alt+] 次の提案
オプション+[ Alt+[ 以前の提案
コマンド+→ Ctrl+→ 一言ずつ受け入れる
Cmd+I Ctrl+I インラインチャット
Ctrl+Cmd+I Ctrl+Alt+I チャットビューを開く

6. 最初の対話

6.1.インライン提案をテストする

ファイルの作成 こんにちは。 そして入力を開始します:

# Function to calculate fibonacci numbers
def fibonacci(

Copilot は関数本体を自動的に提案します。プレス タブ 受け入れること。

6.2.テストチャットビュー

チャットビューを開く (Ctrl+Cmd+I) を入力し、次のように入力します。

Create a simple Python script that reads a CSV file and generates a bar chart using matplotlib

6.3.テストエージェントモード

チャットビューで、選択します エージェント ドロップダウンから次のように入力します。

Create a simple todo web app with HTML, CSS, and JavaScript. Make it modern and responsive.

エージェントが自動的にファイルを作成し、コードを記述し、プロジェクトをセットアップする様子を観察します。

7. Copilot インターフェース構造を理解する

┌─────────────────────────────────────────────────┐
│  VS Code + GitHub Copilot                       │
├─────────────────────────────────────────────────┤
│                                                  │
│  ┌──────────┐  ┌────────────────────────────┐   │
│  │ Chat     │  │ Editor                     │   │
│  │ View     │  │                            │   │
│  │          │  │  [Ghost text suggestions]   │   │
│  │ Agent ▼  │  │                            │   │
│  │ Model ▼  │  │  Cmd+I → Inline Chat      │   │
│  │          │  │                            │   │
│  │ Sessions │  │                            │   │
│  │ list     │  │                            │   │
│  └──────────┘  └────────────────────────────┘   │
│                                                  │
│  Status Bar: [Copilot ●] [Model: Auto]          │
└─────────────────────────────────────────────────┘

8. 一般的な問題のトラブルシューティング

問題 解決策
提案が表示されない ステータス バーの Copilot アイコンをチェックし、サインインしていることを確認してください
エージェントモードが表示されない オンにする チャットエージェント有効 設定で
低品質の提案 モデルを変更してコンテキスト (コメント、ファイルを開く) を追加してみてください。
レート制限に達しました Free から Pro にアップグレードするか、新しい月がリセットされるまで待ちます
拡張機能の競合 他の AI 拡張機能 (Tabnine、Codeium など) をオフにする

9. まとめ

Vibe コーディングを始める準備ができました。行われた内容の概要:

  • ✅ Copilot パッケージを理解し、適切なパッケージを選択する
  • ✅ VS Code で GitHub Copilot をインストールしてログインします
  • ✅ 適切な AI モデルを選択します
  • ✅ 重要な設定を構成する
  • ✅ キーボードショートカットを理解する
  • ✅ インライン提案、チャット、エージェント モードのテストに成功

次の記事ではさらに深く掘り下げていきます インラインの提案と次の編集の提案 — 毎日のコーディングを高速化するのに役立つコア機能。