51 lines
1.6 KiB
Markdown
51 lines
1.6 KiB
Markdown
---
|
|
name: "Vite Configurator"
|
|
description: "Scaffolds Vite + React + TypeScript configuration (plugins, CSS handling, alias wiring).
|
|
Useful for setting up a performant Vite dev server and production build for frontend apps."
|
|
triggers:
|
|
- "setup vite"
|
|
- "generate vite.config.ts"
|
|
- "configure vite for react"
|
|
---
|
|
|
|
# Vite Configurator
|
|
|
|
Purpose
|
|
- Create or update `vite.config.ts` for React + TypeScript projects.
|
|
- Wire common plugins: `@vitejs/plugin-react`, `vite-tsconfig-paths`, PostCSS/Tailwind support, and env-based base paths.
|
|
|
|
Example prompts
|
|
- "generate vite.config.ts with tsconfig path aliases"
|
|
- "configure Vite for Tailwind and CSS modules"
|
|
|
|
Output
|
|
- A suggested `vite.config.ts` with recommended plugins and comments for options to change (base, build.target, chunking).
|
|
- Guidance to install packages: `npm i -D vite @vitejs/plugin-react vite-tsconfig-paths`
|
|
|
|
Sample Vite config (snippet)
|
|
```ts
|
|
import { defineConfig } from 'vite'
|
|
import react from '@vitejs/plugin-react'
|
|
import tsconfigPaths from 'vite-tsconfig-paths'
|
|
|
|
export default defineConfig({
|
|
plugins: [react(), tsconfigPaths()],
|
|
server: { port: 5173 },
|
|
build: {
|
|
target: 'es2018',
|
|
sourcemap: false,
|
|
},
|
|
resolve: {
|
|
alias: {
|
|
// if not using vite-tsconfig-paths, add manual aliases here
|
|
// '@': '/src'
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
Notes
|
|
- Recommend `vite-tsconfig-paths` to keep `tsconfig.json` and Vite aliases synchronized.
|
|
- If using Tailwind, ensure `postcss.config.cjs` and `tailwind.config.cjs` exist and include Vite's PostCSS pipeline.
|
|
- Provide a `preview` script (`vite preview`) for local testing of production builds.
|