ChatGPT を使って VSCode 拡張機能を作成する

はじめに

このプロジェクトでは、選択されたMarkdownテキストの見出しレベルをユーザーが調整できるVSCode拡張機能を作成するプロセスを案内します。最後まで進めることで、Visual Studio CodeにおけるMarkdown編集体験を向上させる機能拡張機能を手に入れることができます。

👀 プレビュー

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

• TypeScriptを使ってVSCode拡張機能の足場を作成する方法
• TypeScriptをNode.jsとVSCode設定と統合する方法
• 選択されたMarkdownテキストの見出しレベルを調整するコア機能を開発する方法
• 拡張機能のビルド、デバッグ、実行に必要な設定ファイルを作成する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• TypeScriptを使ってVSCode拡張機能を設計・開発する
• VSCode環境内でのユーザーインタラクションとテキスト選択を処理する
• Markdown構文を解析して操作する
• プロジェクト内で複数のファイルを生成・管理する
• シームレスな開発のためにTypeScript、Node.js、VSCodeを設定する

Skills Graph

smol-ai をインストールする

また、私たちはコードを生成するために smol-ai フレームワークを利用しています。

README からの smol-ai の説明:

これは、「初心者向けの開発者」エージェント（いわゆる smol dev）のプロトタイプで、あなたが製品仕様を与えると、コードベース全体を構築してくれますが、世界を終わらせたり、AGIについて過大な約束をしたりすることはありません。create-react-app や create-nextjs-app のような特定の、堅固な、一回限りのスターターを作って維持する代わりに、これは基本的に create-anything-app で、あなたが smol dev と密接なループで構築プロンプトを開発します。

私たちは smol-ai がシンプルであることが好きです。コード生成ロジック全体が、3つの主な関数で構成される単一のPythonファイルにあります。

1. プロンプトを実行するために必要なファイルのリストを生成する（例：package.json、index.js、...）
2. プロンプトを実行するために必要な共有依存関係のリストを生成する（例：axios、react、...）
3. 生成されたファイルリストの各ファイルに対して、該当する場合は共有依存関係を利用して、ファイルに入るコードを生成する

smol-ai は、エラーをデバッグしたり、現在のコードベースに基づいてプロンプトを生成したりするなど、他の機能も提供しています。

タスク

1. smol-ai リポジトリをクローンする

   /home/labex/project ディレクトリに https://github.com/smol-ai/developer リポジトリをクローンする必要があります。

2. smol-ai を設定する

   smol-ai の README を読み、OpenAI API キーを設定する必要があります。

この拡張機能を初期化する

このプロジェクトを説明する基本的なプロンプトがあります。

選択されたテキストの見出しレベルをユーザーが調整できるvscode拡張機能。3つのコマンドを持つ必要があります：見出しレベルを上げる、見出しレベルを下げる、および見出しレベルを設定する

プロンプトは短くて一般的であることに注意してください。プロジェクトに関する詳細を追加することで、プロンプトを改善してみることができます。

smol-ai を実行してプロジェクトを生成することができます。コード生成に数分かかった後、smol-aiは developer/generated ディレクトリにファイルを作成しました。

タスク

1. プロジェクトを初期化する

   smol-ai の README を参照し、その後 smol-ai を使ってプロジェクトを生成します。

2. プロジェクトを設定する

   生成されたコードを確認する必要があります。必要に応じて、プロンプトを調整して再生成することができます。

予想結果

developer/generated ディレクトリに生成されたコードの例があります。あなたの結果は異なる場合があります。

.
├── extension
│   ├── package.json
│   ├── src
│   │   ├── commands
│   │   │   ├── decreaseHeadingLevel.ts
│   │   │   ├── increaseHeadingLevel.ts
│   │   │   └── setHeadingLevel.ts
│   │   └── extension.ts
└── shared_dependencies.md

この拡張機能をテストする

この拡張機能をテストするには、以下の手順を正常に実行する必要があります。

1. 依存関係をインストールする
2. コードをコンパイルする
3. 拡張機能を実行する

依存関係をインストールする

生成されたディレクトリで以下のコマンドを実行する必要があります。

yarn

依存関係をインストールする際に問題が発生する場合があります。その問題を解決する必要があります。

タスク

1. 依存関係をインストールする際の問題を解決する

   AIに問題を解決してもらうことができます。

予想結果

問題が解決すると、以下の例の結果が表示される場合があります。

$ yarn

...
[3/5] 🚚 Fetching packages...
[4/5] 🔗 Linking dependencies...
[5/5] 🔨 Building fresh packages...
✨ Done in 4.31s.

この拡張機能をビルドする

TypeScriptはコンパイル言語であるため、コードをJavaScriptにコンパイルするためのビルドステップを実行する必要があります。package.json には以下のスクリプトがあります。

"scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p./",
    "watch": "tsc -watch -p./",
    "postinstall": "node./node_modules/vscode/bin/install",
    "test": "npm run compile && node./node_modules/vscode/bin/test"
},

以下のコマンドを実行することでコードをビルドできます。

tsc --init
yarn compile

コードをコンパイルする際に問題が発生する場合があります。その問題を解決する必要があります。

タスク

1. コードをコンパイルする際の問題を解決する

   AIに問題を解決してもらうことができます。

予想結果

問題が解決すると、以下の例の結果が表示される場合があります。

$ tsc -p./
✨ Done in 0.80s.

この拡張機能を実行する

VS Code拡張機能を実行するには、エディタで extension.ts ファイルがアクティブな状態で、「実行とデバッグ」パネルに移動して、「vscode拡張機能」タスクを起動する必要があります。

拡張機能を実行する際に問題が発生する場合があります。その問題を解決する必要があります。

タスク

1. 拡張機能を実行する際の問題を解決する

   AIに問題を解決してもらうことができます。

予想結果

問題が解決すると、拡張機能が正常に実行されることが期待されます。

まとめ

うまくいきました 🥳

では、私たちはどのようにやったのでしょうか？機能する拡張機能ができました。私たちは、プロンプトで設定された目標を達成することができました。

ここまでの道のりは「自動的」ではありませんでした。途中でたくさんの問題にぶつかりました。TypeScript、Node.js、およびVS Codeの事前知識が不足していたため、これらの問題をデバッグするのに時間がかかりました。

そして、私たちが機能するコードを生成することができたとしても、まだたくさんの改善が必要です：

• 拡張機能の開発方法、使用方法、または公開方法に関する指示がありません。
• TypeScript/JavaScript/VS Codeのアーティファクト用の.gitignoreがありません。
• 開発時に拡張機能を実行するように設定するlaunch.jsonファイルがありません。
• テストがありません。
• コードの再利用がありません。