はじめに
お疲れ様です、りつです。
VSCodeでGitの差分が確認できない事象を解消したので、備忘録も兼ねて記事に残しておこうと思います。
問題
WSL2を用いてWindowsにUbuntu環境を用意し、ViteでReactとJavaScriptのプロジェクトを作成しました。
WSLターミナルのプロジェクト配下でcode .を実行すると、Windows上のVSCodeでプロジェクトを開けるのですが、ソースコードのGitの差分を確認することができませんでした。
やりたいこととしては、以下の画像のようにVSCode上でGit差分を確認できるようになることです。
なお、差分を確認するだけであればWSLターミナル上でgit diffコマンドを使う方法もあるのですが、少し視認性が悪い（と個人的に感じてしまう）ため、できればVSCode上で差分確認ができればと思いました。
環境
- ホストOS：Windows 11
- WSL バージョン: 2.3.24.0
解決方法
- プラグイン「Remote Development」をVSCodeにインストールします
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack - VSCodeを閉じます
- 再度WSLターミナルのプロジェクト配下で
code .を実行し、VSCodeでプロジェクトを開きます - 以下の画像のように、VSCodeの左メニューの「ソース管理」からGitの差分確認ができるようになればOKです
補足
「Remote Development」をVSCodeにインストールすることで、VSCodeでWSLのターミナルを起動することも可能です。
これにより、GitコマンドをVSCode上で実行することもできるようになるため便利ですね。
なお、ターミナルはVSCodeのメニューの「ターミナル」 > 「新しいターミナル」から開くことが可能です。
おわりに
原因としては単純なことでしたが、解決できてよかったです。
VSCode上でUbuntu環境のソースコードやWSLのターミナルを操作できるのはやはり便利です。
なお、「Remote Development」のプラグインが必要な件は、公式サイトにもちゃんと記載がありました。
Remote Development 拡張機能パックをインストールします。 この拡張機能パックには、Remote - SSH 拡張機能と Dev - Containers 拡張機能に加え、WSL 拡張機能が含まれています。これにより、コンテナー内、リモート マシン上、または WSL 内の任意のフォルダーを開くことができます。
お困りの方は「参考」に記載したページもご確認ください。
参考