VSCode on ポンコツ地方エンジニアの技術ブログ

VS Code での Git Worktree の使い方

Mon, 13 Jul 2026 00:00:00 +0900

環境

Ubuntu 22.04
Visual Studio Code 1.128.0

事前準備

VS Code の設定で、git.detectWorktrees を ON にします。

ワークツリーの作成だけなら OFF の状態でもできましたが、ワークツリーを切り替えたり削除したりするには ON にする必要がありました。

ワークツリーの作成

ソース管理タブのリポジトリ横のメニューから作成できます。

ブランチの作成と、フォルダの場所を入力します。
デフォルトでは以下のようなフォルダ構成になります。

リポジトリ名
リポジトリ名.worktrees
 └── ブランチ名

ワークツリーが作成されたのが確認できます。

ワークツリーを作業ツリーで開く

作成したワークツリー横のメニューから「現在のウィンドウで作業ツリーを開く」または「新しいウィンドウで作業ツリーを開く」を選択します。

あとはいつも通り変更してコミットなどを行います。

ワークツリーの削除

ソース管理タブのリポジトリにて、ワークツリー横のメニューから作成できます。
（右クリックからでもいけます）

該当のワークツリーを作業ツリーで開いている場合は削除できませんので、その場合はメインリポジトリに切り替えてから削除する必要があります。

Ollama で Gemma4 12B を動かして VS Code から使う

Fri, 12 Jun 2026 00:00:00 +0900

環境

Ubuntu 22.04
CPU: Intel Core i7-11700
GPU: RTX 4070 12GB

Ollama のインストール

以下のページにコマンドが記載されているので、実行します。

https://ollama.com/download/linux

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

確認

$ ollama --version
ollama version is 0.30.7

Gemma4 12B のインストールと起動

以下のコマンドを実行するとモデルのダウンロードが始まり、完了後に起動します。

$ ollama run gemma4:12b

>>> が表示されて入力受付待ちになるので、何かメッセージを入力すると応答が返ってきます。
日本語でもいけました。
終了するには Ctrl + d を入力します。

尚、ダウンロードだけしたい場合は pull を使います。

$ ollama pull gemma4:12b

VS Code から使う

状態確認

Ollama はインストールすれば勝手にサービスとして登録されます。
以下のコマンドで Ollama is running と返ってくれば OK です。

$ curl http://localhost:11434
Ollama is running

ollama run を実行しておく必要もありません。

GitHub Copilot Chat から使う

📝 注記

先に結論として、GitHub Copilot Chat からは上手くいかなかったので、後述の Continue を使いました

以下に説明がありますが、ollama launch vscode を実行します。

https://docs.ollama.com/integrations/vscode

Ollama が VS Code を検出し、ローカルモデルとの連携設定を支援してくれます。
実行後、以下のような設定画面が表示されます。

$ ollama launch vscode
Select models for Visual Studio Code: Type to filter... 
 
 Recommended 
 minimax-m3:cloud 
 State-of-the-art coding & agent capabilities with multimodal reasoning and support for up to 1M context
 kimi-k2.6:cloud 
 State-of-the-art coding, long-horizon execution, and multimodal agent swarm capability 
 glm-5.1:cloud 
 Long-horizon agentic engineering with autonomous execution and sustained iteration 
 qwen3.5:cloud 
 Reasoning, coding, and agentic tool use with vision 
 nemotron-3-super:cloud 
 Reasoning, coding, and agentic tool use 
 gemma4:31b-cloud 
 Agentic workflows and multimodal reasoning 
 gemma4 
 Agentic workflows and multimodal reasoning, ~12GB, (not downloaded) 
 qwen3.6 
 Agentic software engineering model with multimodal capabilities, ~28GB, (not downloaded) 
 
 More 
 ▸ gemma4:12b 
 
 1 models selected - press tab to edit

すでにダウンロード済みの gemma4:12b を選択します。

VS Code を再起動すると、GitHub Copilot Chat のモデル選択で gemma:12b が選択できるようになっています。

