VSCodeが重い！メモリ使用量を1/3にする設定まとめ #TypeScript – Qiita

はてなブログ

重くなる主な原因

VSCodeが重くなる最も一般的な原因は、インストールされている拡張機能の数や質です。その他の原因として以下が挙げられます↓

  • 大規模なプロジェクトを開いていると、VSCodeが必要とするリソースが増加
  • ファイル監視プロセス（watcherService）がメモリやCPUを大量に消費
  • TypeScriptプロジェクトでの型チェックやインテリセンスの負荷

1. 拡張機能の最適化【最重要】

重い拡張機能を特定する

コマンドパレット（Ctrl + Shift + P）から「Developer: Show Running Extensions」を実行すると、各拡張機能の起動時間を確認できます。

Developer: Show Running Extensions

image.png

image.png

Activation時間が大きいほどパフォーマンスに影響を与えている可能性が高いです。

Extension Bisectで原因特定

VSCodeにはExtension Bisectという機能があり、拡張機能のオンオフを切り替えながら、2分探索の要領で原因の拡張機能を特定できます。

image.png

image.png

image.png

不要な拡張機能を無効化

コマンドパレットから「Extensions: Disable All Installed Extensions」を実行して、すべての拡張機能を一時的にオフにし、本当に必要なものだけを有効化しましょう。

ワークスペース単位で拡張機能を管理

プロジェクトによって必要な拡張機能は異なります。特定のワークスペースでのみ拡張機能を有効化することで、他のプロジェクトでのリソース消費を抑えられます。

拡張機能を右クリック > 無効化（ワークスペース）

image.png

デフォルト拡張機能の見直し

拡張機能の検索ボックスで「@builtin」を検索すると、デフォルトでインストールされている拡張機能一覧が表示されます。使わないものは無効化しましょう。

image.png

拡張機能を無効化するとどのくらい変わるのか?

当環境では40個の拡張機能がインストール済みで、もともとはそのすべてを起動していました。

これらの拡張機能では、一回使ったけど結局日常使いすることは無かったものだったり、おすすめされたからとりあえず入れてみただけの物も多くありました。

この状態でVSCodeを起動した場合のパフォーマンスは以下の通り。
(特に影響が大きい項目TOP5をピックアップし、3回のスタートアップパフォーマンスの平均値を表にしています)

順位 項目 Duration Process
1 extensions registered 2104 [renderer]
2 workbench ready 1130 [main->renderer]
3 register extensions & spawn extension host 780 [renderer]
4 renderer ready 551 [renderer]
5 overall workbench load 308 [renderer]

では次に、本当に必要な拡張機能に絞った場合のパフォーマンスを見てみます。
実際に使用している拡張機能に絞った結果、20個まで減らすことができました。

順位 項目 Duration Process
1 extensions registered 1548 [renderer]
2 workbench ready 961 [main->renderer]
3 register extensions & spawn extension host 495 [renderer]
4 renderer ready 511 [renderer]
5 overall workbench load 270 [renderer]

もともとのパフォーマンスと比べてみました↓

項目 以前の平均 最新の平均 改善量 改善率
extensions registered 2104 1548 556 26%
workbench ready 1130 961 169 15%
register extensions &
spawn extension host		 780 495 285 37%
renderer ready 551 511 40 7%
overall workbench load 308 270 38 12%

全体的なスタートアップパフォーマンスが向上しており、体感的にも、起動してからの読み込み時間が明らかに速くなっていることがわかります。

私のように、「とりあえず入れてみた」拡張機能が溜まっている人は多いと思うので、ぜひこの機会に整理してみてください。

2. ファイル監視の最適化

files.watcherExcludeの設定

VSCodeは動作を高速化するためにファイル監視プロセスがメモリやCPUを大量に消費します。監視対象から不要なディレクトリを除外しましょう。

// settings.json
{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true,
    "**/dist/**": true,
    "**/build/**": true,
    "**/.vscode/**": true,
    "**/coverage/**": true,
    "**/__generated__/**": true,
    "**/tmp/**": true,
    "**/.cache/**": true
  }
}

files.excludeの設定

サイドバーに表示しないファイルやディレクトリを指定することで、エクスプローラーの負荷を軽減できます。

{
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/__pycache__": true,
    "**/.next": true,
    "**/dist": true,
    "**/build": true
  }
}

search.excludeの設定

検索対象から除外することで、検索のパフォーマンスが向上します。

{
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/coverage": true
  }
}

3. TypeScript環境の最適化

TypeScriptの設定

excludeを適切に指定することで、エディタやビルド時の不要なファイル解析を防ぎ、パフォーマンスを向上させます。
TypeScriptではnode_modulesがデフォルトで除外対象ですが、明示的に書いても問題ありません。

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true, // 型定義ファイルのチェックをスキップ（高速化）
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build",
    "**/*.spec.ts",
    "**/*.test.ts",
    "coverage"
  ]
}

