VSCode 高速化: 設定10選で爆速化

正直に言いましょう。私たちは皆、経験があります。集中してコードを書いていて、その時... VSCodeが重くなる。カーソルが途切れ途切れになり、オートコンプリートはコーヒーブレイクを取り、ラップトップのファンは離陸準備をしているかのような音を立てます。それはイライラさせ、集中力を妨げ、率直に言って、生産性を著しく低下させます。

長い間、私はこれを強力で拡張性の高いエディタを使う代償として受け入れていました。ため息をつき、いくつかのタブを閉じ、奇跡を祈るばかりでした。しかし、私はこの「獣」の奥深くに飛び込み、体系的にセットアップを最適化することを決意しました。その結果は？単なる小さなスピードアップではありませんでした。私はVSCodeを、もっさりとしたリソース食いから、まるで10倍速いと感じるような、無駄のない強力なコーディングマシンへと変貌させたのです。

この道のりは、フォーラムから設定を盲目的にコピーすることだけではありませんでした。VSCodeがなぜ遅くなるのかを理解し、体系的に修正を適用することでした。

そして、開発ワークフローの最適化について話している間に、API作業でPostman、Swagger、Mockサーバーの間を行き来するのにうんざりしているなら、ぜひApidogをチェックしてみてください。

💡

Apidogは、驚くほど高速で効率的なオールインワンAPI開発プラットフォームです。APIの設計、デバッグ、モック、テストをすべて一箇所で行うことができます。これは、まるで完璧に調整されたVSCodeのように、あなたの邪魔をせず、開発に集中させてくれるツールです。

button

この記事では、私が実際に使用した正確な設定と戦略についてご紹介します。基本的な「拡張機能をいくつか無効にする」というレベルを超えて、ファイル監視、TypeScriptの最適化、そして隠れたパフォーマンスのボトルネックの核心に迫ります。あなたの開発環境を取り戻す準備をしてください。

犯人たち：なぜあなたのVSCodeはそんなに遅いのか？

修正を適用し始める前に、何と戦っているのかを理解することが重要です。車を診断するようなものだと考えてください。部品を無作為に交換し始めるわけではありません。異音の原因を知る必要があります。

私の調査を通じて、VSCodeのパフォーマンス問題を引き起こす3つの主要な犯人を特定しました。

拡張機能の過負荷: これは、間違いなく最大の犯人です。インストールするすべての拡張機能は、VSCode内で動作する小さなアプリのようなものです。行儀が良く軽量なものもありますが、中にはエディタ全体を機能不全に陥らせるリソース集約型のモンスターもいます。新しい拡張機能を追加するたびに、問題はさらに複雑になります。
ファイル監視の狂乱: VSCodeには、プロジェクトファイルの変更を常に監視する組み込みサービスがあります。これは、ライブファイルエクスプローラーの更新やサイドバーのGitステータスなどの機能を支えています。しかし、特に大規模なnode_modules、dist、buildフォルダを持つプロジェクトでは、このファイルウォッチャーが過剰に動作し、何千ものファイルを追跡しようとして途方もない量のCPUとメモリを消費することがあります。
TypeScriptと言語サーバーの負担: TypeScript/JavaScriptの世界にいる私たちにとって、言語サーバー（IntelliSense、エラーチェック、リファクタリングを提供するもの）は奇跡のような存在です。しかし、その力には代償が伴います。大規模なコードベースでは、絶え間ない型チェックと分析がパフォーマンスに大きな負担をかけることがあります。

敵がわかったところで、戦闘計画を立てましょう。これらを影響の大きい順に対処していきます。

フェーズ1：拡張機能の削除 – 最も強力なテコ

ここで最も劇的な改善が見られるでしょう。私は安易にインストールしていた40個の拡張機能を、厳選された20個に減らしました。その違いは測定可能であるだけでなく、体感できるものでした。

ステップ1：リソースを食い潰す犯人を特定する

まず、どの拡張機能が実際にあなたの作業を遅くしているのかを確認する必要があります。幸いなことに、VSCodeにはそのための素晴らしい組み込みツールがあります。

