2023年のViteとemotionとTypeScriptの設定のお話

よくきたな。お前がこれを見ているということは2023年からやってきた人間ということだろう。2024年以降の人間はこの記事が古い可能性があるということについて深く考える必要がある。

viteとTypeScriptのセットアップが済んでいる、という前提で話す。
結論から言うと、次の2項目だけで設定はいい。

1. emotionをインストールする
2. tsconfig.jsonに

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"

と追記する。以上。

もうちょい書きます

vite.config.jsだが、emotion関連の設定を書く必要が一切なくなった。次のようにかなりベーシックな状態となっているはずである。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

また、コンポーネントにemotionを使いたい場合、次のような記述は必要なくなった。（これはだいぶ昔の話な気がする）

/** @jsx jsx */
import {jsx} from "@emotion/react"

ただし、emotionのeslint pluginは（設定によっては？）勝手に上記のコードを挿入してしまう。

こちらのeslint pluginも不要である。消してしまって問題ない。

さいごに

この記事を書いたときの各パッケージのバージョンを付記しておきます。

package	version
react	18.2.0
vite	4.0.4
@vitejs/plugin-react	3.0.1
typescript	4.9.4
@emotion/react	11.10.5