【VSCode】.tsxファイルにユーザースニペットが登録されない際の解決方法

使用環境

・MacOS BigSur（11.5.2）
・VScode（1.59.1）
・Node.js (16.1.1）
・React（17.0.2）
・Next.js（11.1.0）

はじめに

エンジニアなら誰しも、開発効率化のためにVS Codeのユーザースニペット（入力補完ツール）を登録したいですよね。

自分もそう思って記事を参考に手を出してみたのですが、登録したはずのスニペットがtsxファイルになぜか現れてくれません・・・涙

そこで自分が使ってるVS Codeの拡張機能が原因かもしれないといろいろ探っていましたがいい方法が見つからず。。

しばらく放置してまたやってみようと思った今日、とってもシンプルな方法を見つけたのでそれを紹介します。（前提としてスニペットの登録方法は調べておいてください。）
参考までに↓
VsCodeのスニペットのススメ

結論/解決策

もったいぶらずにやり方を説明します。

ReactとTypeScriptを使用している.tsxファイルにスニペットを適用させるには、スニペット登録ようのJSONファイル内のscopeにtypescriptreact を記述します。以上。

"scope": "javascript, typescript, typescriptreact"

例としてclassName=''をスニペットとして登録する場合の記述方法をあげておきます

{
    "className": {
        "scope": "javascript,typescript,typescriptreact", //ここに記述
        "prefix": ["cla", "class"],
        "body": ["className=''"],
        "description": "className input"
    }
}

tsxファイルは別物なのですね。おそらくjsxファイルも同様にjavascriptreactとか必要になるのかもしれません。

ちなみに設定を反映するのにVS Codeの再起動とかは必要ありません。
これで入力されることを確認してみてください。

参考資料

StackOverflow Visual Studio Code user snippets not working