ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた

2025年12月5日に開催された「第136回NearMe技術勉強会」の登壇資料です。

身近な生成AIサービスをローカルLLMで代替する試みとして、Ollama（Llama 3.2:1b）を利用したVSCodeのコード補完（インライン入力補完）拡張機能を作成しました。

【アジェンダ】
・VSCode拡張機能の作り方入門
・yo code ジェネレーターを使ったプロジェクト作成
・拡張機能のデバッグ方法
・ローカルLLM連携の実装
・Ollamaを用いた推論の実行
・Fill-in-the-Middle (FIM) 形式でのプロンプト設計
・カーソル前後のコンテキスト取得（Prefix/Suffix）と重複除去ロジック
・作ってみてわかったこと
・モデルの選定（Reasoningモデル vs 軽量モデル）
・前処理・後処理の重要性

【関連リンク】

ソースコード: https://github.com/asakaicode/local-llm-code-completion

Transcript

1. 0 ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた 2025-12-05 第136回NearMe技術勉強会 Kaito Asahi
2. 1 モチベーション • 第134回の勉強会ではローカルLLMをOllamaを⽤いて動かした ◦ https://speakerdeck.com/nearme_tech/rokarullm → ⾝近にある⽣成AIサービスをローカルLLMで代替できないかと考える → エンジニアは⼀度は触れたことのある⽣成AIによるコード補完を試したい （VSCode拡張機能の作り⽅も知りたかった）
3. 2 まずそもそもVSCodeの拡張機能はどう作るか？ 1. 以下のコマンドを実⾏ 2. ターミナルの指⽰に従って選択する - What type of extension do you want to create? - New Extension (TypeScript) - What's the name of your extension? - hello（何でも良い） - What's the identifier of your extension? - hello（何でも良い） - What's the description of your extension? - ⼀旦無し … npx --package yo --package generator-code -- yo code
4. 3 まずそもそもVSCodeの拡張機能はどう作るか？ 3. ⽣成された extension.ts を以下のように修正する • 拡張機能有効時に Hello World! と出⼒ import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) { console.log('Extension "hello" is now active!'); const disposable = vscode.commands.registerCommand( 'hello.helloWorld', () => { vscode.window.showInformationMessage('Hello World!'); } ); context.subscriptions.push(disposable); } export function deactivate() {}
5. 4 まずそもそもVSCodeの拡張機能はどう作るか？ 4. .vscode/launch.json を以下に変更 • preLaunchTaskを "npm: compile" に変更しないとうまく動かない ことがある。 { "version": "0.2.0", "configurations": [ { "name": "Run Extension", "type": "extensionHost", "request": "launch", "args": [ "--extensionDevelopmentPath=${workspaceFolder}" ], "outFiles": [ "${workspaceFolder}/dist/**/*.js" ], "preLaunchTask": "npm: compile" } ] }
6. 5 まずそもそもVSCodeの拡張機能はどう作るか？ 5. VSCodeでプロジェクトを開いて、”Run and Debug” を開く
7. 6 まずそもそもVSCodeの拡張機能はどう作るか？ 6. 左上にある▶ボタンでRun Extensionにしてデバッグを⾛らせる
8. 7 まずそもそもVSCodeの拡張機能はどう作るか？ 7. 別ウインドウで開いた “Extension Development Host” にてコマンドパレットから “Hello World” を実⾏
9. 8 ローカルLLMを利⽤したコード補完 • 以下から clone できます ◦ https://github.com/asakaicode/local-llm-code-completion ◦ 事前に にてモデルをプルしておいてください ollama pull llama3.2:1b
10. 9 ローカルLLMを利⽤したコード補完 • 先ほどと同様にして拡張機能を⾛らせ、別ウインドウにて試しに TypeScriptのコード を書いてみる → ゴースト表⽰部分が提案している   コード （このときにすでに導⼊している コード補完機能は⼀旦オフにして ください！！）
11. 10 ローカルLLMを利⽤したコード補完の仕組み • コードを打った後に200ms後にカーソル位置から前後20⾏を prefix, suffix として取得 https://github.com/asakaicode/local-llm-code-completion/blob/main/src/extensio n.ts#L147-L157
12. 11 ローカルLLMを利⽤したコード補完の仕組み • prefix, suffix を以下のプロンプトの⼊⼒として利⽤し、LLMに投げて結果を得る https://github.com/asakaicode/local-llm-code-completion/blob/main/src/extensio n.ts#L37-L54
13. 12 ローカルLLMを利⽤したコード補完の仕組み • LLMに投げた結果に対して、不要部分をざっと削除し、その後重複も削除 https://github.com/asakaicode/local-llm-code-completion/blob/main/src/extensio n.ts#L12-L32
14. 13 ローカルLLMを利⽤したコード補完の仕組み • トリミングされた結果をエディタ上でゴースト表⽰ https://github.com/asakaicode/local-llm-code-completion/blob/main/src/extensio n.ts#L184
15. 14 作ってて感じたこと • gpt-oss-20bなどの reasoning モデルはコード補完にはあまり向いていない？ ◦ 処理に時間がかかる ◦ llama3.2:1b でも⼗分に機能する ◦ それこそ、Antigravity などのような計画して Agent モードのようにやらせるなら ば gpt-oss-20b はアリ？ • 前処理と後処理がちょっと⾯倒 ◦ LLMに投げた結果をそのまま返すのではなく、使いやすくするには別途トリミング をしないといけない • VSCode拡張機能は簡単に作れる
16. 15 Thank you