wsl上でcode .でvscode開くと、ビューがずれね？

wsl上でcode .でvscode開くて、ビューがずれね？ってことこがあったので以下の方法で解決しました。

WSL上でVS Codeの表示がズレる・ボタンが押せない問題の完全解決

WSL環境で code . を実行した際、マウスカーソルの位置とクリック判定がズレたり、ボタンがうまく押せないといった現象が発生することがあります。

これは、WSL（Linux側）に直接VS Codeをインストールしてしまっていることが原因です。正しい構築手順に修正することで、この問題は100%解消します。

---

1. 発生している問題の確認

WSLのターミナルで code . を実行した際、以下のような警告メッセージが表示されていませんか？

To use Visual Studio Code with the Windows Subsystem for Linux, please install Visual Studio Code in Windows and uninstall the Linux version in WSL.

このメッセージが出ている場合、「Linux版のVS Code」が「WSLg（GUI表示機能）」を通して無理やり表示されている状態です。これが描画のズレを引き起こします。

---

2. 解決のための3ステップ

ステップ1：WSL（Linux）側のVS Codeをアンインストール

まずは不具合の原因となっているLinux版パッケージを完全に削除します。

# Ubuntu / Debian系の場合
sudo apt purge code

ステップ2：Windows側にVS Codeをインストール

ブラウザからVS Code公式サイトへ行き、Windows版のインストーラーをダウンロードしてインストールしてください。
※すでにWindows側にインストール済みの場合は、このステップは不要です。

ステップ3：Windows版VS Codeに「WSL」拡張機能を追加

1. Windows版のVS Codeを起動します。
2. 左側のアイコンメニューから 「拡張機能（Extensions）」（Ctrl+Shift+X）をクリックします。
3. 検索窓に 「WSL」 と入力し、Microsoft製の公式拡張機能をインストールします。

---

3. 正しい起動方法

設定が完了したら、WSLのターミナル（Ubuntu等）に戻り、プロジェクトディレクトリで以下のコマンドを実行します。

code .

正常に動作しているかの確認

• 見た目: 描画がスムーズになり、マウスのズレがなくなります。
• ステータスバー: VS Codeの左下隅にある青いバーに 「WSL: Ubuntu」（またはご自身のディストリビューション名）と表示されていれば、正しいリモート接続モードで動作しています。

---

4. なぜこれで治るのか？

VS Codeには 「リモート開発」 という優れた仕組みがあります。

• UI（見た目）: Windows側で担当（だからズレない）
• エンジン（中身）: WSL側で担当（だからLinuxのコマンドやファイルがそのまま使える）

この役割分担により、Windowsの快適な操作感と、WSLの強力な開発環境を両立させることができます。

---

5. もしこれでも解決しない場合

もし上記の手順を行っても表示がおかしい場合は、VS Codeの「GPUアクセラレーション」が干渉している可能性があります。

1. Ctrl + Shift + P でコマンドパレットを開く。
2. Preferences: Configure Runtime Arguments を入力して選択。
3. argv.json ファイルの中に、以下を追記して保存し、VS Codeを再起動してください。

"disable-hardware-acceleration": true