Closed3

Vite + ChakraUI の環境構築

RyosukeRyosuke

Chakra UI

https://www.chakra-ui.com/docs/get-started/frameworks/vite

インストール

npm i @chakra-ui/react @emotion/react

スニペットの追加

npx @chakra-ui/cli snippet add

Provider のみ

npx @chakra-ui/cli snippet add provider

Provider の設定

src/main.tsx
+import { Provider } from "@/components/ui/provider"
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
+    <Provider>
      <App />
+    </Provider>
  </React.StrictMode>,
)

tsconfig の更新

paths 以外は Vite によって生成済み

tsconfig.app.ts
{
    "compilerOptions": {
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "skipLibCheck": true,
+        "paths": {
+            "@/*": ["./src/*"]
+        }
    }
}

vite-tsconfig-path の設定

npm i -D vite-tsconfig-paths
vite.config.ts
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"

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

Biome

スニペットを無視

Biome の Lint 対象から Chakra UI が生成したスニペットを除外する

biome.json
{
    "files": {
+        "ignore": ["src/components/ui/**/*"]
    },
}
このスクラップは2024/12/02にクローズされました