【VSCode】CopilotとTabnineで爆速開発

※この記事は[四工大アドベントカレンダー 2023](https://qiita.com/advent-calendar/2023/yonko_univ)の参加記事です。

## 背景

こんにちは、[うだい](https://twitter.com/yudai1204)です。
私の普段使う IDE は VSCode と Rider です。
今回は VSCode にフォーカスして、AI 補完機能の 2 大巨頭である[GitHub Copilot](https://github.com/features/copilot)と[Tabnine](https://www.tabnine.com/)をどちらも使う方法をご紹介します。

## Copilot/Tabnine って何？

2023 年は生成 AI が特に発展した 1 年間でしたが、実はそれよりも前からこれら 2 つのプロダクトは存在しており、どちらも異なったアプローチで VSCode の補完を行えるものでした。
これらの詳しい解説については詳しい記事を以下に引用します。

> GitHub Copilot は VS Code と連携するプログラミング補助ツールです。コメントを書くと、その内容に合わせたコーディングが行われたり、メソッドを書くとその内部のコードをサジェストしてくれます。これは自動補完に似ていますが、前後の文脈を読み取った上でのサジェストなので、はるかにレベルが高いです。
>
> 同様のプロダクトに Tabnine があります。

https://www.hexabase.com/column/ai-development-assistance-technology/

しかし ChatGPT の台頭に伴い、2023 年 3 月に Copilot は**Copilot X**を発表しました。
**Copilot X**は GPT3.5 をベースに GitHub 内の数多くのコードを学習させ、今まで以上に的確かつ膨大な AI 補完を行うようになりました。

https://github.blog/jp/2023-03-23-github-copilot-x-the-ai-powered-developer-experience/

## それぞれの特徴

現在の Copilot はすでに記述済みのコードを参考にして非常に的確でまとまった補完を行いますが、一方で Tabnine の方が優れている部分もあります。  
例えば、Copilot では複数行での補完に対応しているため欲しいものとは違う補完が大量に表示されることがありますが、Tabnine では最大でも 1 行しか補完できないため逆に細かいステップを踏んだミニマムで適切な補完が行えるというメリットがあります。

|                          | Copilot         | Tabnine        |
| ------------------------ | --------------- | -------------- |
| 価格                     | $10/月〜        | **無料〜**     |
| 補完の速さ               | 数秒            | **ほぼ 0**     |
| 補完の長さ               | **1 語~数十行** | 1 行           |
| 補完の同時表示           | 1 つまで        | **複数(後述)** |
| コード全体を踏まえた補完 | **◎**           | △              |

## いいとこ取りをしたい！

Copilot と Tabnine にはどちらにもいいところがあり、お互いにデメリットを補完し合うことができるように思えます。  
しかし、**単純に両方をインストールすると問題が生じます**。
それは、どちらも**インライン補完**を行うために**一方の補完しか適用されない**ということです。

Tabnine の補完は 1 行で終わるものしか表示されないため、**ポップアップ補完**の方が相性が良いです。
ポップアップ補完では同時に複数の候補も表示することができます。  
しかし、VSCode の設定のみではポップアップ補完に変更することはできません。

## Tabnine をポップアップ補完する

結論から言うと Tabnine の一部の設定は VSCode とは独立した Tabnine 専用の設定ファイルを編集する必要があり、そちらを設定することで Copilot と Tabnine を両立させられます。
設定の config の場所は OS により異なりますが、[Tabnine の公式ページ](https://support.tabnine.com/hc/en-us/articles/5232194870673-Config-file-location)から確認が可能です。

| OS      | 設定ファイルの場所                                                |
| ------- | ----------------------------------------------------------------- |
| MacOS   | /Users/{UserName}/Library/Preferences/TabNine/tabnine_config.json |
| Windows | C:\Users\{UserName}\AppData\Roaming\TabNine\tabnine_config.json   |

こちらの`tabnine_config.json`内にある`inline_suggestions_mode`を`false`に設定することでポップアップでの表示が可能になります。(標準では`null`になっています。)

| before | after |
|-|-|
| ![スクリーンショット 2023-11-27 19.02.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449776/ac413bb4-3b41-05c9-b121-1521479b06ca.png) | ![スクリーンショット 2023-11-27 19.03.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449776/02bbcf16-6a56-deab-06cf-2a89eda9f675.png) |

こちらを設定後に VSCode を再起動することによって、インライン表示で Copilot、ポップアップ表示で Tabnine の補完が可能になります。

![スクリーンショット 2023-11-27 19.04.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449776/4d2938e4-644c-5cde-34d7-d60dcc52b3de.png)
*ポップアップがTabnine、インラインがCopilotになっている様子*

## 最後に

VSCodeは多くの拡張性を持った高機能なIDEです。自分好みの拡張機能を使って圧倒的な開発速度を確保しましょう！