.(js|ts)拡張子のReactファイルだとVS Codeでシンタックスハイライトや補完が効かない問題、あるいは.(jsx|tsx)で書くべきか否か

タイトルが長い。

VS CodeでReact書いてるとき、ファイル拡張子が.jsではシンタックスハイライトや補完が効かない問題がある。.jsx にするとちゃんと補完が効いてくれるようになって助かる。

でもみんながみんなVS Code使ってるわけじゃないし、GitHubみてると.jsで書いている人もいれば.jsxで書いているひともいる。

いったいどっちがいいんだ〜 ってなる。

VS Codeで`.(js|ts)`でも補完やシンタックスハイライトが効くようにする方法

ここの回答によると

{
    "files.associations": {
        "*.js": "javascriptreact"
    }
}

VS Codeのsettings.jsonのfiles.associationsの設定でjs拡張子に対してjavascriptreactにすればいいらしい！

こうすると.(js|ts)の拡張子でJSX書いても問題なく補完効いたりシンタックスハイライト効いたりしてくれるはず。

結論からいうと.jsxあるいは.tsxにしておいたほうがベター、ということに自分の中ではなった。

.jsxならJSX記述がされていることがファイルを開かなくても察せられる
- Reactのプロジェクト見てるとき.jsxならおそらくコンポーネントが記述されているはずと予想がつく
.jsのままVS CodeにJSXとして認識させるには上記のように設定の変更が必要
- デフォルトに寄せておくほうがよさそう
- VS Codeのみならず他のエディタでも同様の問題は起こりそう

という理由から、JSX書くなら拡張子は.jsx、TSで書くなら.tsxにしておいたほうがよさそう。

餅は餅屋、という単純なはなしかもしれない。