VS Code Code Helper の CPU 使用率が高い（Live Server）

VS Code で CPU 使用率が異常に高くなる

ある時から VS Code で Live Server の Go Live を使うとファンの音が大きくなり動作が遅くなるようになり、アクティビティモニタを確認すると、Code Helper の CPU 使用率が異常に高くなっていました。

Live Server は、編集したコードをリアルタイムでブラウザに反映する VS Code の拡張機能です。

以下は拡張機能 Live Server で CPU 使用率が高くなった場合の回避策と問題のある拡張機能の特定方法（拡張バイセクト機能）についての覚書です。

使用環境は以下になります。

macOS ： Ventura 13.4.1
VS Code ： 1.8.0.0

作成日：2023年7月10日

関連ページ：VS Code で Web 制作（Live Server）

Live Server で CPU 使用率が高くなる原因

結論から言うと、ワークスペース（サイト）のサイズが非常に大きい（変更を監視するファイルの数が非常に多い）とこの現象が発生するようです。

まず、現象が発生するワークスペースの settings.json に以下を記述して現象を確認します。

liveServer.settings.ignoreFiles はファイル変更の監視対象を除外する設定で、以下を記述すると全てのファイルとディレクトリを監視の対象外とします。

ワークスペースの settings.json に追記

"liveServer.settings.ignoreFiles": [
  "*",
  "**"
],

設定エディタのワークスペースタブで Live Server Config を選択して Settings: Ignore Files から settings.json を開いて編集することもできます。

上記を記述後、VS Code を再起動して「Go Live」のボタンをクリックするとファイルのプレビューは表示されますが、コードを編集してもリアルタイムにブラウザにその変更は反映されません。

この状態で CPU の使用率が高くならなければ、監視対象のファイルが多すぎることが原因の可能性があります。今回の場合、上記を追記してみたところ、CPU の使用率が高くならなかったのでワークスペースの監視対象のファイルを減らせば良さそうです。

※ 確認後は "*" と "**" を削除して代わりに除外するファイルを指定します（次項）。

参考：Code Helper Overloads CPU #26

回避策

変更を監視する必要のないディレクトリやファイル（編集することのないライブラリのファイルや依存パッケージディレクトリなど）を監視対象から除外します。

ワークスペースの settings.json を直接開いて編集するか設定エディタを使って、前述の liveServer.settings.ignoreFiles に監視対象から除外するファイルを指定します。

監視対象を少なくすることで CPU の使用率を抑えることができます。

以下は設定例です。ファイルやディレクトリの指定には glob パターンが使用できます。

例えば、以下の assets/** はサイトの直下のディレクトリ assets 以下のファイルを全て無視し、**/*.sass は全ての SASS ファイルを無視します。

ワークスペースの settings.json への指定例

{
  ・・・中略（その他の設定）・・・
  // 変更を監視する必要のないファイルを指定
  "liveServer.settings.ignoreFiles": [
    "assets/**",
    "backups/**",
    "bootstrap/**",
    "**/node_modules/**",
    "wp/wp-admin/**",
    "wp/wp-includes/**",
    ".vscode/**",
    "**/*.scss",
    "**/*.sass",
    "**/*.ts",
    ・・・以下省略・・・
  ],
  ・・・中略・・・
}

glob パターン

globパターンはワイルドカード文字を使用してファイル名やフォルダ名のパターンマッチングを表します。


ワイルドカード	説明	例
`*`	0文字以上の任意の文字列にマッチ	*.txt は、test.txt などの任意のファイル名の拡張子.txt のファイルに一致
`?`	任意の1文字にマッチ	0?.txtは、0a.txt や 07.txt などのファイルに一致
`[abc]`	カッコ内に指定されたいずれかの文字にマッチ	[abc].txt は、a.txt、b.txt および c.txt に一致
`[a-z]`	カッコ内に指定された範囲の1文字とマッチ	[a-f].txt は、a.txt や d.txt、f.txt などのファイルに一致
`**`	任意の数のパスセグメントにマッチ(何もマッチしない場合も含む)	/foo/*/ は、/foo 以下ののすべて（のディレクトリ・サブディレクトリのファイル）に一致

** はファイルパスの中で使うと0個以上のディレクトリ・サブディレクトリにマッチし、単独で使用する場合は、カレントディレクトリ以下の全てのファイル・ディレクトリにマッチします。

参考：

デフォルト値

liveServer.settings.ignoreFiles の初期値は以下になります。

デフォルトでは拡張子が .scss や .sass、.ts のファイル及び .vscode 以下のファイルの変更を監視しません。vscode-live-server/docs/settings

"liveServer.settings.ignoreFiles": [
  ".vscode/**",
  "**/*.scss",
  "**/*.sass",
  "**/*.ts"
]

files.watcherExclude

VS Code は動作を高速化するためにメモリや CPU を使うため、サイズの大きいディレクトリを開こうとするとファイル監視プロセス（Code Helper）がメモリや CPU を多く消費するようです。

ファイル監視プロセスがメモリや CPU を大量に消費するのを抑えるために、設定項目 files.watcherExclude で監視するファイルを除外することができます。

デフォルトでは files.watcherExclude には以下が設定されているので、必要に応じて除外するファイルを追加で指定することができます。

この設定でもファイルやディレクトリの指定に glob パターンが使用できます。

"files.watcherExclude": {
  "**/.git/objects/**": true,
  "**/.git/subtree-cache/**": true,
  "**/node_modules/*/**": true,
  "**/.hg/store/**": true
},

別途 liveServer.settings.ignoreFiles にも指定

files.watcherExclude で指定してあるディレクトリやファイルでも、別途 liveServer.settings.ignoreFiles に指定する必要があるようです。