VSCodeでプロジェクト全体をコンパイルチェック対象にする（VSCode付属TS版）

Posted at 2024-07-31

VSCodeでプロジェクト全体をコンパイルチェックする方法です。

以前 VSCodeをエディタにしたTypeScript環境を構築するで記載した方法がありますが、今回は別の方法を紹介します。

今回はVSCode付属のTypeScriptでプロジェクト全体をコンパイルチェックする方法になります。

VSCodeはUsing newer TypeScript versionsに記載がある通り、TypeScriptを付属しています。

tsファイルをVSCodeで開くと右下に { } があり、マウスカーソルをあてるとVSCode付属のTypeScriptのバージョンが確認できます。

さらに「Select Version」にマウスカーソルをあてるとTypeScriptの配置先が確認できます。

VSCode付属のTypeScriptのおかげで明示的にTypeScriptをインストールしなくてもコンパイルチェックや入力補完が行われるというわけです。

Playwrightでテストコードを書く場合など、付属のTypeScriptを使えば十分な場合に使っています。

デフォルトだと、開いているtsファイルのみがコンパイルチェックされ、TypeScriptの恩恵を受けにくいです。

プロジェクト全体をコンパイルチェックするには、settings.jsonに以下を追記します。

"typescript.tsserver.experimental.enableProjectDiagnostics": true,

追記のしかたは以下の通りです。

加えて、tsconfig.jsonをプロジェクトフォルダ直下に配置します。内容は以下でよいです。

{
    "compilerOptions": {
    }
}

この設定はtsconfig.jsonがないと有効になりません。

以下のように開いていないtsファイルもコンパイルチェックされるようになります。

ただし、設定キーに"experimental"とある通り実験的機能です。

ファイルコピーしたときなど、コンパイルチェックがおかしくなることがあります。

その場合、VSCodeを開きなおすと、直ります。

マウスでVSCodeを開きなおすのは面倒くさいので、ショートカットキーを使うと楽です。