990: Vite Is Taking Over  🔗 **Source:** [990: Vite Is Taking Over](https://share.snipd.com/episode/def13b6e-d6f9-4bca-9544-beff0f4109fd) ## Highlights - **Vite Plus Unifies The JavaScript Toolchain** - Vite Plus is a unified JavaScript toolchain aiming to consolidate bundling, linting, formatting, task running, monorepo tooling, and more into a single DX-focused experience. - The team reversed an initial paid plan and made Vite Plus open source, increasing adoption potential since many projects already use Vite. Transcript: Wes Bos Yeah. So let's describe what it is really quickly. It's a unified tool chain for JavaScript. And it essentially covers like if you have any sort of JavaScript app, whether that's client side or like full stack JavaScript, probably using V at some point, but you're probably Using a whole bunch of other tools as well. And what they're aiming to do is to unify the entire tool chain into like a single beautiful developer experience. And they had announced this, what, like, I think maybe six months ago, and they said that it was going to be a paid thing. And they've since rolled that back and said, no, V plus is going to be totally open source, totally for the community, which is really cool because like the whole entirety of JavaScript Land is, is not, not all of it, but a lot of it is built on, on Vite. Right. And it's really cool that we're going to hopefully get the same Devval experience of Vite in the rest of our tool chain. Scott Tolinski Yeah, I've always wondered how the paid aspect of that was intended to work in the first place. It always felt weird to me when it was announced as like a paid edition. I get that Void Zero needed to make money somehow. But when they first announced that, I was always like, how's that going to work? So really, really stoked to see that that's gone. Yeah. ([Time 0:01:10](https://share.snipd.com/snip/7a038aaf-a760-47ea-a23b-8ae64f7e71c9)) - **One Config File To Reduce Tooling Friction** - Vite Plus reduces configuration sprawl by moving many separate configs and opinions into one place, aiming to go from multiple config files to a single Vite config. - That consolidation relies on sensible defaults so new projects can run with minimal custom config for linting, formatting, and tasks. Transcript: CJ Reynolds Easiest way to think about this is go from six config files to one config file. And we're going to get into it. We're going to show some examples, but you might think, oh, now it's just one file with a bunch of config. The other aspect here is kind of like opinions and sensible defaults, right? Like a lot of times when you set up a basic Vita app with Vtest, you don't need to do too much config. And so if there's just some default config ready to go for you, V plus will handle that. Same thing with linting. Like I spend so much time setting up my ESLint config, getting it perfect. But if they ship with sensible defaults, you don't even need a linter config anymore. You can just use all the defaults. Same thing for formatting, task running. Like I use PNPM for all my projects because it's really good for monorepos and running tasks across multiple packages. But their task runner here is going to be able to solve that. ([Time 0:05:20](https://share.snipd.com/snip/4903bc62-f63a-4ee7-8af2-827102709581)) - **Use VP Commands To Run Checks And Fixes** - Use the VP CLI commands like VP check, VP lint, or VP check fix to run linting, formatting, and type checks consistently across projects. - VP auto-fixes formatting and integrates TypeScript checks, letting you run one unified command instead of separate tools. Transcript: Wes Bos And the new thing that they're giving you is this VP, which is V plus so you install this on your machine. What I really like about it is if you type it, and you don't know what to type, it just turns into like a little like CLI GUI, or you can pick what it is that you want, right. And in my case, I could just say like VP check or VP lint or VP check fix, and it will automatically fix them for you. And then it'll go through your entire project and give you your linting errors, your format. It won't give you your formatting errors because it will just fix them for you. And then it will also give you your type errors as well, right? ([Time 0:07:26](https://share.snipd.com/snip/4eb2f636-2fe6-48cd-9190-9fe34bc9d8d1)) - **Integrated Node Version Management** - Vite Plus includes built-in Node version management so a project can pin and enforce the Node version for contributors automatically. - The VP ENV and doctor commands let you switch versions and inspect the current Node runtime, reducing Transcript: CJ Reynolds And I think maybe it's a good time to talk about what Scott mentioned in terms of Node version management, because that's another thing included here that I thought was really great, Because you do this on every machine. You want to have maybe the LTS of node running, but you also want to have maybe the latest stuff, or maybe you have an older project and you need to be running version 18 or 20. When you set up a VitePlus project, it asks you if you want it to manage the node version, and it will pin it to a specific version. Like this is another thing that like there are tools out there for this, but now this is integrated with the project. And so when somebody clones your project down and they use VP, it's going to use the right version of Node.js and no issues with telling them to run a specific version or anything like That. Wes Bos I hate node version issues. I hate it. Yeah. And it drives me like this is huge for people who have big test suites as well, right? You, you have a library and you want to run it against seven or eight different versions of node and you have to like have something that will change it. This is simply just VP ENV and then you can switch the versions and it has like a doctor command. You can see which version you're currently on. I've been using N for the longest time. I know a lot of people use NVM. And then we also found out about FNM during the data JS survey, which is a new popular one. But this seems to be their own home cooked version of node version management. ([Time 0:10:19](https://share.snipd.com/snip/d1de7873-224c-4b06-a629-02a5f177c8ce)) - **Rust Based Type Aware Linting And Fast Formatting** - Vite Plus ships Rust-based linters and formatters (oxlint and oxformat/tsgolint) that are Prettier/ESLint compatible and significantly faster on large codebases. - Type-aware linting with tsgolint/oxlint can catch errors ESLint alone misses, like dropped promises, improving code correctness. Transcript: Scott Tolinski Yeah. Can we talk about the linter being TS GoLint? It uses TS GoLint, which is one, using TypeScript Go, so it's very fast, but it's type aware linting, and that's via Oxlant. That is an Oxlant package. So according to the readme, it's able to catch syntax only linting misses, like no floating promises that would be dropped silently in other linters. So because the linting is type aware, it can catch bug classes that like ESLint could never catch without. Wes Bos Oh, interesting. I can't say I've ever had a problem with that. Have you guys? CJ Reynolds Well, TSLint can do it, but it requires a JavaScript plugin. So it's so much slower because there is type-aware linting in ESLint. I will say, as someone trying to migrate my ESLint configs to Oxlint, this is one of the biggest pain points. If you have some older projects that are pinned to a specific TypeScript version, you can't necessarily jump to TSGO just yet. ([Time 0:12:32](https://share.snipd.com/snip/78390c55-182a-4b09-a511-90293b0183fa)) - **Migrate Carefully To Avoid Large Reformat Commits** - Use VP migrate to bring existing projects into Vite Plus and expect small formatter diffs; adjust a couple project-specific settings (like tabs vs spaces) to avoid mass reformat commits. - For large repos, review and limit automatic reformatting to avoid huge git diffs that harm history. Transcript: Wes Bos Man. So I moved the mad CSS website over and that was using Vite, TanStackStart and Biome as the formatter. And they have a VP migrate command, which will attempt to take all of your old, like prettier config, your ESL and move them over. In my case, it didn't move over biome because they don't have a biome migration, but I basically just moved it over to this. And then there was one or two little changes I put in there that were like major. I think the Serge started it. He did tabs and by default it's spaces, right? So I just threw on tabs so the whole project wouldn't get reformatted. But then the rest of it, I was just like, I don't care. You know, I just ran it once. I put in a commit and it touched on maybe two or 300 lines of like different weird formatting. ([Time 0:13:45](https://share.snipd.com/snip/50877558-fc2b-4fcf-8f48-cf40b3e19a25)) - **Put Small Tool Configs In Vite Config Sparingly** - Keep small tool configs inside vite.config only when concise; extract larger configs to dedicated files to keep them reusable and readable. - CJ suggests a simple rule: under ~5 lines inline, otherwise separate the config file. Transcript: Wes Bos I'm just thinking like, do other tools need to consume your config other than VitePlus? And I'm trying to think. I don't think so. I think like in other cases, you'd be like, yeah, well, like my test runner also needs to have my config or my CI. But like this tool seems to cover all of those use cases. It also is a like a pre-commit. So it has Husky built in, meaning that when you make a commit, it will run your lint type and formatter for you, which is really nice. So you cannot commit code that not pass, like whatever. In some cases, it adds, I just added a whole bunch of as's or whatever to my code base to make it pass. But I think that's a good thing. I don't do that a ton on my projects. Do you? Wes? Scott Tolinski You gonna back that as up? Wes Bos Yes, back my as up. Scott Tolinski Back it up on Git. Yeah. So is this only, this Husky stuff, is this only installed if you're doing their migration scripts? Wes Bos No, it's by default. So if you just like Git commit, like when you do a new project, it will then add it into your Git folder. ([Time 0:17:11](https://share.snipd.com/snip/6da5b099-02ac-4f66-96ac-d79d70d0676e)) - **Scaffolding Demo Showed Smooth Project Generation** - Wes demoed VP create to scaffold a project and showed prompts for monorepo, package manager, VS Code settings, and deployment target. - The scaffold integrated PNPM, set up agent-friendly checks, and installed VS Code recommendations automatically. Transcript: CJ Reynolds Because i thought you could choose whether or not you want hooks i will say that i am a fan of git hooks especially on open source projects i know not everyone is they like depend on ci but Scott Tolinski I i like to make sure my stuff is good before i push up to ci yeah yeah they can get annoying sometimes but i i do i do like them as well oh see vp and knit nothing right interesting come on you Wes Bos Gotta have an alias there yeah um all right so it asks you do you want a v plus mono repo an app a library tan sac start or other interesting cool so the mono repo stuff we haven't talked about That yet but like this is a huge use case for it, which is I want a monorepo with tasks and a complicated setup. So let's just go regular. Let's do Tansac start. PNPM, Yarn or NPM, obviously PNPM. It asks you which agents files you want, which is really cool. And I did find that both Cloud Code and Cursor did a fantastic job at immediately just switching over to using all VP commands, which is amazing because six months ago, could not get the Thing to use PNPM for the life of me. Scott Tolinski Yeah. CJ Reynolds Maybe honestly, it's like the VP command is different enough from NPM instead of Pnpm that it's like, oh yeah, I can do this. Wes Bos It adds a VS Code folder, which is just for some VS Code extensions. And then, do you want to set up pre-commit hooks for running formatting, linting, and type checking with autofix it? So this is when you go ahead and do that. So yes, then it goes ahead and scaffolds out your whole project. What would you like to name it? TanWes. What do we want? Deploy to Netlify. And then this is no longer the VeeP plus. This is now the... Yeah, now we're in TanStack. Yeah, I'm just going to keep hitting enter. Now we're back. There is already an agents.md file. So we'll merge it. Boom, boom, boom. Installing. ([Time 0:18:33](https://share.snipd.com/snip/c62bcecd-4881-41ea-9699-f64a695be61f)) - **Enable Pre Commit Hooks To Prevent Bad Commits** - Enable built-in pre-commit hooks when scaffolding with VP to run formatting, linting, and type checks automatically before commits. - Vite Plus adds Husky hooks by default so you can't commit code that fails configured checks unless you opt out. Transcript: Wes Bos So yes, then it goes ahead and scaffolds out your whole project. What would you like to name it? TanWes. What do we want? Deploy to Netlify. And then this is no longer the VeeP plus. This is now the... Yeah, now we're in TanStack. Yeah, I'm just going to keep hitting enter. Now we're back. There is already an agents.md file. So we'll merge it. Boom, boom, boom. Installing. And this is awesome because this is kind of what I wanted for super long. I know there's lots of like npx scaffold out commands, but I have like it almost burned into my brain which is npm init npm package set type of module so it's not esm npm install v you know Like i my like my terminal almost knows exactly what i want to type every single time so all right here we go by the way this is an example of why i will not leave warp you see how warp is is suggesting To me what i need to put in here everybody who's a warp hater doesn't know the the beauty of it having context for its suggestions that's exactly what i want to do i'm not a hater i've just Never gotten past the login screen but if i did this it's not it's cool i haven't had login screen for like a like a year i'm out of the loop yeah they lost me i don't want to be a hater no more Yeah i i like i like warp uh big fan there we go so like i just created it and now i can just type like vp check or uh vp what do we got here there we go look at all these errors, formatting issues Found, and I can run like VP check fix and it will go ahead and fix it. ([Time 0:20:06](https://share.snipd.com/snip/25ac200c-6e36-4bb2-984e-fe295207ce7b)) - **Monorepo Task Runner With Depends On And Filters** - Vite Plus includes a monorepo task runner with dependency graph semantics so tasks can declare dependsOn relationships and specific cache rules. - This mirrors Turbo Repo functionality and supports filters and package-scoped runs like vp run --filter to target subpackages. Transcript: Wes Bos So they created their own task runner. So if you've never used like a monorepo or task runner before, often what will happen is you'll need to like have a task like build. That in turn needs to run some other scripts that live in your other packages folder, right? You're in your mama package.json, you run something and it needs to like run build into others or like run a lint on one of them. And by defining what your tasks are, here, let's take a look at the docs here. Execute run scripts. It obviously can run like package JSON scripts, but I think the more interesting thing is this like task definition, right? If you have a command of VP build, first it depends on running a lint first. Or VP deploy, it first needs to run a deploy script with the prod one in there. And there should be no cache for that. But before you do that, you should run build and test, right? Like this Turbo Repo is very similar to something like this. ([Time 0:23:02](https://share.snipd.com/snip/f10b3c9e-3805-44c5-9145-47b7f2f11c6c)) - **Task Caching Saves CI Time On Heavy Builds** - Task caching stores outputs of builds and other tasks so unchanged inputs reuse previous outputs, drastically speeding CI and local workflows. - Caching is most valuable for heavy work like image processing, large JS/WASM builds, or many CSS builds across sites. Transcript: Wes Bos You can cache the outputs of your like VEET build. And then it depends on which host you're in. But many hosts will allow you to cache your node modules. So what a lot of these tools do is they just stick the cache in the node modules folder. And then next time you run a build, that will come back. It wouldn't surprise me if they come out with some task caching thing that can be used between teams as well. But this is really cool because it simply just speeds up your deployments, right? If you have, I don't know, in my course platform, I have probably 25 different like CSS files for different websites. And I want them all built out individually. And that doesn't take that long. But sometimes it's not necessary to build those if they haven't been changed, right? So that cache will swoop in. And this gets way bigger when you're looking at things like compressing images doing large javascript builds or wasm things where there's maybe two or three megs worth of something Scott Tolinski Moving around so that speeds up your builds quite a bit and this is a big reason why turbo repo was so fast right yeah ([Time 0:26:41](https://share.snipd.com/snip/503bcef8-4253-4e6a-91e5-fb44266e6dff)) - **Adopt Vite Plus Incrementally For New Projects First** - Try Vite Plus for new or small projects first, and evaluate using parts of it (task runner, env, CLI) in larger existing repos before full migration. - The hosts recommend migrating gradually because Svelte/other framework linting and plugin support are incomplete today. Transcript: Wes Bos So thoughts. What do you guys think? Are you using this? Are you excited about this? Or is this too overreaching for a tool? Thoughts. Yeah. Scott Tolinski My thoughts is that one, I'm going to use this everywhere all the time. It does all the stuff that I wanted to do. And it does so in a better way than the current tools I'm using. The biggest bummers to me is that the framework and plugin support here isn't there to the point where I can just remove all of my tools because Svelte formatting and the Svelte linting Just applies to the JavaScript in the script tags. And it's not going to do the HTML. It's not going to check those types of things. So what it cannot do today is it cannot replace my entire tool chain today. And that makes me sad because I would love to just rip everything out. And there's some issues about the plugins and what support needs to come before those can be completed. But when I see the announcement, the first thing I think of is can I remove everything today? And sadly, I can't. And the ground that I don't want to be in is supporting Vite plus plus ES Lint and prettier for the things that I need to and then you have competing things and different formats and all That stuff I don't want to be in that that weird mushy middle I just want it to stink and replace all my stuff so I will be using this going forward I'm very excited for it and the only thing I wish i could have with this is a time machine where i could go into the future where i'm not going to have to support all of these things yeah so there i'm just looking at it what ox lint supports Wes Bos And is that the same support as their formatter as well? It didn't look like it from the list. The linter supports JavaScript and all of its TypeScript, whatever, JSX and TSX, and then like.svelte view and Astrofiles, but only the script blocks. So we're not talking like the actual HTML part of it, right? Correct. But the formatter does support CSS or whatever. But like what you're talking about here is you need, you want linting inside of your Svelte templating. And with this, you don't get that. So they essentially need like an, they need HTML. This is what Biome didn't have for a while, right? They need an HTML parser. And then once you have an HTML parser, then you can start to branch out and do all of these HTML-like languages. CJ, what are your thoughts? Scott Tolinski Final thoughts here. CJ Reynolds Yes, this is great. I think I'm on the exact same thought line as you, Scott. If I could use all of this in a project with no hiccups in terms of compatibility, great. But some projects are svelte, some projects don't have full support yet. So I'm excited to see where this goes. But I think like even aux format just was in beta, so it's not stable yet. I think personally, I'm going to have to figure out what my preferred auxlint and aux format setup is because I'm coming from the world of Antfu's ESLintConfig, which includes ESLint Stylistic. And I have to train myself out of that and use the formatter instead. So there's just some personal issues I got to work through. But otherwise, like- You got issues. I got issues. Otherwise, this seems great. I think any new project I spin up, I'm going to give this a go first before trying to build out my whole stack or use some starter template for it. Wes Bos Yeah, I agree. Like for new projects and like small projects that I've moved it to, absolutely awesome so far. But like existing, I haven't moved my like big, big boys over, you know, course platform, syntax site, those types of things that that's going to take a bit more. ([Time 0:29:01](https://share.snipd.com/snip/fa616ed4-c429-48f6-bd48-aca835c164e0))