【VS Code】カーソルやマウスのクリック位置がズレる問題を根本解決（Cloud Shell・Cloud Workstations対応）

はじめに

VS Code（または Google Cloud Shell Editor、Google Cloud Workstations などの Web 版 VS Code）を使用していて、以下のような現象に悩まされたことはありませんか？

• コードをクリックした際、カーソルが数文字手前や後ろにズレて配置される。
• 文字列を選択したときのハイライト領域と、実際の文字の境界が合わない。
• 日本語と英語の混在時や、記号・絵文字を入力した際にカーソル位置が狂う。

この問題の主な原因は、Monaco Editor（VS Code のエディタコア）の等幅フォント高速描画最適化（Monospace Optimizations）と、ブラウザ環境・OS側のフォントメトリクス（文字幅計算）の不一致です。

本記事では、このカーソルズレを解消する設定方法と、Google Cloud Shell および Google Cloud Workstations での具体的な適用手順を解説します。

---

原因

VS Code はパフォーマンス向上のため、デフォルトで等幅フォントに対して「文字幅がすべて均一である」という前提の高速パス描画（Fast-path rendering）を行っています。

しかし、以下の環境では文字幅の計算ズレが発生しやすくなります：

1. 全角文字（日本語など CJK）と半角英数字の混在
2. ブラウザのズーム倍率や高 DPI ディスプレイのスケーリング（125%、150% 等）
3. リモート Web IDE 環境におけるクライアントローカルフォントの計測誤差

設定項目 "editor.disableMonospaceOptimizations": true を有効にすることで、エディタが文字ごとに正確な描画位置を計算するようになり、ズレが解消されます。

---

解決策

1. 一般的な VS Code / Web IDE での設定（UI操作）

ローカルの VS Code、ブラウザ版 Web IDE のいずれでも、以下の共通手順で設定可能です：

1. コマンドパレットを開く：
   • Windows / Linux: Ctrl + Shift + P
   • macOS: Cmd + Shift + P
2. Preferences: Open User Settings (JSON) を入力して選択。
3. settings.json のルートオブジェクト内に以下を追加：

{
  "editor.disableMonospaceOptimizations": true
}

保存（Ctrl + S / Cmd + S）すると即座に反映されます。
2. Google Cloud Shell Editor での設定
Cloud Shell Editor の場合は、UI からの設定に加えて、ターミナルから直接設定ファイルを更新することも可能です。

設定ディレクトリが存在することを確認

mkdir -p ~/.codeoss/data/Machine

settings.json に設定を追加

cat << 'EOF' >> ~/.codeoss/data/Machine/settings.json
{
  "editor.disableMonospaceOptimizations": true
}
EOF

Note: 古い環境や Theia ベースのエディタをご利用の場合は、設定パスが ~/.theia/settings.json となる場合があります。UI の「Open Settings (JSON)」から開くのが確実です。

1. Google Cloud Workstations での設定
   Cloud Workstations では、Web ブラウザ接続 と ローカル VS Code (Remote - SSH) 接続 のどちらでも適用できます。

パターン A: Web ブラウザ（Code-OSS）から利用する場合
画面左上のメニューから File -> Preferences -> Settings を開く。
右上の 「Open Settings (JSON)」 アイコンをクリック。
"editor.disableMonospaceOptimizations": true を追加して保存。
ターミナルから直接設定する場合：

mkdir -p ~/.local/share/code-server/User
cat << 'EOF' > ~/.local/share/code-server/User/settings.json
{
  "editor.disableMonospaceOptimizations": true
}
EOF

パターン B: ローカル VS Code から Remote - SSH 経由で接続する場合
ローカル VS Code で Ctrl + Shift + P（macOS は Cmd + Shift + P）を押す。
Preferences: Open Remote Settings (JSON) (SSH: ...) を選択。
"editor.disableMonospaceOptimizations": true を追加して保存。

補足: 推奨フォント設定（オプション）
最適化を無効化しても一部の日本語文字でズレが生じる場合は、等幅フォントを明示的に指定することをおすすめします。

{
  "editor.disableMonospaceOptimizations": true,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Courier New', monospace"
}