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

# はじめに

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

# モチベーション

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

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


https://www.continue.dev/


# 使い方

## インストール

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/1be4a64c-0ff3-0633-9a19-5902e7aac313.png)

- 左側にContinueが追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/d501e6ce-209b-4aa9-5bd2-4ae029e75d47.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/fcc6d28a-bd0e-ded9-4120-9f96534af375.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/a36c37c8-6cbb-884e-0614-98e34df8b206.png)

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

https://docs.continue.dev/chat/model-setup


参考に現在の私の設定内容を載せておきます。ホスト名などはマスクしています
- 共有のGPUサーバーに置いてあるOllamaと自社で開発しているAzureOpenAIを用いたAPIサーバー(OpenAI互換形式)を使えるような設定をいれています

<details><summary>設定内容</summary>

```json: 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": "
{{{ prefix }}}
{{{ suffix }}}
"
  },
  "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
}
```
</details>

# 利用方法

## Tab補完を使った開発

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/30420c7c-b733-c41e-8dc5-4493151b6e1d.png)

タブ補完で使うモデルはconfig.jsonのtabAutocompleteModelで設定ができます。
```json
  "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でちょっと書き方を調べるのが面倒…というときに重宝しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/ffc89399-3fa0-4640-e713-668b305889d3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/0a85629a-02e5-0216-0829-1d51f5c1908e.png)







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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/78ab2c18-8c48-18a3-fc60-6d11c6298d29.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/ab18dc5e-672e-1b6a-65b7-499f59f39be7.png)

反映後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/e6d88d11-b5e1-a7f9-a2ba-85fc1670c09a.png)

- ファイルを選択
チャット画面で @ を入れるとファイル名などを選択できます。ファイル全体に対して質問をしたい場合はこの機能を使うと便利です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/2beb9867-8f93-0bcb-ce3c-10757b7afb71.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/00e03702-4cfd-2e87-cf5a-45fed2379069.png)


- 生成したコードを反映

チャット欄で生成したコードについて右上にある再生ボタンを押すことで現在編集しているエディタに反映することができます。

コードの上に出ているAcceptのところから受け入れ、破棄を選択できます。
Ctrl + Shift + Enter ですべて受け入れ。 Ctrl + Shift + BackSpace ですべて破棄することもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/0296e483-cf33-2d62-4ccd-62de6dd02c09.png)


- プロジェクト全体をざっくりとみる

@codebase でプロジェクト全体のコードをざっくりと見ることができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/d30546cd-f839-87a8-17fd-e95a9f8da9a5.png)

自分はまだ使いこなせていないですが既存プロジェクトにコードを追加する際、どこに追加したらいいか聞くなど指針を得たいときに使うと便利そうです。

https://docs.continue.dev/customize/deep-dives/codebase



## その他の機能
まだ活用しきれていないのですが、他にもさまざまな機能があります
- 「/」 キーからコマンドを呼び出せます。よく使う指示をconfig.jsonで入れておくとすぐに呼び出せます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/79be54c9-1813-6b81-36f7-509c1b4e4525.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/37318629-87a2-6152-032a-bfc703870cf6.png)



- ドキュメント読込機能。ライブラリの公式ドキュメントのURLを読み込ませて質問ができるようになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481306/cb922e45-bd82-8234-0b50-82cbb8b80512.png)

# 悩み
JupyterNotebook(.ipynb)でContinueを利用していると頻繁にNotebookのランタイムが再起動します。そのときは止むを得ず拡張機能を無効化して対応しています。

# まとめ

Continueを活用することで、AIを使った効率的なコーディング環境を構築することができます。特に、チャットとコードの行き来の手間を省き、シームレスな開発が可能になる点が大きな魅力です。まだ使いこなせていない機能も多く記事にしていく中でより広く使っていきたいと思いました。


# おわりに
こちらの記事はctc Advent Calendar 2024の記事となります
この後もctc(中部テレコミュニケーション株式会社)のメンバーが技術にまつわる知見を投稿していきますのでご期待ください

https://qiita.com/advent-calendar/2024/ctc