Closed3
Vite + ChakraUI の環境構築
Vite
プロジェクトの初期化
npm create vite@latest
Chakra UI
インストール
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()],
})
Biome
スニペットを無視
Biome の Lint 対象から Chakra UI が生成したスニペットを除外する
biome.json
{
"files": {
+ "ignore": ["src/components/ui/**/*"]
},
}
このスクラップは2024/12/02にクローズされました