VScode使っていたけど、職場でWebStormを使うことになって、自宅PCのエディターも合わせることに。
そしたら初っ端から問題発生！
JSX/TSXファイル形式の際にEmmetが使えず躓いた際に無事解決できたので備忘録。
目次
解決策
WebStormでJSXやTSXファイル編集時にEmmetが使えない問題は、「div.container>」と入力してTabキーを押すことで解決できます。
<div className="container"></div>と期待通りの補完が可能になります。
発生していたこと
ファイル形式がHTMLファイルだとEmmetは正常に動作している。
でも、JSX・TSXファイル形式だと動作しない。
試したこと
ChatGPTに質問(以下GPTの回答)
WebStormの設定を開く
メニューバーから File > Settings (または Preferences on macOS) を選択します。
Emmet設定に移動
左側のメニューで、 Editor > Emmet > Emmet in JSX に移動します。
EmmetをTSXファイルで有効にする
"Enable Emmet in JSX files" にチェックが入っていることを確認してください。
TSXファイルでのEmmetの動作を確認
Settings > Editor > File Types に移動し、TypeScript JSX のファイルタイプが .tsx に関連付けられていることを確認します。
コード補完の確認
TSXファイルを開き、Emmetのショートカット（例: div>ul>li など）を入力して Tab を押すと、Emmetが動作するはずです。StackOverFlowで調査
同様の事象が起きて解決していた人がいたので、手順に従い、デフォルト設定に戻す。
まとめ
WebStormでJSX/TSX編集時にEmmetが使えない場合は、入力方法を「div.container>」のように変更してみてください。
VScodeを使用していた時より１文字入力は増えちゃいましたが、Emmetの補完機能が期待通りに動作し、生産性を向上させることができます。