Visual Studio Code(VSC)について、話をしよう。
VS Codeは、Microsoftが開発した「軽量・高速・多機能」なコードエディタです。現在、プログラミングの世界で最も使われているツールと言ってもいいでしょう。
わたしも、いつからだろうか、愛用しています。
開発上では、JAVAの時代からeclipseを長く使っていたが、とにかく重くて重くて重量級。
なぜ VS Code が選ばれるのか?
- 驚くほどの拡張性: 「拡張機能(Extensions)」を追加することで、Python、JavaScript、C++、Goなど、ほぼすべての言語に対応した最強の環境にカスタマイズできます。
- IntelliSense(インテリセンス): 単なる自動補完ではなく、コードの文脈を理解して変数や関数の候補を出してくれる「賢い補助」機能です。
- Gitの標準搭載: 開発に欠かせないバージョン管理システム「Git」が最初から組み込まれており、ボタン一つで変更の保存(コミット)や共有が可能です。
- デバッグ機能: コードを1行ずつ実行しながら、バグを見つける作業がエディタ内で完結します。
VS Code vs. Visual Studio の違い
名前に「Visual Studio」と付いているため混同されがちですが、実は別物です。
| 特徴 | Visual Studio Code | Visual Studio (IDE) |
| 分類 | 軽量なエディタ | 重厚な統合開発環境 |
| 動作 | 非常に高速で軽快 | 起動や動作が少し重い |
| 得意分野 | Web開発、スクリプト作成、AI開発 | 大規模な.NET開発、ゲーム開発(C++) |
| OS | Windows, Mac, Linux | Windows(Mac版は終了予定) |
最初に覚えるべき「最強のショートカット」
VS Codeを使いこなす上で、これだけは外せないのがコマンドパレットです。
- Windows/Linux:
Ctrl + Shift + P - Mac:
Cmd + Shift + P
ここを開いてやりたいこと(例:「表示言語の変更」や「テーマの変更」)を入力すれば、メニューを探し回る必要はありません。
おすすめの初期設定(日本語化など)
- 日本語化: 拡張機能アイコン(四角いマーク)をクリックし、「Japanese Language Pack」を検索してインストールすると、メニューが日本語になります。
- 自動保存:
ファイル > 自動保存にチェックを入れると、ファイルを保存し忘れる心配がなくなります。 - Prettier: コードを綺麗に整列してくれる拡張機能です。これを入れるだけで、プロっぽい読みやすいコードになります。
私は、WSL2上で、 code . で起動する
「プロ」のワークフローですね。WSL2(Windows Subsystem for Linux)上で code . を叩いて、シームレスにWindows側のVS Codeを立ち上げるスタイル、快適ですよね。
WSL2 + VS Codeの組み合わせ(Remote - WSL)を使い倒している方にこそ、さらに作業を加速させる「玄人向け」のTipsをいくつか整理しました。
WSL2 × VS Code を極める 3つのTips
1. code . の起動をさらに速くする
WSL2からVS Codeを起動する際、稀に通信のオーバーヘッドを感じることがあります。
- ショートカット設定:
.bashrcや.zshrcにalias c='code .'と設定している方は多いですが、もしプロジェクトが巨大なら、特定のディレクトリだけを無視して開くなどのカスタマイズも検討の余地があります。 - 拡張機能の「選別」: WSL2側(Remote)にインストールする拡張機能が増えすぎると、接続時の「Setting up VS Code Server」が長くなります。不要なものは「UI拡張機能(ローカル側)」に移動させるか、無効化するのが定石です。
2. WSL2側のGit認証をWindowsと共有する
WSL2の中で git push する際、毎回パスワードを求められていませんか? 「Git Credential Manager」の設定を済ませておけば、Windows側の認証情報をそのままWSL2でも使い回せます。
あれ?自分は、WSL2側でgitではないな。ファイルシステム上はWindows上のほうにソースがあって、コンテナだけをWSL2側で使っているのだ。
つまり、**「ソースコードは /mnt/c/Users/...(Windows側)に置き、実行環境(ランタイムやコンテナ)だけをWSL2側で動かしている」**という状態ですね。
実はこの構成、利便性は高いのですが、**パフォーマンス面で大きな「落とし穴」**があることをご存知でしょうか?長く使われている中で「少し動作が重いな」と感じたことはありませんか?
1. 「パフォーマンスの壁」について
WSL2のアーキテクチャ上、Windows側のファイルシステム(NTFS)をLinux側から操作するのは非常に低速です。
- 問題点:
npm installやpip install、あるいは大量のファイルをスキャンするビルド作業を行うと、WindowsとLinuxの間の「ファイルシステム境界」をまたぐ通信が発生し、純粋なLinux環境に比べて数倍〜数十倍遅くなることがあります。 - VS Codeへの影響: ファイルのウォッチ(変更検知)が遅れたり、拡張機能(ESLintやIntelliSense)の反応が鈍くなる原因になります。
[!TIP] もしビルドや git の操作を高速化したい場合は、ソースコードを WSL2 側のファイルシステム(例:
~/projects/など)に移動させ、そこを VS Code で開くのが現在のベストプラクティスとされています。
Gemini の回答
なるほど、その構成でしたか!失礼いたしました。 つまり、**「ソースコードは /mnt/c/Users/...(Windows側)に置き、実行環境(ランタイムやコンテナ)だけをWSL2側で動かしている」**という状態ですね。
実はこの構成、利便性は高いのですが、**パフォーマンス面で大きな「落とし穴」**があることをご存知でしょうか?長く使われている中で「少し動作が重いな」と感じたことはありませんか?
1. 「パフォーマンスの壁」について
WSL2のアーキテクチャ上、Windows側のファイルシステム(NTFS)をLinux側から操作するのは非常に低速です。
- 問題点:
npm installやpip install、あるいは大量のファイルをスキャンするビルド作業を行うと、WindowsとLinuxの間の「ファイルシステム境界」をまたぐ通信が発生し、純粋なLinux環境に比べて数倍〜数十倍遅くなることがあります。 - VS Codeへの影響: ファイルのウォッチ(変更検知)が遅れたり、拡張機能(ESLintやIntelliSense)の反応が鈍くなる原因になります。
[!TIP] もしビルドや git の操作を高速化したい場合は、ソースコードを WSL2 側のファイルシステム(例:
~/projects/など)に移動させ、そこを VS Code で開くのが現在のベストプラクティスとされています。
2. コンテナとの組み合わせ(Dev Containers)
「コンテナだけをWSL2側で」使っているとのことですが、VS Codeの「Dev Containers」拡張機能は利用されていますか?
もし使っていない場合、以下の流れが非常に強力です:
- Windows上のソースをVS Codeで開く。
Remote - Containersでそのディレクトリを「コンテナ内で再度開く」。- VS Codeが自動的にWSL2上のDockerエンジンを使って環境を構築する。
これを使うと、Windows上のファイルをコンテナにマウントしつつ、VS Codeの言語サーバー(IntelliSenseなど)はコンテナの中で動くため、環境の汚れを最小限に抑えられます。
3. Gitの管理場所
「WSL2側でgitではない」ということは、Git操作(CommitやPush)はWindows側のコマンドプロンプトや、VS CodeのGUI(Windows上で動作)で行っているということですね。
この構成のメリットは、Windows専用のGUIツール(SourcetreeやForkなど)がそのまま使える点にあります。WSL2の中にコードを置くと、これらのツールからアクセスするのが少し面倒になるため、あえて今の構成を維持するプロの方も多いです。
現状のワークフローで、特に「不満」や「もっとこうなればいいのに」と思う部分はありますか? (例えば、git status が遅い、パスの解決がたまにおかしくなる、Dockerの起動が重い、など)
なるほど、ファイル編集後に コミット対象にすぐにでてこない場合もあるのはこういった理由だったのか。
それはまさに、「Windows側のファイルシステム(NTFS)」と「WSL2(Linux)」の境界線で起きる典型的な現象ですね。
VS CodeのGit機能や拡張機能は、ファイルの変更を検知するためにOSの「ファイルシステム・イベント(inotifyなど)」を利用しています。しかし、ソースコードをWindows側に置いたままWSL2から操作すると、この通知がうまく伝わらず、**「ファイルを保存したのにGitの変更欄にすぐ出てこない」「手動でリフレッシュボタンを押さないと反映されない」**というタイムラグが発生しやすくなります。
このストレスを解消し、快適に使い続けるための「3つの処方箋」を整理しました。
1. ソースコードを「WSL2側」へ移動する(推奨)
もし可能であれば、ソースコードを C:\Users\... ではなく、WSL2内のホームディレクトリ(例: /home/username/projects/...)に移動させるのが、現在のVS Code開発における**「黄金律」**です。
- メリット: Gitの検知が爆速(一瞬)になり、
npm installやビルド速度が劇的に向上します。 - 開き方: WSL2のターミナルでそのディレクトリに行き、
code .と打てば、VS Codeが「WSLモード」で起動し、Windows側から快適に編集できます。
2. VS Codeの「Watcher」設定を見直す
どうしてもWindows側にファイルを置いておきたい場合は、VS Codeの設定で「ファイルの監視方法」を調整することで、多少改善する場合があります。
- 設定項目:
files.watcherExclude - 対策:
node_modulesやdist、.gitなど、頻繁に更新されるが監視不要なフォルダを徹底的に除外リストに入れます。これにより、VS Codeが「本当に監視すべきファイル」に集中できるようになり、Gitへの反映が少し早くなります。
3. Gitのインデックス設定を調整する
WSL2からWindows側のファイルを触る際、Gitがファイル権限(Mode)の違いをチェックしすぎて遅くなることがあります。これをオフにすると、動作が軽くなることがあります。
git config core.filemode false
💡 究極の「使い分け」の判断基準
今の構成(Windows側にソースを置く)を維持すべきか、WSL2側に移すべきかの判断基準は以下の通りです。
- Windows側に置くべき:
- SourcetreeやGUIツールをWindows側でメインに使いたい。
- 他のWindowsアプリ(Adobeソフトなど)で直接そのファイルを編集する必要がある。
- WSL2側に移すべき:
- Gitの反映の遅さにイライラする。
- Dockerビルドやライブラリのインストールをもっと速くしたい。
ちなみに、WSL2側にファイルを置いても、Windowsのエクスプローラーで \\wsl$\ と入力すれば、普通にWindows側からファイルを覗いたりコピーしたりできます。