レスポンスでエラー

試しに GitHub Copilot Chat から gemma4:12b にメッセージを送ると以下のエラーが返ってきました。

Sorry, your request failed. Please try again.

Client Request Id: 11cba335-5cfd-41d2-93ac-26d191e904f8

Reason: Response too long.: Error: Response too long. at _G._provideLanguageModelResponse (/usr/share/code/resources/app/extensions/copilot/dist/extension.js:1710:13790) at process.processTicksAndRejections (node:internal/process/task_queues:104:5) at async _G.provideLanguageModelResponse (/usr/share/code/resources/app/extensions/copilot/dist/extension.js:1710:14793)

GitHub Copilot Chat の Local Models 機能はまだ比較的新しく、上手くいかない等の報告も多数あるようです。

なので、GitHub Copilot Chat から使うのは諦めて、後述の continue を使いました。

Continue から使う

VS Code の拡張機能から Continue をインストールします。

インストールしたらサイドバーにアイコンが追加されるので、クリックします。
Select model から Add Chat model を選択します。

以下のように選択肢、Connect を押します。

Provider: Ollama
Model: Autodetect

すると、モデルで gemma4:12b が選択できるようになっています。

これで使えるようになります。

モデルのロード・アンロードについて

Ollama は、リクエストが来るとモデルをメモリにロードし、一定時間使われなければ自動でアンロードするそうです。
公式FAQでは、デフォルトではモデルはメモリ上に5分保持され、その後アンロードされると説明されています。

https://docs.ollama.com/faq?utm_source=chatgpt.com

VS Code で WSL 上の SSH の設定を使って Remote SSH で接続する

Wed, 03 Jun 2026 00:00:00 +0900

以下に Windows の bat ファイルを使って WSL の SSH クライアントを呼び出す方法が書いてあったので、やり方をまとめてみました。

https://github.com/microsoft/vscode-remote-release/issues/937#issuecomment-578416517

尚、上記のやり方だと Windows 側の設定が使えなくなります。私はそれで問題ありませんが、併用したいという場合の解決策は以下で提示されていました。

https://zenn.dev/kurusugawa/articles/vscode-remote-ssh-with-wsl

概要

VS Codeの「Remote - SSH」拡張機能はデフォルトでWindows側のOpenSSH（またはGit for WindowsのSSH）を使用するため、WSL（Linux）側に設定した ~/.ssh/config や鍵、ControlMasterなどの機能を利用することができません。

解決策は、「Windows側でダミーのバッチファイル（.bat）を作成し、その中からWSLの ssh コマンドを呼び出すようにVS Codeに設定する」という方法です。

設定手順

1. バッチファイル（`ssh.bat`）の作成

Windows　側の適当なフォルダ（例: C:\Users\ユーザー名\ssh.bat など）に ssh.bat という名前のファイルを作成し、以下の内容を記述します。

※バッチファイルを作成する際は、文字コード（エンコーディング）を 「ANSI」または「UTF-8」 で保存してください。（UTF-16だと正しく動作しない場合があります）

@echo off
C:\Windows\System32\wsl.exe bash -ic "ssh %*"

2. VS Code（Windows側）の `settings.json` の編集

次に、VS Codeが標準の SSH ではなく、今作成したバッチファイルを使用するように設定します。

Windows側でVS Codeを開きます。
Ctrl + , で設定を開き、画面右上の「設定(JSON)を開く」アイコンをクリックして settings.json を開きます。
以下の2つの設定項目を追加（または既存のものを修正）します。

{
 // 1で作成したバッチファイルの「絶対パス」を指定（バックスラッシュは2つ重ねる）
 "remote.SSH.path": "C:\\Users\\あなたのユーザー名\\bin\\ssh.bat",
 // ローカル（Windows）側での不要なサーバープロセスの立ち上げを抑制する
 "remote.SSH.useLocalServer": false
}

3. リモート接続を実行する

設定が完了したら、実際に接続を行います。