`Ctrl+Shift+P`（Macでは`Cmd+Shift+P`）でコマンドパレットを開きます。
`Developer: Show Running Extensions`と入力して実行します。

これにより、実行中のすべての拡張機能と、最も重要な「アクティベーション時間」を示すパネルが開きます。これは拡張機能が起動するまでにかかる時間です。アクティベーション時間が長い拡張機能は、起動パフォーマンスに最も大きな影響を与えることが多いです。このリストを初めて見たとき、私にとっては本当に目から鱗が落ちるような経験でした。

ステップ2：拡張機能の二分探索による外科的攻撃

*どの*拡張機能が問題を引き起こしているのかわからない場合はどうでしょう？手動で一つずつ無効にするのは面倒です。そこで、VSCodeの最もよく隠された秘密の一つ、拡張機能の二分探索（Extension Bisect）の出番です。

再びコマンドパレットを開き、`Developer: Start Extension Bisect`を実行します。

この素晴らしい機能は、二分探索アルゴリズムを使用します。拡張機能の半分を無効にし、問題がまだ存在するかどうかを尋ねます。あなたが「はい」または「いいえ」と答えると、さらに半分を無効/有効にし、わずか数ステップで犯人を迅速に絞り込みます。まるで探偵が拡張機能リストの中から悪役を体系的に見つけ出すようなものです。

ステップ3：容赦ない剪定とワークスペース管理

問題のある拡張機能や単に未使用の拡張機能を特定したら、容赦なく対処する時です。

グローバルに無効化: 全く使用しない拡張機能は、右クリックしてグローバルに無効化するだけです。
ワークスペースごとに無効化: これは画期的な機能です。ReactプロジェクトでPythonリンターをアクティブにする必要はありませんし、その逆も同様です。拡張機能を右クリックし、「無効にする（ワークスペース）」を選択します。これにより、他のプロジェクトでは有効なままですが、現在のプロジェクトでは無効になり、貴重なリソースを節約できます。

さらに、組み込みの拡張機能も忘れないでください。拡張機能ビューで`@builtin`を検索してください。使用していない言語やフレームワークのデフォルト拡張機能が見つかるかもしれません。これらを無効にすることでも、ちょっとしたパフォーマンス向上が期待できます。

拡張機能削除の成果

数字で見てみましょう。私は大規模な拡張機能削除の前後でVSCodeの起動パフォーマンスを測定しました。結果は驚くべきものでした。

パフォーマンス指標	前 (40個の拡張機能)	後 (20個の拡張機能)	改善
拡張機能登録	2104 ms	1548 ms	26%高速化
ワークベンチ準備完了	1130 ms	961 ms	15%高速化
拡張機能登録 & 拡張機能ホスト起動	780 ms	495 ms	37%高速化

私のエディタは単に起動が速くなっただけでなく、全体的により応答性が高く感じられました。この一歩は、最も投資対効果の高い行動です。

フェーズ2：ファイルシステムウォッチャーを飼いならす

拡張機能に対処した後、次に大きな成果が得られるのは、VSCodeの飽くなきファイルウォッチャーを制御することです。このサービスは不可欠ですが、プロジェクト内のすべてのファイルを監視する必要はありません。

`files.watcherExclude` パワー設定

この設定はあなたの親友です。VSCodeに対し、頻繁に変更されるものの、あなたの主要な開発作業に影響を与えないフォルダの監視にリソースを浪費するのをやめるように指示します。

以下は、私が`settings.json`に投入し、CPUとメモリ使用量に大きな違いをもたらした設定です。

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
  }
}

これが行うこと: `node_modules`内のすべての混乱、ビルド出力（`dist`、`build`）、Git内部、およびその他のキャッシュディレクトリを具体的に無視します。これらのフォルダはパッケージマネージャーやビルドツールによって更新され、あなたが直接更新するものではないため、VSCodeがそれらを監視するために疲弊する必要はありません。

ボーナスクリーンアップ：`files.exclude`と`search.exclude`

ついでに、サイドバーを整理し、検索を高速化しましょう。

