VS Code と Ollama を使用してコードのコメントを自動化する

カルロス・ムクホ著✏️

コードのコメントはソフトウェア開発において重要な役割を果たします。彼ら:

• * 複雑なロジックを説明する
  • 意思決定プロセスを文書化する
  • 将来の開発者にコンテキストを提供します

うまく書かれたコードは一目瞭然であるべきだと主張する人もいますが、特定の実装の背後にある理由を理解する上でコメントの重要性を強調する人もいます。コメント生成を自動化するというアイデアは、コメントを価値あるものにする人間の洞察を AI が本当に捕捉できるかどうかについての議論を引き起こしました。

GitHub Copilot のような AI を活用したコーディング アシスタントの人気は高まり続けていますが、コミュニティはデータ プライバシーと独自のプラットフォームに依存するリスクについての疑問に取り組んでいます。こうした懸念にもかかわらず、Ollama のようなツールは、データ プライバシーやプラットフォームのロックインに関する懸念に対処しながら、AI 機能の恩恵を受ける方法を提供します。

Ollama はコーディング アシスタントそのものではなく、開発者がデータを共有したり高価なサブスクリプションを支払ったりすることなく、大規模言語モデル (LLM) を実行して生産性を向上できるようにするツールです。

このチュートリアルでは、Ollama を使用してコメント生成を自動化する VS Code 拡張機能を作成する方法を学びます。このプロジェクトでは、データを共有したり高価なサブスクリプションを支払ったりすることなく、LLM モデルを使用して生産性を向上させる方法を示します。

チュートリアルが終わるまでに、次のような拡張機能が完成します:

この手順を進めるには、次のものが必要です:

• Node.js と npm がインストールされています
• Ollama を使用して LLM を実行できるマシン

オラマのセットアップ

Ollama をセットアップするには、まず、Ollama の公式 Web サイトからオペレーティング システムに適切なインストーラーをダウンロードします。

• Ollama を Windows にインストールするには、実行可能ファイルをダウンロードして実行します。 Ollama は自動的にインストールされ、すぐに使用できるようになります
• Mac の場合、MacOS 用 Ollama をダウンロードした後、ファイルを解凍し、Ollama.app フォルダーをアプリケーション フォルダーにドラッグします。アプリを移動するとインストールが完了します

• Linux ユーザーの場合、Ollama のインストールはターミナルで次のコマンドを実行するだけで簡単です。
  

  curl -fsSL https://ollama.com/install.sh | sh
  

モデルのプルと実行

Ollama のインストールが完了したら、LLM との対話を開始できます。コマンドを実行する前に、アプリを開くかターミナルで次のコマンドを実行して、Ollama を起動する必要があります:

curl -fsSL https://ollama.com/install.sh | sh

このコマンドは Ollama アプリを起動し、利用可能なコマンドを使用できるようにします。また、ポート 11434 で実行されている Ollama サーバーも起動します。新しいブラウザ ウィンドウを開いて http://localhost:11434/ に移動すると、サーバーが実行されているかどうかを確認できます。モデルを実行せずに Ollama レジストリからモデルを取得するには、オラマプルコマンド。たとえば、phi3.5 モデルをプルするには、次のコマンドを実行します:

ollama serve

このコマンドはモデルを取得し、後で使用できるようにします。次のコマンドを使用して、プルされたすべてのモデルを一覧表示できます:

ollama pull phi3.5

これにより、モデルのリストとそのサイズおよび変更時間が表示されます:

ollama list

モデルをすぐにプルして実行するには、ollam a run コマンドを使用します。たとえば、phi3.5 を実行するには、次を実行します:

NAME                 ID                  SIZE          MODIFIED     
phi3.5:latest        61819fb370a3        2.2 GB        11 days ago         
llava:latest         8dd30f6b0cb1        4.7 GB        2 weeks ago         
phi3:latest          64c1188f2485        2.4 GB        3 months ago        
csfm1993:~$ 

このコマンドは、モデルがまだプルされていない場合はモデルをプルし、実行を開始するので、すぐにクエリを開始できます。ターミナルに次の内容が表示されるはずです:

ollama run phi3.5

