【実務・中級編】VS Codeの「拡張機能の負荷監視」:インストールしたプラグインがいつ、どこで重くなっているかを分析するProcess Explorer活用法 – 軽量・高機能テキストエディタ生産性向上バイブル

はじめに:あなたのVS Codeは、なぜ「じわじわ重く」なるのか?

テックリードとして多くの開発現場を見て回ると、エンジニアのPC環境で共通して見かけるアンチパターンがある。それは、「便利そうだから」という理由で無数の拡張機能(プラグイン)をインストールし、VS Codeの起動速度やタイピングの応答性を自ら悪化させているケースだ。

「最近、大容量のTypeScriptファイルを開くと数秒フリーズする」「保存時のフォーマット(Prettier / ESLint)がやけにもたつく」――そう感じた時、多くのエンジニアはPCのメモリ不足やOSの不具合を疑う。しかし、真のボトルネックは、あなたが良かれと思って導入した“あの”拡張機能のバックグラウンドプロセスにある。

VS Codeは、コアプロセス(Electron)とUIプロセス、そして各拡張機能が独立したNode.jsプロセス(Extension Host)として動作するアーキテクチャを採用している。つまり、拡張機能が暴走したり、メインスレッドをブロックする重い同期処理を走らせたりすると、エディタ全体がダイレクトに重くなる。

本記事では、ネット上の表面的な「おすすめ拡張機能まとめ」とは一線を画し、VS Codeの内部プロセスを丸裸にしてパフォーマンス低下の犯人を特定する「Process Explorer」の極意と、それを防ぐための実践的な設定管理術を、プロのアーキテクチャ視点から徹底解説する。

—

1. 犯人を特定する:VS Code Process Explorerの深層活用法

「何となく重い」という感覚でプラグインを片っ端からアンインストールするのは、プロのエンジニアのやることではない。計測し、データを根拠にボトルネックを叩くべきだ。

VS Codeには、OSのタスクマネージャーとは別に、内部の全プロセス(UI、拡張機能、ファイルウォッチャー等)のCPUとメモリ消費量をリアルタイムで可視化する専用の診断ツールが備わっている。

プロセス可視化の手順と分析ステップ

1. Process Explorerの起動

  • コマンドパレット(`Ctrl + Shift + P` または `Cmd + Shift + P`)を開き、`Developer: Open Process Explorer` を実行する。
  • ※頻繁に使うため、後述するキーボードショートカットの割り当てを強く推奨する。

2. PIDとプロセスのマッピングを読む

  • 表示されたウィンドウには、親プロセスである `code` の下に、無数の `extensionHost` や `shared-process` がぶら下がっている。
  • ここで注目すべきは、`extensionHost (ExtensionHost)` の中で稼働している個別プラグインの識別子だ。通常、`–extensionId publisher.extension-name` の形式でプロセス引数に渡されている。

3. CPUスパイクの検知

  • 特定のファイル(例: 巨大なJSONや、複雑なGenericsを使ったTypeScript)を開いた瞬間に、特定の `extensionHost` のCPU使用率が100%に張り付く現象を確認する。これが「犯人」の決定的な証拠となる。

【プロの技】起動時ボトルネックのプロファイリング(CPU Profile)

「VS Code自体の起動が遅い」場合、どの拡張機能が起動(`activate`イベント)に寄与しているかをミリ秒単位で計測できる。

コマンドパレットから `Developer: Start Extension Profiling` を実行し、起動時の挙動を再現したのち `Stop Extension Profiling` を呼ぶと、各拡張機能が初期化に要した正確なCPU時間がJSON形式で出力される。`onStartupFinished` よりも前に無駄な同期処理を行っている“行儀の悪いプラグイン”をここで一網打尽にできる。

—

2. 開発スピードを極限まで高める隠れたキーボードショートカット

パフォーマンス監視やデバッグの効率を上げるため、デフォルトのキーバインドを見直し、指の移動を最小限にする設定を導入する。キーボードから手を離さないことが、フロー状態を維持する絶対条件だ。

以下の設定を `keybindings.json` に追加し、診断・検証サイクルを爆速化せよ。

[
{
// コマンドパレットを開かずに一発でProcess Explorerを起動
“key”: “ctrl+alt+p”,
“command”: “workbench.action.openProcessExplorer”,
“when”: “editorTextFocus”
},
{
// 拡張機能の有効/無効を切り替えるビューへ瞬時にフォーカス
“key”: “ctrl+alt+e”,
“command”: “workbench.view.extensions”
},
{
// 現在のウィンドウのパフォーマンス(起動時間等)を即座に診断
“key”: “ctrl+alt+d”,
“command”: “workbench.action.diagnoseAndFixPerformanceIssues”
}
]

—

3. 【厳選】開発効率とパフォーマンスを両立する「神プラグイン」構成

「多機能」を謳う肥大化した拡張機能は、チーム全体の生産性をじわじわと蝕む。ここでは、「軽量でありながら、開発体験を劇的に引き上げる」実務直結の拡張機能だけを厳選して紹介する。

1. GitLens (eamodio.gitlens)

  • 選定理由: コードの行ごとに誰がいつ書いたかをインライン表示する機能は強力だが、巨大リポジトリでは重荷になる。Settingsで不要な機能を徹底的に削ぎ落として使うのがプロ流儀(後述の設定例を参照)。

