はじめに

React + TypeScriptの環境構築を行って、.tsx ファイルを開いたところ、コードは間違っていないのにVSCode上で大量のエラー（赤い波線）が出続ける現象に遭遇しました。

問題

拡張子が .tsx であるにもかかわらず、JSX（HTMLタグのような記述）の部分がすべて赤字の頓珍漢なエラーが出てきました。

◾️発生していたエラーメッセージ一覧

'>' が必要です。

型が必要です。

名前 'div' が見つかりません。

未終了の正規表現リテラルです。

';' が必要です。

'erasableSyntaxOnly' が有効な場合、この構文は使用できません。

◾️エラーが出た実際のtsxファイル画面

◾️画面は正常に表示できる

VS Codeの「言語モード」が、JSXをサポートしていない通常の「TypeScript」に設定されていたことが原因でした。（エディタが<section>などのタグを「比較演算子の < 」や「正規表現の始まり」だと誤認してしまい、構文エラーを連発していました）

VS Codeが認識している「言語モード」を正しく指定し直し、ウィンドウをリロードすることで解決しました。

1.言語モードの変更

問題の起きているファイル（App.tsx など）を開いた状態で、VS Code画面の右下にあるステータスバーの言語名（おそらく TypeScript と表示されている部分）をクリックします。
出てきた入力欄に「TypeScript JSX」（または「TypeScript React」）と入力して選択してください。

2.VS Codeの再読み込み

変更を確実に反映しキャッシュをクリアするため、コマンドパレット（Mac: Cmd + Shift + P / Windows: Ctrl + Shift + P）を開きます。
Developer: Reload Window （開発者: ウィンドウの再読み込み）と入力して実行します。

「tsconfig.json のjsx 設定がおかしいのでは？」や「TypeScriptのバージョンのせいでは？」と設定を疑って沼にハマってしまいました。実際は、VsCodeエディタの「ファイルの言語モードの認識ズレ」という、盲点が原因でした。同じ現象に悩んでいる方の解決の糸口になれば幸いです。