設定を確実に反映させるため、VS Codeを一度完全に閉じて再起動します。
左下の緑色のリモート接続アイコン（または F1 キーを押して Remote-SSH: Connect to Host…）をクリックします。
WSL（Linux）側の ~/.ssh/config に記載されているホスト名（例: oci-ubuntu）を選択します。
初回接続時のみ「接続先のOSプラットフォーム（Linux / Windows / macOS）」を聞かれるので、Linux を選択します。

Claude Code の認証情報とチャット履歴を devcontainer とホストで共有する

Wed, 13 May 2026 00:00:00 +0900

環境

Ubuntu 24.04
VSCode 1.119.0

きっかけ

devcontainer をリビルドするたびに Claude Code に再ログインするのが地味にストレスでした。さらに、ホスト側で進めていた会話の続きが devcontainer 側からは見えず、「あの修正の文脈どこに残してたっけ」となりがちでした。

ゴール構成

ホスト・devcontainer のどちらで起動しても 同じ認証情報 を使える
ホストで途中まで進めた会話を devcontainer 側でも そのまま継続 できる
リビルドしても再ログイン不要

Claude Code が何を見ているかを把握する

設定の前に、Claude Code が以下の 2 つを参照していることを押さえておきます。

種類	場所	役割
認証情報・設定	`~/.claude.json`	API キーなど
セッション履歴	`~/.claude/projects/<エンコードしたパス>/`	プロジェクトごとの会話履歴

ポイントは、セッション履歴の格納先が プロジェクトの絶対パスをスラッシュ → ハイフンに変換した名前 になっていることです。

例えばホスト側で /home/<username>/<project_name> を開いていた場合は、

~/.claude/projects/-home-<username>-<project_name>/

の下に履歴が溜まります。

つまり、履歴を共有したいなら ホストとコンテナで「ワークスペースの絶対パス」を一致させる必要がある ということです。~/.claude だけ bind mount しても、コンテナ側のワークスペースパスがホストと違えば別フォルダ扱いになり、履歴は共有されません。

設定する 2 つのマウント

必要なマウントは性質の違う 2 種類になります。

1. `.claude` / `.claude.json` のマウント (= コンテナ側ユーザーの home に合わせる)

Claude Code は そのプロセスの $HOME/.claude を読みに行きます。devcontainer のデフォルトユーザーは vscode なので、~ は /home/vscode です。したがってターゲットも /home/vscode/.claude にします。

2. ワークスペースのマウント (= ホスト側の絶対パスに合わせる)

こちらはセッション履歴のキーになる「プロジェクトの絶対パス」を一致させるのが目的なので、ターゲットを ホスト側と同じパス にします。ホストの ~/<project_name> を開いているなら、コンテナ内でも /home/<username>/<project_name> にマウントするということです。

ターゲットの基準が違う (ユーザー基準 vs ホスト基準) のがややこしい部分なので、表にしておきます。

マウント	ターゲット	基準
`~/.claude` `~/.claude.json`	`/home/vscode/.claude` `/home/vscode/.claude.json`	コンテナ内ユーザーの home
ワークスペース	`/home/<username>/<project_name>` 等	ホスト側の絶対パス

devcontainer.json の例

上記を踏まえた .devcontainer/devcontainer.json の抜粋です。

{
 "name": "my-devcontainer",
 "build": {
 "dockerfile": "Dockerfile",
 "args": {
 // ホストの $HOME を build arg として Dockerfile に渡す
 // (workspace の親ディレクトリを事前に作るために使う。後述)
 "WORKSPACE_PARENT": "${localEnv:HOME}"
 }
 },

 // ワークスペースのマウント先をホスト側の絶対パスと一致させる。
 // フォルダ名は localWorkspaceFolderBasename で動的解決するので、
 // ホスト側を rename しても devcontainer.json の編集は不要。
 "workspaceMount": "source=${localWorkspaceFolder},target=${localEnv:HOME}/${localWorkspaceFolderBasename},type=bind,consistency=cached",
 "workspaceFolder": "${localEnv:HOME}/${localWorkspaceFolderBasename}",

 "mounts": [
 // .claude / .claude.json はコンテナ内ユーザー (vscode) の home にマウント
 "source=${localEnv:HOME}/.claude,target=/home/vscode/.claude,type=bind,consistency=cached",
 "source=${localEnv:HOME}/.claude.json,target=/home/vscode/.claude.json,type=bind,consistency=cached"
 ],

 "remoteUser": "vscode"
}

