One project had 47 betterment dependencies, seven config files, and a Markdown document explaining to the delegate how to run everything. At 2 a.m., I was debugging a difference between local checks and CI. The code was done; the tooling about it wasn't. After three weeks alongside Vite+ throughout four projects, I have a uncomplicated regulation for new Vite apps: put it in the archetypal immediate I provision the AI.
The abbreviated version
- For a new Vite app, I have the delegate create the project alongside vp create, afterward verify its activity alongside vp check, vp test, and vp build.
- Speed is nice, but the bigger win for me is one apparent workflow for the agent, me, and CI.
- For an existing project, I treat vp migrate as the commencement of a migration. I motionless assessment the diff, tests, and build behavior.
A dilatory linter wasn't the problem
My commands were dispersed throughout ESLint, Prettier, TypeScript, a test runner, and package.json scripts. When I let an delegate into the project, its archetypal job was figuring out which command was the correct one. I wrote instructions to explain that. Now I had another document to maintain. Excellent period saver, right?
It wasn't fair the figure of files. Once, my local setup and CI checked a generated document differently. The delegate saw one result; the pipeline saw another. Faster component generation doesn't fix that.
Vite+ brings mundane tasks under vp: Vite for betterment and builds, Vitest for tests, Oxlint and Oxfmt for checks, tsdown for libraries, and Vite Task for tasks. You can keep their configuration in vite.config.ts. You motionless have package.json, tsconfig, and, depending on the project, example configuration. “One document for entirely everything” would appearance fine on a banner and bad in a genuine repo.
For a React app, these are the commands I need following creating the project:
1vp create vite -- --template react-ts 2cd project-name 3vp install 4vp dev 5vp check 6vp test 7vp build
The commands complete assume vp is accessible globally. A earth instal is optional; you can additionally run Vite+ as a local dependency through a bundle manager. vp instal uses the bundle director selected for the project, so Vite+ doesn't substitute npm or pnpm.
I don't let the delegate conjecture what “done” means
The Vite+ docs contain a immediate for AI assistants. It's a helpful starting point, but I modify it to the project. My goal is concrete: the delegate should use Vite+ to set up the app and not quietly forsake it following generating the archetypal page.
Create a new React + TypeScript app on Vite using Vite+. First peruse the current `vp create` guide and run `vp assistance create`. Inspect the mark directory and do not overwrite existing files. Choose the current stable Vite+ publish and one bundle manager. Create the project alongside `vp create` using the React + TypeScript template. Keep its sole lockfile. Do not add another linter or formatter unless there is a particular reason. After setup, run `vp install`, `vp check`, and applicable tests with `vp test`, and run a manufacturing `vp build`. Add a test for the behavior you implemented. If a inspect fails, fix the logic and rerun it. In your final report, catalog the Vite+ version, commands, and genuine results.
I don't necessitate a earth instal via curl in all project. For a one-off setup, item akin npx [email protected] vp create is enough; in an established project, the delegate can run the local CLI through the selected bundle manager. I don't ban create-vite, either: vp create vite uses that template. What matters is that the delegate follows the intended setup and keeps one accordant toolchain.
When I gave an delegate liberated rein, I ended up alongside the two Prettier and Oxfmt, three lockfiles, and unreliable CI. Banning a second formatter and requiring one lockfile aren't imaginative preferences. They're two mistakes I don't desire to spotless up again.
One command gives me accelerated feedback
After changing code, I run vp check. It checks formatting and lint; it checks TypeScript whenever the two typeAware and typeCheck are enabled in the configuration. A new project created alongside vp create enables them by default. In an existing project, I verify that environment alternatively of assuming a green outcome additionally method the types are sound.
Here's the difference from my old workflow:
1# Before: it depended on all project's scripts. 2npm run format:check 3npm run lint 4npm run typecheck 5 6# Now, in a project alongside the corresponding Vite+ configuration. 7vp check
vp inspect --fix can repair several findings automatically. After that, I peruse the diff and run the inspect again. A green lint outcome motionless doesn't inform me whether the app does the correct thing. I need vp test for behavior and vp build to verify the use builds.
I additionally put that regulation in the repo's delegate instructions. When I come back to a project a week later, a new delegate won't recall yesterday's chat. The repo motionless knows its commands.
1## Checks before completing a task 2 3- After changing code, run `vp check` and fix any errors. 4- After changing behavior, run the applicable tests alongside `vp test`. 5- Before handing off a Vite app, run `vp build`. 6- Review the diff following automatic fixes. 7- Report the genuine results; don't call a unsuccessful run complete.
Local instructions and Git hooks help, but they can be bypassed or disabled. I run the identical checks in CI. On an test anywhere I let an delegate activity unattended, individual assessment before merging was motionless my responsibility.
What I measured
In a monorepo, CI went from 4 minutes to 50 seconds following I changed the workflow. A pre-commit inspect dropped from 11 seconds to under 2. Those are results from my projects, not a benchmark comparing Vite+ alongside another toolchain under identical conditions. Part of the acquire comes from what runs and which records it checks; you won't automatically get those CI times alongside a distinct configuration.
For quick checks of changed files, I use vp staged and Git hooks managed alongside vp hooks. When distinct projects behave differently, vp toolchain shows me their energetic versions. vp toolchain --global shows the earth installation. That's additional helpful for debugging than my old method: “I certainly updated it.”
There are two things to differentiate in a monorepo. vp run executes a package.json manuscript or a project defined in vite.config.ts, and it can command activity according to workspace dependencies. Caching is not enabled automatically for package.json scripts. You can allow it with, for example, vp run --cache build. Tasks defined in vite.config.ts are cached by default. I won't rotate my CI timing into a commitment that vp run solitary makes all build faster.
Where it got awkward
vp migrate ran on an older monorepo for concerning 4 minutes. It converted my ESLint, Prettier, and first tsup build setup, and nothing bankrupt in my case. That doesn't average all immigration takes four minutes. You have to difference the outcome alongside the old lint, tests, hooks, and build output. Plugins and tradition rules may motionless need manual work.
Another trap is the difference between a built-in command and a project script. vp build runs a Vite app build. vp run build runs the build manuscript from package.json or a project alongside that name. In a Next.js project, the delegate must not assume vp build replaces next build. The identical difference applies to vp dev and vp run dev. Vite+ can activity alongside another templates, but that doesn't alter what those commands do.
The third matter is type management. The earth vp env can oversee Node.js and bundle managers. I have three projects on three Node versions, and it made switching easier for me; if you don't desire that, you can rotate it off alongside vp env off. vp upgrade updates the earth CLI, not the local vite-plus bundle in all project automatically. I wrote that explicitly in my delegate instructions since the command name invites the contrary assumption.
Who gets Vite+ in my archetypal prompt
Anyone starting a new Vite app alongside AI doing the setup. The disbursal of standardizing is small here: choose one toolchain, put the inspect commands in the repo and CI, and the delegate has a apparent way from a code alter to verification. Across three weeks and four projects, the chief advantage for me was that I stopped explaining the essential commands complete and over.
I wouldn't blindly migrate a ample existing app alongside a operating build and test suite. For a example alongside its own build, I'd archetypal decide which parts of Vite+ I really desire to use. And if I already had a fine documented, fast, stable stack, the commitment of “one command” solitary wouldn't convince me to substitute it.
Next period you commencement a Vite project, put vp create in the archetypal immediate and ask for the outputs of vp check, tests, and the build as part of the definition of done. A screenshot of the completed app is nice. Passing checks inform you more.
