はじめに
このプロジェクトでは、選択した Markdown テキストの見出しレベルをユーザーが調整できる VSCode 拡張機能を作成する手順を順を追って説明します。最終的には、Visual Studio Code での Markdown 編集体験を向上させる、機能的な拡張機能が完成します。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学習します。
- TypeScript を使用して VSCode 拡張機能の雛形を作成する方法。
- TypeScript と Node.js、および VSCode の設定を統合する方法。
- 選択した Markdown テキストの見出しレベルを調整するためのコア機能を開発する方法。
- 拡張機能のビルド、デバッグ、実行のための設定ファイルを記述する方法。
🏆 達成目標
このプロジェクトを完了すると、以下のことができるようになります。
- TypeScript を使用して VSCode 拡張機能を設計・開発する。
- VSCode 環境内でのユーザー操作やテキスト選択を処理する。
- Markdown 構文を解析し、操作する。
- プロジェクト内で複数のファイルを生成・管理する。
- シームレスな開発のために TypeScript、Node.js、VSCode を設定する。
smol-ai のインストール
さらに、コード生成のためにsmol-aiフレームワークを利用します。
smol-aiの README からの説明：
これは、「ジュニア開発者」エージェント（別名 smol dev）のプロトタイプであり、製品仕様を与えるだけでコードベース全体をスキャフォールド（雛形作成）しますが、世界を終わらせたり、AGI を過度に約束したりすることはありません。create-react-app や create-nextjs-app のように、特定の、厳格な、一度限りのスターターを作成・維持するのではなく、これは基本的に create-anything-app であり、smol dev とのタイトなループでスキャフォールディングプロンプトを開発します。
私たちは、そのシンプルさからsmol-aiを気に入っています。コード生成ロジック全体は、3 つの主要な関数からなる単一の Python ファイルに収められています。
- プロンプトを実行するために必要なファイル（例：package.json, index.js, ...）のリストを生成する。
- プロンプトを実行するために必要な共有依存関係（例：axios, react, ...）のリストを生成する。
- 生成されたファイルリストの各ファイルについて、共有依存関係を利用して、そのファイルに入るコードを生成する。
smol-aiは、エラーのデバッグや現在のコードベースに基づいたプロンプトの生成といった他の機能も提供していることに注意してください。
タスク
smol-ai リポジトリのクローン
https://github.com/smol-ai/developerリポジトリを/home/labex/projectディレクトリにクローンする必要があります。smol-ai の設定
smol-aiの README を読み、OpenAI API キーを設定する必要があります。
拡張機能の初期化
このプロジェクトを説明する基本的なプロンプトがあります。
選択したテキストの見出しレベルをユーザーが調整できる vscode 拡張機能。見出しレベルを上げる、下げる、設定するの 3 つのコマンドを持つこと
このプロンプトは短く一般的であることに注意してください。より詳細を追加してプロンプトを改善することを試みることができます。
smol-aiを実行してプロジェクトを生成できます。コード生成に数分費やした後、smol-ai はdeveloper/generatedディレクトリ内にファイルを生成しました。
タスク
プロジェクトの初期化
smol-aiの README を確認し、smol-aiを使用してプロジェクトを生成します。プロジェクトの設定
生成されたコードを確認する必要があります。必要に応じて、プロンプトを調整して再生成できます。
期待される結果
developer/generatedディレクトリ内に生成されたコードの例があります。あなたの結果は異なる場合があります。
.
├── extension
│ ├── package.json
│ ├── src
│ │ ├── commands
│ │ │ ├── decreaseHeadingLevel.ts
│ │ │ ├── increaseHeadingLevel.ts
│ │ │ └── setHeadingLevel.ts
│ │ └── extension.ts
└── shared_dependencies.md
拡張機能のテスト
この拡張機能をテストするには、次の手順を正常に実行する必要があります。
- 依存関係のインストール;
- コードのコンパイル;
- 拡張機能の実行。
依存関係のインストール
生成されたディレクトリで次のコマンドを実行する必要があります。
yarn
依存関係のインストール中に問題が発生する可能性があります。これらの問題を修正する必要があります。
タスク
依存関係のインストール時の問題の修正。
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
コードをコンパイルする際に問題が発生する可能性があります。これらの問題を修正する必要があります。
タスク
コードをコンパイルする際の問題の修正。
AI に問題を修正するように依頼できます。
期待される結果
問題が修正されると、次の例のような結果が表示される場合があります。
$ tsc -p ./
✨ Done in 0.80s.
拡張機能の実行
VSCode 拡張機能を実行するには、「実行とデバッグ」パネルに移動し、エディタでextension.tsファイルがアクティブなときにvscode extensionタスクを起動する必要があります。
拡張機能の実行中に問題が発生する可能性があります。これらの問題を修正する必要があります。
タスク
拡張機能の実行時における問題の修正。
AI に問題を修正するように依頼できます。
期待される結果
問題が修正されると、拡張機能が正しく実行されているのを確認できるはずです。
まとめ
うまくいきました 🥳
それで、私たちはどうだったでしょうか？動作する拡張機能を手に入れました。プロンプトで設定された目標を達成することができました。
ここまでの道のりは「自動的」ではありませんでした。途中で多くの問題に遭遇しました。TypeScript、Node.js、VSCode に関する事前の知識がなければ、これらの問題をデバッグするにはかなりの時間がかかったでしょう。
そして、生成されたコードが動作したとしても、まだ多くの改善点があります。
- 拡張機能の開発、使用、公開に関する指示がありません。
- TypeScript/JavaScript/VSCodeの成果物のための
.gitignoreがありません。 - 開発で拡張機能を実行するための設定である
launch.jsonファイルがありません。 - テストがありません。
- コードの再利用がありません。
