OpenAIを使ったVSCode拡張機能の作成（実装〜動作確認編）

はじめに

はじめまして。ストレッチクラウドを開発しているソフトウェアエンジニアの野田です。

今回はOpenAI APIと連携してVue2のコードをVue3のコードに置き換えるVSCode 拡張機能を作った（途中）ので、どのように作ったのかご紹介します。

作った背景

Vue.jsをお使いの皆様はご存知だと思いますが、Vue2が今年いっぱいでEOLを迎えます。弊社で開発しているアプリケーションでもVue2をまだ一部使っており、Vue3にマイグレーションする際に記述を大きく変更する必要があります。（Vue2の書き方のままVue3に上げることもできますが、私の開発組織ではVue3の書き方に変更してからVue3を上げる方針にしました）

その書き換えが手動だとひたすら面倒臭いし、バグらないかかなり気も使う・・・ってことで、ChatGPTを使ってなんとかならないかと思い、OpenAI APIと連携するVSCode 拡張機能を作ってみました。

やったこと

1. 環境構築

VSCode 拡張機能を作る際はお決まりでVSCode Extension GeneratorとYeomanを使うみたいです。

npm install -g yo generator-code
yo code

上記実行してプロジェクト名や使用言語を選択するとあっという間に必要なファイル等が作成されます。

2. 拡張機能の基本的な設定

VSCode 拡張機能ではpackage.jsonに各種設定を追記していきます。例えば拡張機能の設定をユーザーにしてもらいたい場合は、下記のように定義することで設定項目を追加できます。

"configuration": {
  "title": "Vue3CodeGenerator",
  "properties": {
     "vue3codegenerator.apiKey": {
       "type": "string",
       "default": "",
       "description": "API key from [OpenAI](https://platform.openai.com/account/api-keys)"
     }
  }
}

こちらの例ではAPIへリクエストする際のAPI keyを受け取れるように設定を追加しています。

VSCode 拡張機能ではコマンドベースで処理が実行されるため、package.jsonでコマンドを定義する必要があります。

"commands": [
  {
    "command": "vue3codegenerator.replace",
    "title": "Replace with the Composition API code."
  }
],
"menus": {
  "editor/context": [
    {
      "command": "vue3codegenerator.replace",
      "when": "editorTextFocus",
      "group": "generator-menu-group@1"
    }
  ]
},

上記でVue2のコードをVue3のコードに置き換えるコマンドを定義しています。

さらにmenusにコマンドを追加することで、エディタ上のメニューでコマンドを実行できるようになります。

3. コマンドの登録

2で追加したコマンドを実際にVSCode上から使えるようにするには、src/extensions.ts内で登録処理を行う必要があります。

 vscode.commands.registerCommand('vue3codegenerator.replace',  async () => {
    // ここにコマンドが実行された際の処理を書く
});

4. 実行時の処理

今回の拡張機能では、

エディタ上のコードを取得する
APIへリクエスト
レスポンスでコードを置き換える

という処理の流れになります。

エディタ上のコードを取得する

const selection = vscode.window.activeTextEditor?.selection;
const selectedText = vscode.window.activeTextEditor?.document.getText(selection) || '';

エディタの操作を行う際は、vscode.window.activeTextEditorを操作します。

activeTextEditorはTextEditor型のオブジェクトになっており、selectionから現在位置を表すオブジェクトが取得できます。

このselectionをdocument.getTextの引数に渡すことによって選択中の文字が取得できます。

APIへリクエスト

APIへのリクエストはopenaiを使います。

詳しい使い方はREADMEを参考にしてください。

レスポンスでコードを置き換える

最後にAPIから取得したレスポンスで既存のコードを置き換えます。

vscode.window.activeTextEditor?.edit(async edit => {
    edit.replace(selection, response);
});

こちらでもactiveTextEditorを利用し、activeTextEditor.editメソッドでエディタ上の文字を編集することができます。

上記の例では、第一引数に現在選択中の文字位置を表すselectionを渡し、第二引数に置き換えたい文字を渡します。

5. 動作確認

VSCodeでは実装中の拡張機能を気軽に動作確認することができます。

デバッグメニューを開いてRun Extensionを実行すると、現在開いているプロジェクトの拡張機能が有効になった状態でデバッグ用のウインドウが起動します。

まとめ

このように、思っていたより簡単に拡張機能が作れてしまいました。

次回は拡張機能を公開するところまでご紹介できればと思っています。

Link and Motivation Developers' Blog

リンクアンドモチベーションの開発者ブログです