プロジェクト内全てのファイルのエラーを表示させるVSCodeのtips

はじめに

最近Reactのメジャーアップグレードを結構な規模のリポジトリで行いました
それに伴って、TypeScriptや、その他過去バージョンに依存していたライブラリのメジャーバージョンアップも行ったのですが、開くファイルファイルでことごとく赤い波線が引かれていました。。。
数十ファイルくらいの規模なら一つひとつ開いて確認・修正するのでも良いのですが、そんな訳にもいかず、スマートに全て確認する術を調べてみると意外と日本語でまとまった記事がなく苦労したので共有します
ということで全てのファイルに対してのTypeScriptのエラー内容を問題（PROBLEMS）タブに表示し、左のディレクトリ構成一覧画面からもどこのファイルがアウトなのか赤文字で出るようになるようになって幸せになることが本記事のゴールとなります

環境

Visual Studio Code: 1.73.1 (Universal)
※ 以下でも説明しますが、v1.42.1以降じゃないとうまくいかないと思います
Japanese Language Pack for Visual Studio Code: 1.73.x
※ vscodeを日本語化しているので、以降の説明は全て日本語表記のものとなります

TypeScriptの静的エラーが常に問題タブに表示されるようにする

これはとても単純な手順で実現することができます。
settings.jsonに、
"typescript.tsserver.experimental.enableProjectDiagnostics": true,
の１行を追加してあげます
この機能について、1.42のリリースノートを見ても探しきれなかったので、どのバージョンから実装されたのかわからなかったのですが、このサイトを見ると1.42から追加された機能みたいです

TypeScriptのコンパイルエラーが常にターミナルに表示されるようにする

これはtasks.jsonでファイル更新時にtscでコンパイルされる（要するにwatchモードです）設定を書くことでエラーを表示させるという解決策で実現します

tasks.jsonを作成する

.vscodeフォルダ内にtasks.jsonがある場合はこの項目はスキップします

• 表示タブ＞コマンドパレット（macならcmd+shift+p）を開いて、「タスク: タスクの構成」を選択
• 「テンプレートから tasks.json を生成」を選択
• 「Others」を選択
  .vscodeフォルダにtask.jsonが生成されていることが確認できます

tasks.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "echo",
      "type": "shell",
      "command": "echo Hello"
    }
  ]
}

このtasks.json内で任意のタスクを定義することで毎度毎度同じようなコマンドを打つという作業から解放されます
生成されたjsonに始めから書かれているtasksは、「ターミナル＞タスクの実行...」を選択してlabelに書かれているタスク名を選択することで実行できます
なので今回は"label": "echo"と書かれているのでechoタスクを選択して実行します
すると、vscodeの規定のshellにてcommand(今回はecho Hello)が実行されるので、ターミナルにHelloと表示されるという流れです

ファイルを常にコンパイルするようなタスクを定義する

tasksに以下のタスクを追記してください

tasks.json

"label": "tsc watch",
"command": "./node_modules/.bin/tsc",
"type": "shell",
"args": [
  "--watch"
],
"presentation": {
  "echo": true,
  "reveal": "never",
  "focus": false,
  "panel": "shared",
},
"isBackground": true,
"problemMatcher": "$tsc-watch",
 "runOptions": {
   "runOn": "folderOpen",
 }
}

細かいオプションの解説は省略しますが、これでvscode起動時からファイル変更時にtscコンパイルが走るようになるので、ずっとエラーがわかるようになるという話です
ちなみに自分の環境(m1 mac)では、

zsh: 1 command not found: node
env: node: No such file or directory

と怒られたのですが、settings.jsonに
"terminal.integrated.profiles.osx": { "zsh": { "path": "/bin/zsh", "args": ["-l"] } }
を追加することでパスが上手に通り、実行できるようになりました
（参考リンク: https://zenn.dev/achamaro/scraps/3ea4a0268af227）
（上の記事の参照元となったissueリンク: https://github.com/microsoft/vscode/issues/143061）

補足

全ファイルの静的チェックエラーを表示すると、node_modulesのエラーも拾ってしまって大変うるさいことになるとの苦情が散見されたんですけど、自分の環境ではそんなことにならなかったのでカットしています（修正されたんですかね🤔）
もし出るようであれば、対策として、filterのところに「!**/node_modules**」を追加するとフィルタリングされるらしいのですが、PCのスペックとファイル数によってはゴリゴリに遅くなります（なりました）

さいごに

やっと全ファイルのエラーを見ることができるようになって、「問題 370」と初めて表示された時の感動とその悲しさは絶妙に感動が勝りました

参考

• この記事の内容について議論されていたissue
  • https://github.com/microsoft/vscode/issues/13953
• node_modulesフィルタリングについての議論
  • https://github.com/microsoft/vscode/issues/117732