${localEnv:HOME} は ホスト側 の $HOME (例: /home/<username>)、${localWorkspaceFolderBasename} は VSCode が開いているフォルダ名 (例: <project_name>) に展開されます。両者を組み合わせることで、ホストで開いているパスと完全に同じ絶対パスをコンテナ内に作れます。

Dockerfile 側で親ディレクトリを用意しておく

workspaceFolder に指定したパスの 親ディレクトリ がコンテナ内に存在しないと、Dev Containers の起動チェックで「ワークスペースが存在しません」とエラーになります。bind mount はマウント時にターゲットを作ってくれますが、Dev Containers のチェックがそれより先に走るためです。

そこで Dockerfile 側で親ディレクトリだけ先に作っておきます。

FROM mcr.microsoft.com/devcontainers/base:bookworm

# devcontainer.json の workspaceFolder (= ホストの $HOME/<フォルダ名>) と
# 同じ絶対パスをコンテナ内に用意しておく。
ARG WORKSPACE_PARENT=/home/vscode
RUN mkdir -p "${WORKSPACE_PARENT}"

ARG のデフォルト値を /home/vscode にしておけば、build arg を渡し忘れても既存ユーザーのホームが使われるだけで build が壊れることはありません。

ユーザーは vscode のままでよい

「ワークスペースが /home/<username>/<project_name> なのに whoami すると vscode になっている」というアンバランスさが気になるかもしれませんが、機能上は問題ありません。

devcontainers/base の vscode ユーザーは UID 1000
ホスト側の Linux ユーザーも通常 UID 1000

UID が一致していれば bind mount したファイルにそのまま読み書きできるためです。vscode ユーザーが自分の home (/home/vscode/) 以外の場所で作業すること自体は何も問題を起こしません。

ユーザー名まで揃えようとすると base image の改造が必要になり、devcontainer features が前提にしている vscode ユーザーが消えて壊れがちです。ホストと揃えるのは「絶対パス」だけで十分 と割り切るのが楽です。

注意点

ホスト側に ~/.claude と ~/.claude.json が存在している必要があります。なければ bind mount に失敗します。ホスト側でも一度 Claude Code を起動して認証を済ませておくのが手っ取り早いです。
セッション履歴を ホストと同時に書き込まない よう注意してください。両方から同じプロジェクトを同時に触ると、ファイルロック等の衝突で履歴が壊れることがあります。基本「どちらか一方で作業する」運用が安全です。
設定変更後は VSCode の Dev Containers: Rebuild Container でリビルドしないと反映されません。

まとめ

Claude Code のセッション履歴は プロジェクトの絶対パスをキー にして格納される。
なので「ホストとセッション共有したい」ならコンテナ内のワークスペースパスをホスト側と完全一致させる必要がある。
マウント先は 2 系統で基準が違う:
- .claude / .claude.json は コンテナ内ユーザーの home に合わせる
- ワークスペースは ホスト側の絶対パス に合わせる
ワークスペースの親ディレクトリは Dockerfile 側で mkdir -p しておく必要がある。
フォルダ名は ${localWorkspaceFolderBasename} で動的解決すれば、rename にも追従する。

[VSCode] Markdown Preview Enhanced で HTML 出力する際にサイドバーの目次を入れる

Thu, 20 Jul 2023 00:00:00 +0900

ずっとやり方が分からなかったのですが、英語版のマニュアルにやり方が書いてありました。

サイドバーのTOCを生成するには、VSCode の Markdown Preview Enhanced の設定でスクリプトの実行を有効にする必要があります。

