React + Typescript + VSCodeな環境が重くなる問題の解決

環境

項目	値
OS	MacOSX Mojave
VSCode	1.38.1

内容

タイトルの環境で大規模なReactプロジェクトの開発をしている際、なんだか開発環境がとても重くなってしまいました。
アクティビティモニタでCPU使用率を確認すると、VS CodeのCode Helperの使用率が爆発がりしていました。
VS CodeのビルトインextensionのTypescriptによって、型チェック等が走るのですが、どうやらそれが重いらしい。

解決法

settings.jsonを開いて、VS Codeの監視対象を適切に除外してやれば良いことがわかりました。

例えば、私の場合は以下のファイルが監視する必要の無いファイルでしたので、これらを監視対象から除外することで、かなりの速度改善ができました。

• relay-compilerの成果物(__generated__ディレクトリ)
• 手元でのリリースビルドの成果物(buildディレクトリ)
• テスト結果(coverageディレクトリ)

.vscode/settings.jsonを編集することで監視対象から特定のディレクトリやファイルを除外できます。

.vscode/settings.json

{
  ...
  "files.watcherExclude": {
    "**/__generated__/**": true,
    "**/build/**": true,
    "**/coverage/**": true
  },
}

ちなみに、以下のファイルはデフォルトで除外されています。

• **/.git/objects/**
• **/.git/subtree-cache/**
• **/node_modules/**

追記: eslintの自動整形が不安定な場合の対処

eslintによる自動コード整形はプロジェクトが大きくなると、処理に時間がかかり、セーブしても整形されない場合があります。
その際にゾンビプロセスが残ってしまうためか、一切コード整形されなくなってしまう場合もあります。

これを回避するには、以下のようにタイムアウトを設定してみてください。

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.codeActionsOnSaveTimeout": 1500,
  "editor.formatOnSave": false,
  ...

根本的な解決策ではありませんが、タイムアウトを設定しておけば、たとえ自動整形が走らない場合があっても、古いプロセスが残り続けることはありませんので、不安定さは軽減されると思います。

最適なタイムアウトの値に関しては、https://github.com/microsoft/vscode-eslint/issues/833 で議論されている通り、プロジェクトの大きさなどによって変わるようです。

いくつかの設定を試してみて、自分のプロジェクトとマシンにあった値を探してみてください。

再追記: eslintの自動整形が不安定な問題は解決されました。

VS Code側で根本的に対処されたため(https://github.com/microsoft/vscode/issues/89745)、タイムアウトの設定は必要なくなりました。

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