ctcAdvent Calendar 2024

VSCodeの拡張機能Continueを使ったAIコーディング環境

Last updated at 2024-12-11Posted at 2024-12-11

はじめに

この記事ではVSCodeの拡張機能Continueを用いたAIコーディング環境について紹介します

モチベーション

社内ではAzureOpenAIを用いたAI Chatが利用できる環境はあります。ただしチャット画面とVSCodeの行き来が面倒であるためシームレスに開発が進められるようにしたいと考えていました。その際、GitHub Copilotが第一候補になりますが、社内では未提供なので代替手段を調べていたところContinueを見つけたので利用をしてみました。

Continueについて

Continueは、開発者向けのAI支援コード補助ツールを提供するプラットフォームで、以下のような特長があります。

AIコードアシスタント
- オープンソースで提供
- 任意のモデルとコンテキストを接続して、VSCode内で自動補完やAIチャットを利用できる
機能:
- Tabでの自動補完: プログラミング言語に関係なく、コードの単一行または全体のセクションを自動補完
- 参照とチャット: 関数、ファイル、コードベース全体について質問するためのコードや他のコンテキストを添付可能
- ハイライトと指示: コードセクションをハイライトし、ショートカットキーで書き換えを指示可能

使い方

インストール

VSCodeの拡張機能からContinueをインストール

左側にContinueが追加

個人的に右側にチャット欄がある方が使いやすいので移動させています
- サイドバーを出して、左メニューにあるContinueのアイコンを右のスペースへドラッグ&ドロップで移動

初期設定

拡張機能内にある歯車マークを押すとconfig.jsonが開きます。ここに自身が利用する生成AIモデルの設定をいれていきます。

モデルの設定方法はこちらを参考にしてください

参考に現在の私の設定内容を載せておきます。ホスト名などはマスクしています

共有のGPUサーバーに置いてあるOllamaと自社で開発しているAzureOpenAIを用いたAPIサーバー(OpenAI互換形式)を使えるような設定をいれています

設定内容

Continueの設定

{
  "models": [
    {
      "model": "AUTODETECT",
      "title": "c-aichat",
      "apiBase": "https://example.com/v1/",
      "apiKey": Dummy",
      "completionOptions": {
        "temperature": 0,
        "max_tokens": 4096,
        "stream": true
      },
      "provider": "openai",
      "systemMessage": "Answer in Japanese."
    },
    {
      "title": "Qwn2.5-coder",
      "model": "qwen2.5-coder:7b-instruct",
      "provider": "ollama",
      "apiBase": "http://example.com:11434/",
      "completionOptions": {},
      "apiKey": "Dummy"
    },
    {
      "title": "DeepSeek-coder-v2",
      "model": "deepseek-coder-v2:16b",
      "provider": "ollama",
      "apiBase": "http://example.com:11434/",
      "completionOptions": {},
      "apiKey": "Dummy"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Tab Autocomplete Model",
    "provider": "ollama",
    "model": "qwen2.5-coder:1.5b",
    "apiBase": "http://example.com:11434/"
  },
  "tabAutocompleteOptions": {
    "template": "<|fim_prefix|>{{{ prefix }}}<|fim_suffix|>{{{ suffix }}}<|fim_middle|>"
  },
  "embeddingsProvider": {
    "provider": "transformers.js"
  },
  "slashCommands": [
    {
      "name": "edit",
      "description": "Edit selected code"
    },
    {
      "name": "comment",
      "description": "Write comments for the selected code"
    },
    {
      "name": "share",
      "description": "Export this session as markdown"
    },
    {
      "name": "cmd",
      "description": "Generate a shell command"
    }
  ],
  "customCommands": [
    {
      "name": "comment-jp",
      "prompt": "選択したソースコードに日本語でコメントを入れてください",
      "description": "選択したコードにコメントを入れます"
    }
  ],
  "contextProviders": [
    {
      "name": "diff",
      "params": {}
    },
    {
      "name": "docs",
      "params": {}
    },
    {
      "name": "open",
      "params": {}
    },
    {
      "name": "terminal",
      "params": {}
    },
    {
      "name": "problems",
      "params": {}
    },
    {
      "name": "codebase",
      "params": {}
    },
    {
      "name": "folder",
      "params": {}
    },
    {
      "name": "code",
      "params": {}
    }
  ],
  "allowAnonymousTelemetry": false
}

利用方法

Tab補完を使った開発

GitHub Copilotのようにコードを書くと補完候補が出てきてTabを押すとその内容が反映されます。
エディタ内でAI回答含め完結するのでリズムよくコーディングできます。

タブ補完で使うモデルはconfig.jsonのtabAutocompleteModelで設定ができます。

  "tabAutocompleteModel": {
    "title": "Tab Autocomplete Model",
    "provider": "ollama",
    "model": "qwen2.5-coder:1.5b",
    "apiBase": "http://example.com:11434/"

私はOllamaにqwen2.5-coder:1.5bを入れて利用しています。

コメント + Tab補完

先にコメントを書くとその内容を見てコードを書いてくれます
いちいちチャット画面を開かずにかけるので便利です。
特によく使うシーンとしてJupyterNotebookでちょっと書き方を調べるのが面倒…というときに重宝しています。

コードの読み込み

VSCodeで作成しているコードについて様々な方法で読み込ませることができます

選択中のコードをチャット入力欄に入れる
エディタで対象コードを選択している状態で Ctrl + Shift + L でチャット欄に挿入ができます。関数単位で質問したいときなどに利用しています

選択中のコードを修正
エディタで対象コードを選択している状態で Ctrl + Shift + I でもチャット欄に挿入ができます。こちらの場合は指示を与えた内容でコードに対して直接修正をかけることができます。以下の図ではコメントを入れる指示をしたところです。この状態でAcceptを押すと変更内容が反映されます