https://shd101wyy.github.io/markdown-preview-enhanced/#/html?id=configuration

尚、上記の情報は現時点の日本語版のマニュアルには書いてありませんでした。

https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/html?id=%e8%a8%ad%e5%ae%9a

環境

VSCode 1.80.1
Markdown Preview Enhanced v0.6.8

スクリプトの実行を有効にする

拡張機能の設定で enableScriptExecution で検索すると設定項目が表示されるのでチェックを入れます。

尚、有効にするとセキュリティリスクがありますので、その点ご注意ください。

html の出力

あとはマークダウンのプレビュー画面で右クリックし、HTML に出力するだけでサイドバーに目次が出力されます。
尚、デフォルトではサイドバーは閉じた状態となっていました。
マークダウン内に toc: true を記述すると、サイドバーが開いた状態となりました。

以下サンプルです。

---
html:
 toc: true
---

# 見出し1

## 見出し2

### 見出し3

### 見出し3

# 見出し1

## 見出し2

参考 URL

VSCode で現在アクティブなタブの背景色を変更する

Mon, 12 Jun 2023 00:00:00 +0900

Visual Studio Code のエディタで現在アクティブなタブの背景色が、デフォルトだと他のタブとあまり変わらなくて分かりづらいので、設定で変更しました。

メニューより、ファイル > ユーザー設定 > 設定を選択します。

設定の検索より workbench.colorCustomizations と入力し、「settings.json で編集」をクリックします。

そして、以下のように tab.activeBackground を追記します。

"workbench.colorCustomizations": {
 "tab.activeBackground": "#1b77cf"
}

参考 URL

https://tekunabe.hatenablog.jp/entry/2021/05/23/134458

Markdown Preview Enhanced で HTML 出力に PNG 画像を base64 で埋め込む

Mon, 03 Oct 2022 00:00:00 +0900

VSCode でマークダウンを書くのに Markdown Preview Enhanced を使用していますが、HTML で出力する際、SVG は base64 で埋め込まれましたが、PNG はデフォルトでは埋め込まれません。

これについて、以下に説明があります。

https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/html

文書の最初に以下を記述すれば PNG が base64 で埋め込まれました。

---
html:
 embed_local_images: true
---

参考 URL

https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/html

Markdown で外部の Markdown ファイルを読み込んで表示

Thu, 24 Mar 2022 00:00:00 +0900

Markdown 自体に外部ファイルを読み込んで表示する構文はないようです。

しかし、VSCode の Markdown Preview Enhanced というプラグインでは、以下のようにして外部ファイルを読み込んでプレビュー表示することができます。

@import "hoge.md"

詳しい使い方は以下に記載されています。

https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ja-jp/file-imports.md

参考 URL

https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ja-jp/file-imports.md

VSCode の Remote-Containers を起動したときに、マウントのパスに無効な文字が含まれているというエラーが表示された

Wed, 01 Sep 2021 00:00:00 +0900

ホストのディレクトリをコンテナにマウントしたかったのですが、以下のようなエラーが表示されました。

docker: Error response from daemon: create /home/user/workspace: "/home/user/workspace" includes invalid characters for a local volume name, only "[a-zA-Z0-9][a-zA-Z0-9_.-]" are allowed. If you intended to pass a host directory, use absolute path.

devcontainer.json の mounts の設定は以下です。

"mounts": [
	"source=${localWorkspaceFolder}/workspace,target=/workspace",
],

type を省略してしまっていたのですが、type のデフォルトは volume なので、ボリュームをマウントしようとしてエラーになっていたみたいです。
以下のように type=bind を指定したら上手くいきました。

"mounts": [
	"source=${localWorkspaceFolder}/workspace,target=/workspace,type=bind",
],

参考 URL

VSCode + Remote-Containers で python の開発環境を作成する

Fri, 18 Jun 2021 00:00:00 +0900

VSCode の Remote-Containers を使い、python 開発用の docker コンテナを作成し、そのコンテナ中で python のデバッグをできるようにします。