`files.exclude`: エクスプローラーサイドバーからファイルやフォルダを非表示にします。これはパフォーマンスを大幅に向上させるわけではありませんが、プロジェクトツリーをはるかにきれいにします。
`search.exclude`: こちらはパフォーマンスを向上させます。VSCodeが`node_modules`やその他のビルドディレクトリ内の何千もの無関係なファイルをインデックス化して検索するのを防ぎ、検索機能を信じられないほど高速にします。

私の設定：

JSON

{
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "__pycache__": true,
    ".next": true,
    "dist": true,
    "build": true
  },
  "search.exclude": {
    "node_modules": true,
    "bower_components": true,
    ".code-search": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  }
}

フェーズ3：TypeScriptエンジンの最適化

TypeScript開発者であれば、言語サーバーは静かにリソースを消費する可能性があります。より効率的にする方法を以下に示します。

`tsconfig.json`をスーパーチャージする

まず確認すべきは、プロジェクトの`tsconfig.json`です。ここを適切に設定することで、TypeScriptコンパイラ（ひいてはVSCode）が不要な作業を避けるのに役立ちます。

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`オプションは特に重要です。これにより、`node_modules`内の宣言ファイルの型チェックがスキップされ、コンパイルと分析時間を大幅に短縮できます。

VSCode固有のTypeScript設定

次に、これらのパフォーマンス重視の設定をVSCodeの`settings.json`に追加します。

JSON

{
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,
  "typescript.tsserver.experimental.enableProjectDiagnostics": false
}

`"typescript.tsserver.log": "off"`: 内部ログの出力を停止し、ディスクI/Oを節約します。
`"typescript.disableAutomaticTypeAcquisition": true`: VSCodeが`node_modules`の型定義を自動的にダウンロードしようとするのを防ぎます。これは遅く、予測不可能なプロセスになる可能性があります。
`"typescript.tsserver.experimental.enableProjectDiagnostics": false`: 診断の負荷を軽減します。これは非常に大規模なプロジェクトで役立ちます。

最終手段：TypeScriptキャッシュのクリア

時々、TypeScript言語サーバーのキャッシュが破損したり肥大化したりすることがあります。これをクリアすることで、奇妙なパフォーマンスの問題や高いメモリ使用量を解決できます。

Windows: `C:\\Users\\<YourUsername>\\AppData\\Local\\Microsoft\\TypeScript`
macOS: `~/Library/Caches/Microsoft/TypeScript`
Linux: `~/.cache/typescript`

注意点: これは公式の手順ではないため、自己責任で行ってください。しかし、私の経験では、これらのフォルダを削除することは安全であり、しばしば「埃を払う」ような効果があり、物事をより軽快にします。

フェーズ4：ユーザーインターフェースの効率化

VSCodeのUIは機能豊富ですが、すべてのピクセルをレンダリングする必要はありません。使用しないUI要素を無効にすることで、レンダリングリソースを解放し、エディタをよりスムーズに感じさせることができます。

私が好むUIの最適化は次のとおりです。

JSON

{
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,
  "workbench.activityBar.visible": false,
  "window.menuBarVisibility": "toggle"
}

ミニマップは、大きなファイルにおいて特にリソースを消費すると感じました。これをオフにすることは即座に効果がありました。同様に、CodeLens（関数上にある参照や実装のようなアクション可能なリンク）は、計算とレンダリングにコストがかかる場合があります。

フェーズ5：自動動作の微調整

自動化は、邪魔になるまでは素晴らしいものです。

自動保存とフォーマット

積極的な自動保存とフォーマットは、入力中にマイクロラグを引き起こす可能性があります。私はこれらの設定で最適なバランスを見つけました。

JSON

{
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 1000,
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

これにより、現在のファイルから切り替えたときにのみ保存され、キー入力ごとや貼り付けごとではなく、保存時にのみフォーマットされます。これにより、私が考えたり入力したりしている間にフォーマッターが常にバックグラウンドで実行されるのを防ぎます。

Git統合

VSCodeのGit統合は便利ですが、その絶え間ないポーリングはリソースを消費する可能性があります。

JSON

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

これにより、Gitは有効なままですが、自動更新とフェッチが無効になります。必要に応じて、いつでも手動でフェッチと更新を行うことができます。デコレーション（サイドバーの色のついた線）を無効にすることでも、レンダリングのオーバーヘッドを少し節約できます。

すべてをまとめる：究極の`settings.json`

さて、すべてを統合しましょう。これが、私の10倍速いVSCode体験のバックボーンを形成する、完全で注釈付きの`settings.json`です。これは「すべてを支配する一つのコピペ」です。

JSON

{
  // ===== FILE WATCHING EXCLUSIONS (CPU & Memory Saver) =====
  "files.watcherExclude": {
    ".git/objects": true,
    ".git/subtree-cache": true,
    "node_modules/*": true,
    "dist": true,
    "build": true,
    ".vscode": true,
    "coverage": true,
    "__generated__": true
  },

  // ===== CLEAN UP EXPLORER SIDEBAR =====
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "dist": true,
    "build": true
  },

  // ===== SUPERCHARGE SEARCH PERFORMANCE =====
  "search.exclude": {
    "node_modules": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  },

  // ===== TYPESCRIPT OPTIMIZATIONS =====
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,

  // ===== UI LIGHTWEIGHT MODE =====
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,

  // ===== SMART AUTO-SAVE & FORMAT =====
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,

  // ===== EFFICIENT GIT INTEGRATION =====
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false,

  // ===== HANDLE LARGE FILES =====
  "files.maxMemoryForLargeFilesMB": 4096
}

高度な診断と最終的な考察

これらの設定をすべて適用してもまだ気になる場合は、VSCodeにはもう一つ強力なツールがあります。

コマンドパレットから`Developer: Startup Performance`を実行します。

これにより、VSCodeの起動中に何が起こっているかをミリ秒単位で詳細に把握できます。最後の、頑固なボトルネックを特定するのに最適です。

パフォーマンスへの全体的なアプローチ

VSCodeの最適化は素晴らしい一歩ですが、開発環境が遅くなる原因は多岐にわたることを忘れないでください。コードエディタを効率化したのと同じように、ワークフローの他の部分を効率化するツールを使用することも重要です。これが私がApidogをプロセスに統合した理由です。ツールが遅かったり連携していなかったりすると、APIの管理は膨大な時間の浪費になりかねません。APIの設計、デバッグ、テストのための高速なオールインワンソリューションを持つことは、高性能なコーディング環境を完璧に補完し、開発ループ全体を密接かつ効率的に保ちます。

結論として、高速なVSCodeは魔法ではありません。それは意図的なものです。私たちが使用するツールや拡張機能のトレードオフを理解し、意識的な選択をすることです。拡張機能を制御し、ファイルウォッチャーを飼いならし、TypeScriptを最適化し、UIを効率化することで、あなたは間違いなく「10倍速い」という感覚を実現できます。

さあ、何を待っているのですか？VSCodeの設定を開いて、あなた自身の最適化の旅を始めましょう。あなたのCPU（そしてあなたの正気）が感謝するでしょう。

button

犯人たち：なぜあなたのVSCodeはそんなに遅いのか？

フェーズ1：拡張機能の削除 – 最も強力なテコ

ステップ1：リソースを食い潰す犯人を特定する

ステップ2：拡張機能の二分探索による外科的攻撃

ステップ3：容赦ない剪定とワークスペース管理

拡張機能削除の成果

フェーズ2：ファイルシステムウォッチャーを飼いならす

files.watcherExclude パワー設定

ボーナスクリーンアップ：files.excludeとsearch.exclude

フェーズ3：TypeScriptエンジンの最適化

tsconfig.jsonをスーパーチャージする

VSCode固有のTypeScript設定

最終手段：TypeScriptキャッシュのクリア

フェーズ4：ユーザーインターフェースの効率化

フェーズ5：自動動作の微調整

自動保存とフォーマット

Git統合

すべてをまとめる：究極のsettings.json

高度な診断と最終的な考察

パフォーマンスへの全体的なアプローチ

`files.watcherExclude` パワー設定

ボーナスクリーンアップ：`files.exclude`と`search.exclude`

`tsconfig.json`をスーパーチャージする

すべてをまとめる：究極の`settings.json`