2. Error Lens (usernamehw.errorlens)

  • 選定理由: エラーや警告をコード行の末尾にハイライト表示する。問題タブを開き直す無駄なコンテキストスイッチをゼロにし、タイピングミスをその場で潰す。

3. Todo Tree (gruntfuggly.todo-tree)

  • 選定理由: コード内の `TODO` や `FIXME` をツリー状に集約。技術的負債の放置を防ぐ。ファイルウォッチャーの負荷を抑えるため、スキャン対象を厳格に絞って運用する。

4. Project Manager (alefragnani.project-manager)

  • 選定理由: 複数リポジトリを行き来する際、ワークスペースの切り替えを瞬時に行う。VS Code自体の多重起動を防ぎ、メモリ消費を最適化する。

—

4. チーム開発で絶対共有すべき「設定の統一と軽量化」ルール

個人の環境ごとにVS Codeの設定や拡張機能がバラバラだと、「私の環境では動くのに、CIや同僚の環境では重い・バグる」という不毛なトラブルを生む。

チーム全体のパフォーマンスとコード品質を担保するため、リポジトリの `.vscode/` ディレクトリ配下に設定をコードとして管理(Infrastructure as Codeの思想)する。

必須の共有設定ファイル:`settings.json`

無駄なプロセスを走らせず、パフォーマンスを極限まで高めるプロジェクト共通の設定。

{
// — パフォーマンス最適化・負荷軽減設定 —
// 検索対象から重いディレクトリ(ビルド成果物や依存関係)を完全に除外することで、ファイルウォッチャーのCPU負荷を激減させる
“search.exclude”: {
“/node_modules”: true,
“/dist”: true,
“/build”: true,
“/.next”: true,
“/coverage”: true
},
“files.exclude”: {
“/.git”: true,
“/.svn”: true,
“/.hg”: true,
“/CVS”: true,
“/.DS_Store”: true,
“/Thumbs.db”: true
},

// 自動保存を有効化し、Ctrl+Sの打鍵ストレスとファイル保存イベントの競合を防ぐ
“files.autoSave”: “afterDelay”,
“files.autoSaveDelay”: 1000,

// — エディタ挙動・フォーマットの統一 —
// 保存時の自動フォーマットを有効化し、コードスタイルの議論を自動化で排除する
“editor.formatOnSave”: true,
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: “explicit”,
“source.organizeImports”: “explicit”
},

// 巨大ファイルを開いた際のシンタックスハイライトやパース処理によるフリーズを防ぐ上限設定(50MB超過はテキストとしてのみ開く)
“security.workspace.trust.untrustedFiles”: “open”,
“workbench.editor.largeFileWarning”: 50
}

チーム強制必須の拡張機能リスト:`extensions.json`

プロジェクトを開いた際、チームメンバーに「このプロジェクトに必要な拡張機能」のインストールを促し、逆に不要・有害なプラグインの利用を抑制する。

{
// このプロジェクトの開発において、推奨する拡張機能のリスト
“recommendations”: [
“dbaeumer.vscode-eslint”,
“esbenp.prettier-vscode”,
“usernamehw.errorlens”,
“eamodio.gitlens”,
“editorconfig.editorconfig”
],
// このプロジェクトの性質上、競合やパフォーマンス低下を引き起こすため「入れてはならない」拡張機能の指定(警告が出る)
“unwantedRecommendations”: [
“hookyqr.beautify” // 古く、メンテナンスされておらずPrettierと競合するため排除
]
}

—

5. 現場で即効性を発揮するチューニングチェックリスト

最後に、今すぐあなたのVS Code環境を軽量化し、開発速度を最大化するためのアクションプランを提示する。

1. 「使っていない拡張機能」の無効化(またはアンインストール)

  • 過去1ヶ月で一度も開いていない言語サポートやテーマ拡張機能は、即座にアンインストール、またはワークスペース単位で無効化する。

2. GitLensの負荷軽減設定

  • GitLensの「Blame(行ごとの担当者表示)」機能は強力だが、リアルタイムホバーやコードレンズ(CodeLens)はCPUを激しく消費する。重さを感じたら、以下の設定でCodeLensをオフにせよ。

“gitlens.codeLens.enabled”: false

3. ファイルウォッチャー(fs.inotify.max_user_watches)の枯渇対策(Linux環境)

  • 大規模プロジェクトでVS Codeが重くなる原因の多くは、OSのファイル監視制限に引っかかっていること。Linux環境の場合は、システム側の制限を引き上げておくこと。

—

おわりに

優れたエンジニアは、使い慣れたツールを疑うことから始める。なんとなく重い環境を我慢して使い続けることは、毎日の開発において「見えない技術的負債」を積み上げているのと同じだ。

本記事で紹介した Process Explorer によるプロファイリングと、`.vscode` による環境のコード化を実践すれば、あなたのVS Codeは見違えるほど軽快になり、思考を妨げない最高の開発環境へと生まれ変わる。今日からさっそく、プロセスの監視と設定の最適化に着手してほしい。

タイトルとURLをコピーしました