環境

Ubuntu 20.04
Visual Studio Code 1.56.2
Remote Development 0.21.0

これらはインストールされている前提です。

設定ファイルの作成

コマンドパレットを開いて(Shift + Ctrl + p)、Remote-Container: Add Development Container Configuration Files を実行します。

Python3 を選択し、続いて Python のバージョンを選択します。
その後、Node.js をインストールするかどうか表示されますが、今回は必要ないのでチェックを外しました。

OK を押すと、以下のファイルが作成されます。

.devcontainer
├── Dockerfile
└── devcontainer.json

コンテナ起動

画面左下のマークを押し、Reopen in Container を選択するとコンテナが起動します。

拡張機能のインストール

Remote-Containers を使う場合、VSCode の拡張機能もコンテナ用に別途インストールする必要があるみたいです。

devcontainer.json の extensions に記載しておけば、コンテナ作成時に自動的に拡張機能もインストールされるようです。
今回は設定ファイル作成時に Python を選択したので、最初から下記の２つが記載されていました。

 "extensions": [
 "ms-python.python",
 "ms-python.vscode-pylance"
 ],

従って、コンテナを起動した時点で python と pylance は最初から入っているはずなのですが、何故か私の環境ではインストールされていません。

仕方がないので、手動でインストールしました。

手動でのインストール

まず、DEV CONTAINER のところの雲のアイコンをクリックします。

ローカルにインストールされている拡張機能一覧が表示されるので、コンテナ内にインストールしたい拡張機能にチェックを入れます。

インストールが完了した後は一度 VSCode を再起動したほうがよいかと思います。

デバッグを開始する

あとはローカル環境で python のデバッグを行う場合と同じです。

https://kuttsun.blogspot.com/2020/01/vscode-python.html

VSCode on ポンコツ地方エンジニアの技術ブログ

VS Code での Git Worktree の使い方

環境

事前準備

ワークツリーの作成

ワークツリーを作業ツリーで開く

ワークツリーの削除

Ollama で Gemma4 12B を動かして VS Code から使う

環境

Ollama のインストール

Gemma4 12B のインストールと起動

VS Code から使う

状態確認

GitHub Copilot Chat から使う

レスポンスでエラー

Continue から使う

モデルのロード・アンロードについて

VS Code で WSL 上の SSH の設定を使って Remote SSH で接続する

概要

設定手順

1. バッチファイル（ssh.bat）の作成

2. VS Code（Windows側）の settings.json の編集

3. リモート接続を実行する

Claude Code の認証情報とチャット履歴を devcontainer とホストで共有する

環境

きっかけ

ゴール構成

Claude Code が何を見ているかを把握する

設定する 2 つのマウント

1. .claude / .claude.json のマウント (= コンテナ側ユーザーの home に合わせる)

2. ワークスペースのマウント (= ホスト側の絶対パスに合わせる)

devcontainer.json の例

Dockerfile 側で親ディレクトリを用意しておく

ユーザーは vscode のままでよい

注意点

まとめ

[VSCode] Markdown Preview Enhanced で HTML 出力する際にサイドバーの目次を入れる

環境

スクリプトの実行を有効にする

html の出力

参考 URL

VSCode で現在アクティブなタブの背景色を変更する

参考 URL

Markdown Preview Enhanced で HTML 出力に PNG 画像を base64 で埋め込む

参考 URL

Markdown で外部の Markdown ファイルを読み込んで表示

参考 URL

VSCode の Remote-Containers を起動したときに、マウントのパスに無効な文字が含まれているというエラーが表示された

参考 URL

VSCode + Remote-Containers で python の開発環境を作成する

環境

設定ファイルの作成

コンテナ起動

拡張機能のインストール

手動でのインストール

デバッグを開始する

参考 URL

1. バッチファイル（`ssh.bat`）の作成

2. VS Code（Windows側）の `settings.json` の編集

1. `.claude` / `.claude.json` のマウント (= コンテナ側ユーザーの home に合わせる)