このチュートリアルでは、phi3.5 モデルを使用して、特定のコード ブロックのコメントを生成します。この言語モデルは、サイズとパフォーマンスのバランスを考慮して選択されました。コンパクトでありながら強力な結果が得られるため、概念実証アプリの構築に最適です。

phi3.5 モデルは軽量なので、RAM が限られており、GPU を搭載していないコンピューターでも効率的に実行できます。 GPU をお持ちの場合は、より大きな LLM を自由に実行してください。次のプロンプトをモデルに送信します:

csfm1993:~$ ollama run phi3.5
>>> Send a message (/? for help)

プロンプトは、phi3.5 モデルに、特定のコード ブロックで何が起こっているかを説明するよう求めます。次のような答えが得られるはずです:

complete code:
"
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
  res.send('Hello World!')
})
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
"
Given the code block below, write a brief, insightful comment that explains its purpose and functionality within the script. If applicable, mention any inputs expected in the code block. 
Keep the comment concise (maximum 2 lines). Wrap the comment with the appropriate comment syntax (//). Avoid assumptions about the complete code and focus on the provided block. Don't rewrite the code block.
code block:
"
app.get('/', (req, res) => {
  res.send('Hello World!')
})
"

モデルは、指定されたコメント構文とその後に説明が続くコメントを返します。モデルとの対話が完了したら、コマンド /bye を送信してチャットを終了します。

プロジェクトの作成と構成

このセクションでは、新しい VS Code 拡張プロジェクトを作成し、Ollama と対話するために必要なモジュールをインストールします。 Yeoman と VS Code Extension Generator を使用して、TypeScript プロジェクトをスキャフォールディングします。

ターミナルで次のコマンドを実行して、新しい VS Code 拡張プロジェクトを作成します。

// This Express.js route handler responds to GET requests at the root URL 
('/'), sending back a plain text 'Hello World!' message as an HTTP 
response. No additional inputs are required for this specific block of 
code, which serves as a basic setup example within a web server context.

プロジェクトに使用する言語として TypeScript を選択し、残りのフィールドに入力します。

npx --package yo --package generator-code -- yo code

次に、次のコマンドを実行して、Ollama サーバーとの通信に必要なモジュールをインストールします。

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? commentGenerator
? What's the identifier of your extension? commentgenerator
? What's the description of your extension? Leave blank
? Initialize a git repository? Yes
? Which bundler to use? unbundled
? Which package manager to use? npm
? Do you want to open the new folder with Visual Studio Code? Open with `code`

上記のコマンドにより、次のパッケージがインストールされました:

• ollama: LLM と対話するためのツールとユーティリティのセットを提供するパッケージ。これは、Ollama サーバーと通信するために使用され、LLM にプロンプ​​トを送信して、指定されたコード ブロックのコード コメントを生成します
• クロスフェッチ: Node.js に Fetch API サポートをもたらす軽量パッケージ。これにより、Fetch がネイティブに利用できない環境でも、API リクエストなどのリソースを取得できるようになります。これは、Ollama サーバーに HTTP リクエストを送信し、LLM が応答を生成するのに時間がかかりすぎるときに発生する可能性のある HTTP リクエストのタイムアウト エラーを回避するために使用されます

package.json ファイルを開き、エンジン プロパティの vscode バージョンがシステムにインストールされている VS Code のバージョンと一致していることを確認します。

curl -fsSL https://ollama.com/install.sh | sh

package.json ファイルでは、これが TypeScript プロジェクトであるにもかかわらず、拡張機能のメイン エントリ ポイントが out ディレクトリにある extension.js ファイルという名前のファイルであることに注目してください。これは、プロジェクトを実行する前に npm コンパイル コマンドを実行することによって、TypeScript コードが JavaScript にコンパイルされるためです:

ollama serve

また、拡張機能が実行するコマンドがコマンド プロパティでどのように宣言されているかにも注目してください。

ollama pull phi3.5

現時点では、ID commentgenerator.helloWorld を持つ Hello World という名前で宣言されているコマンドは 1 つだけです。これは、スキャフォールドされたプロジェクトに付属するデフォルトのコマンドです。

次に、src ディレクトリに移動し、extension.ts ファイルを開きます。

ollama list

extension.ts ファイルは、VS Code 拡張機能のエントリ ポイントです。このファイル内のコードは、最初に vscode モジュールをインポートし、activate と deactivate という名前の 2 つの関数を宣言します。

拡張機能がアクティブ化されると、activate 関数が呼び出されます。この関数はメッセージをログに記録し、package.json ファイルで定義されている Hello World コマンドを登録します。このコマンドが実行されるたびに、「Hello World」メッセージを示す通知ウィンドウが表示されます。

deactivate 関数は、拡張機能が非アクティブ化されたとき (たとえば、VS Code が閉じられたとき) に呼び出されます。クリーンアップが必要ないため、現在は空ですが、リソースを解放するために使用できます。

エディタ内で src/extension.ts を開いて F5 キーを押すか、コマンド [デバッグ] を実行します。コマンド パレットからデバッグを開始します (Ctrl Shift P)。これにより、新しい Extension Development Host ウィンドウで拡張機能がコンパイルされ、実行されます。

新しいウィンドウのコマンド パレット (Ctrl Shift P) から Hello World コマンドを実行します。

エディターで src/extension.ts に移動し、F5 キーを押すか、コマンド パレット (Ctrl Shift P) の [デバッグ: デバッグの開始] オプションを使用します。このアクションにより、拡張機能がコンパイルされ、別の拡張機能開発ホスト ウィンドウで起動されます。

この新しいウィンドウでコマンド パレット (Ctrl Shift P) を開き、Hello World コマンドを実行します。

プロジェクトの変更を継続的に監視し、自動的にコンパイルするには、ターミナルに戻って次のコマンドを実行します。

curl -fsSL https://ollama.com/install.sh | sh

これにより、TypeScript コンパイラーが監視モードで開始され、変更を加えるたびにプロジェクトが再コンパイルされるようになります。

コメント生成コマンドの登録

このセクションでは、デフォルトの Hello World コマンドを Generate Comment という名前のコマンドに置き換えます。このコマンドは、ご想像のとおり、ユーザーがコメントを生成したいときにトリガーされます。コマンドを定義し、それが拡張機能内に適切に登録されていることを確認します。

package.json ファイルを開き、以下に示すように Hello World コマンドを置き換えます。

ollama serve

extension.ts という名前のファイルを開き、activate 関数内のコードを次のものに置き換えます。

ollama pull phi3.5

このコードは、Hello コマンドを、ID commentgenerator.generateComment の Generate Comment コマンドに置き換えます。 [コメントの生成] コマンドもトリガーされると情報メッセージを表示します。

その後、コマンドは context.subscriptions 配列にプッシュされ、拡張機能が非アクティブ化されたとき、または不要になったときにコマンドが適切に破棄されるようにします。

F5 キーを押すか、コマンド パレットから [デバッグ: デバッグの開始] コマンドを実行します (Ctrl Shift P)。これにより、新しい Extension Development Host ウィンドウで拡張機能が実行されます。

新しいウィンドウのコマンド パレット (Ctrl Shift P) から [コメントの生成] コマンドを実行します。

プロンプトの構築

このセクションでは、Ollama サーバーに送信されるプロンプトを作成します。プロンプトには、コード ブロックとそのコンテキスト、および LLM の指示が含まれます。このステップは、提供されたコードに基づいて意味のあるコメントを生成するように LLM をガイドするために重要です。

特定のコード ブロックのコメントを生成するには、ユーザーはまずブロックをクリップボードにコピーし、コメントを表示する行にカーソルを置き、[コメントの生成] コマンドをトリガーする必要があります。そのブロックを含むファイルのコード全体が、プロンプトのコンテキストとして機能します。

src ディレクトリにpromptBuilder.ts という名前のファイルを作成し、次のコードをそれに追加します。

ollama list

このコードは、getScriptContext、getCodeBlock、getCodeBlock の 3 つの関数を定義します。

• getScriptContext は、現在のテキスト エディタを引数として受け取り、現在フォーカスされているファイルのテキスト全体を返し、関連するコード コンテキストを提供します
• getCodeBlock はクリップボードからテキストを読み取り、コード ブロックとして返します
• selectCommentSyntax は、現在のテキスト エディタを引数として受け取り、ファイル拡張子に適切なコメント構文を返します。この関数では、JavaScript と Python のコメント構文のみを処理できることに注意してください。より多くの言語を処理するには、関数を変更する必要があります

ここで、コード コンテキスト、コード ブロック、コメント構文を使用してプロンプトを作成しましょう。次のコードをプロンプトビルダー.ts ファイルに追加します:

curl -fsSL https://ollama.com/install.sh | sh

このコードは、現在のテキスト エディターを引数として受け取り、プロンプト文字列を返す buildPrompt という名前の関数を定義します。

まず、以前に定義された関数を使用して、コード ブロック、コード コンテキスト、およびコメント構文を取得します。次に、テンプレート リテラルを使用してプロンプト文字列を構築し、プレースホルダーを実際の値に置き換えます。

プロンプト文字列は、スクリプト内のコード ブロックの目的と機能を説明する簡潔で洞察力に富んだコメントを簡潔に保ち (最大 2 行)、正しいコメント構文で囲むように LLM に指示します。 LLM は、提供されたブロックのみに焦点を当て、コメントが関連性があり正確であることを確認するように指示されています。

ここで、buildPrompt 関数を使用するように extension.ts ファイルを更新しましょう。 extension.ts ファイルのインポート ブロックに移動し、buildPrompt 関数をインポートします:

ollama serve

次に、次のコードでgenerateCommentCommandを更新します。

ollama pull phi3.5

このコードは、generateCommentCommand を更新して、アクティブなテキスト エディターを取得し、buildPrompt 関数を使用してプロンプトを構築します。次に、プロンプトをログに記録し、プロンプトを生成できない場合はエラー メッセージを表示します。

F5 キーを押すか、コマンド パレットから [デバッグ: デバッグの開始] コマンドを実行します (Ctrl Shift P)。これにより、新しい Extension Development Host ウィンドウで拡張機能が実行されます。

新しいウィンドウのコマンド パレット (Ctrl Shift P) から [コメントの生成] コマンドを実行します。

拡張コードが表示されている元のウィンドウに戻り、統合ターミナルを開き、デバッグ コンソール をクリックして、生成されたプロンプトを探します:

Ollama.js を使用してコメントを生成する

このセクションでは、Ollama.js ライブラリを使用してプロンプトからコメントを生成します。 Ollama サーバーとの通信、サーバーへのプロンプトの送信、LLM との対話、生成されたコメントの受信に必要な関数をセットアップします。

src ディレクトリに ollama.ts という名前のファイルを作成し、次のコードを追加します。

curl -fsSL https://ollama.com/install.sh | sh

このコードは、ollama モジュールから Ollama クラスをインポートし、クロスフェッチ モジュールからフェッチ関数をインポートします。次に、指定されたホストとフェッチ関数を使用して Ollama クラスの新しいインスタンスを作成します。

ここでは、クロスフェッチ モジュールを使用して Ollama インスタンスを作成し、LLM が応答を生成するのに時間がかかりすぎるときに Ollama サーバーがスローする可能性のあるタイムアウト エラーを回避しています。

ここで、generateComment 関数を定義しましょう。この関数はプロンプトを引数として受け取り、生成されたコメントを返します。次のコードを ollam.ts ファイルに追加します:

ollama serve

このコードは、プロンプトを引数として受け取り、生成されたコメントを返すgenerateComment関数を定義します。

最初に、performance.now 関数を使用して開始時刻を記録します。次に、ollama インスタンスの生成メソッドを使用してリクエストを Ollama サーバーに送信し、モデル名とプロンプトとして phi3.5 を渡します。

次に、終了時刻を記録し、LLM が応答を生成するのにかかった時間を記録します。

最後に、生成されたコメントを応答に格納して返します。

ここで、generateComment 関数を使用するように extension.ts ファイルを更新しましょう。まず、extension.ts ファイルの import ブロックに移動し、generateComment 関数をインポートします。

ollama pull phi3.5

次に、generateCommentCommand 内のコードを更新します。

ollama list

このコードは、generateCommentCommand を更新し、generateComment 関数を使用してコメントを生成します。次に、生成されたコメントをログに記録し、コメントを生成できない場合はエラー メッセージを表示します。

F5 キーを押すか、コマンド パレットから [デバッグ: デバッグの開始] コマンドを実行します (Ctrl Shift P)。これにより、新しい Extension Development Host ウィンドウで拡張機能がコンパイルされ、実行されます。

コメントを生成するファイルを開き、目的のコード ブロックに移動してコピーし、コメントを追加する行にカーソルを置きます。次に、新しいウィンドウのコマンド パレット (Ctrl Shift P) から [コメントの生成] コマンドを実行します。

拡張コードが表示されている元のウィンドウに戻り、統合ターミナルを開き、デバッグ コンソール をクリックして、生成されたコメントを探します:

LLM が応答を生成するまでにかかる時間は、ハードウェアによって異なる場合があることに注意してください。

スクリプトにコメントを追加する

このセクションでは、生成されたコメントを、ユーザーが「コメントの生成」コマンドを呼び出したスクリプトの行に追加します。この手順には、コード内の適切な場所にコメントを挿入するようにエディターを管理することが含まれます。

src ディレクトリに、manageEditor.ts という名前のファイルを作成し、次のコードを追加します。

curl -fsSL https://ollama.com/install.sh | sh

このコードは、まず Visual Studio Code API 全体を現在のモジュールにインポートし、次に getCurrentLine と addCommentToFile という名前の 2 つの関数を定義します。

getCurrentLine 関数は、現在のテキスト エディタを引数として受け取り、現在の行番号を返します。

addCommentToFile 関数は、ファイル URI、ファイル名、行番号、生成されたコメントを引数として受け取り、ファイルの指定された行にコメントを追加します。まず、新しい WorkspaceEdit オブジェクトを作成し、指定された位置にコメントを挿入します。次に、編集を適用し、情報メッセージを表示します。

ここで、addCommentToFile 関数を使用するように extension.ts ファイルを更新しましょう。

extension.ts ファイルのインポート ブロックに移動し、getCurrentLine 関数と addCommentToFile 関数をインポートします。

ollama serve

次に、generateCommentCommand 内のコードを更新します。

ollama pull phi3.5

このコードは、getCurrentLine 関数を使用してファイル URI、ファイル名、および現在の行番号を取得するために、generateCommentCommand を更新します。次に、addCommentToFile 関数を使用して、ファイルの現在行にコメントを追加します。

F5 キーを押すか、コマンド パレットから [デバッグ: デバッグの開始] コマンドを実行します (Ctrl Shift P)。これにより、新しい Extension Development Host ウィンドウで拡張機能が実行されます。

コメントを生成するファイルを開き、目的のコード ブロックに移動してコピーし、コメントを追加する行にカーソルを置きます。

次に、コマンド パレットから [コメントの生成] コマンドを実行します (Ctrl Shift P)。数秒後 (ハードウェアによっては数分後)、指定した行にコメントが配置されます (Alt Z を押すこともできます)。コメント行が長すぎる場合は折り返す):