補足

  • skipLibCheck: true はパフォーマンス改善に非常に有効。
  • exclude はincludeの結果にのみ影響するため、import経由のファイルは除外されない場合があります。

VSCodeでのTypeScript軽量化設定

TypeScriptサーバーの自動ログ出力や自動型取得を無効化することで、エディタ動作を軽くできます。

// .vscode/settings.json
{
  "typescript.tsserver.log": "off", // tsserverのログ出力を停止
  "typescript.disableAutomaticTypeAcquisition": true, // 自動型取得を無効化
  "typescript.tsserver.experimental.enableProjectDiagnostics": false // 大規模プロジェクトでの診断負荷を軽減
}

効果

  • ディスクI/OやCPU負荷の軽減が期待できる。
  • 自動型取得(ATA)を無効にすることで、外部型定義の不要なダウンロードを防止。

TypeScriptキャッシュのクリア

TypeScriptの内部キャッシュを削除することで、特定環境ではメモリ使用量やファイルウォッチャー負荷が改善することがあります。

主なキャッシュフォルダ（存在しない環境もあり）

  • Windows: C:\Users\\AppData\Local\Microsoft\TypeScript
  • macOS: ~/Library/Caches/Microsoft/TypeScript
  • Linux: ~/.cache/typescript

注意

  • このフォルダを削除することは「推奨手順」ではなく、「有効な場合がある」程度の改善策。
  • 削除しても問題はほぼありませんが、公式で保証されていないため自己責任で実施。

4. エディタUIの軽量化

ミニマップを無効化

{
  "editor.minimap.enabled": false
}

パンくずリストを無効化

{
  "breadcrumbs.enabled": false
}

コードレンズを無効化

{
  "editor.codeLens": false
}

不要なUIを非表示

{
  "workbench.activityBar.visible": false,
  "window.menuBarVisibility": "toggle"
}

5. 自動保存・フォーマット設定の見直し

自動保存のタイミング調整

{
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 1000
}

フォーマッターの最適化

ESLintによる自動コード整形はプロジェクトが大きくなると処理に時間がかかり、ゾンビプロセスが残ってしまう場合があります。

{
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

6. Git統合の最適化

{
  "git.enabled": true,
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false
}

7. その他のパフォーマンス設定

ファイルサイズ制限

{
  "files.maxMemoryForLargeFilesMB": 4096
}

リモート開発の設定（WSL使用時）

WSL2 + Docker環境でVSCodeを使用中に、VmmemWSLがメモリを大量に消費する現象が発生する場合、ファイル監視が問題であることが多いです。上記のfiles.watcherExclude設定をワークスペースで適用しましょう。

8. キャッシュのクリア

定期的にキャッシュをクリアすることで、動作が軽くなることがあります。

キャッシュフォルダの場所

Windowsの場合

C:\Users\\AppData\Local\Code\Cache
C:\Users\\AppData\Local\Code\CachedData

macOSの場合

~/Library/Application Support/Code/Cache
~/Library/Application Support/Code/CachedData

注意: Userフォルダ（設定ファイル）やextensions（拡張機能）は削除しないでください。

9. 設定ファイルの完全版サンプル

以下は、メモリ使用量を削減するための総合的な設定例です↓

{
  // ファイル監視の除外
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true,
    "**/dist/**": true,
    "**/build/**": true,
    "**/.vscode/**": true,
    "**/coverage/**": true,
    "**/__generated__/**": true
  },
  
  // エクスプローラーから除外
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true
  },
  
  // 検索から除外
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/coverage": true
  },
  
  // TypeScript最適化
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,
  
  // UI軽量化
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,
  
  // 自動保存・フォーマット
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  
  // Git設定
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false,
  
  // その他
  "files.maxMemoryForLargeFilesMB": 4096
}

10. パフォーマンス診断コマンド

VSCodeのパフォーマンスを詳しく分析したい場合は、以下のコマンドを使用します。

コマンドパレット > Developer: Startup Performance

image.png

起動のどこに時間がかかったか解析してくれます。単位はミリ秒で、Durationがその項目にかかった時間です。

まとめ

この記事で紹介した設定を適用することで、VSCodeのメモリ使用量を大幅に削減できます。特に以下の3点が効果的ですね。

  1. 拡張機能の見直し：本当に必要なものだけを有効化
  2. ファイル監視の最適化：不要なディレクトリを除外
  3. TypeScript環境の最適化：tsconfig.jsonの適切な設定とキャッシュクリア

これらの設定を試しても改善しない場合は、VSCodeのクリーンインストールや、最終手段としてVSCode Insidersへの移行も検討してみてください。

定期的にキャッシュをクリアし、使わない拡張機能を削除することで、快適な開発環境を維持できます。




元の記事を確認する

Evaliteによるlocal nativeなLLM evals実行環境 - LayerX エンジニアブログ 前の記事 Google Notebook LMでCATのマニュアルと対話、爆速のCATマスターに仕立てる｜SHIFT Group 技術ブログ 次の記事

関連記事