結論

ソフトウェア開発の世界では、コード コメントの生成などのコーディング タスクを支援するために AI を使用することについての議論が盛んです。

このチュートリアルでは、Ollama.js ライブラリとローカル LLM を使用してコードのコメントを自動化する VS Code 拡張機能の構築について説明しました。データ プライバシーを侵害したり、有料サブスクリプションを要求したりすることなく、一部の AI コーディング ツールがどのようにドキュメント プロセスを合理化できるかを実証しました。

---

LogRocket の最新のエラー追跡を数分でセットアップできます。

1. https://logrocket.com/signup/ にアクセスしてアプリ ID を取得します。
2. NPM またはスクリプト タグを介して LogRocket をインストールします。 LogRocket.init() はサーバー側ではなくクライアント側で呼び出す必要があります。

NPM:

ollama list

スクリプトタグ:

NAME                 ID                  SIZE          MODIFIED     
phi3.5:latest        61819fb370a3        2.2 GB        11 days ago         
llava:latest         8dd30f6b0cb1        4.7 GB        2 weeks ago         
phi3:latest          64c1188f2485        2.4 GB        3 months ago        
csfm1993:~$ 

3.(オプション) スタックとより深く統合するためにプラグインをインストールします:

• Redux ミドルウェア
• ngrx ミドルウェア
• Vuex プラグイン

今すぐ始めましょう

以上がVS Code と Ollama を使用してコードのコメントを自動化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。