Have you ever spent more time than expected choosing and configuring development tools for a new frontend project? Along with installing the tools, I found it burdensome to manage compatible versions.

Vite+ provides a complete set of development tools, or a toolchain. This article focuses on reducing the work involved in installing and updating tools individually, explains how Vite+ differs from a conventional setup, and walks through its basic use in a new project.

Note: This article uses Vite+ 1.3.

What VoidZero aims to solve

Vite+ is developed by the team at VoidZero, which leads Vite development and joined Cloudflare in June 2026.

At Vue Fes Japan 2025, VoidZero’s Evan You discussed the work required to set up and maintain development environments.

Building an up-to-date toolchain requires many different tools. Migrating to new tools every year or two is exhausting for developers.

• Source: Vue Fes Japan 2025レポート ～Evan Youが描く、JavaScript開発ツールの理想郷 | gihyo.jp

Vite+ was developed to address this situation.

What is Vite+?

While Vite handles the development server and builds, Vite+ also covers testing and code checks.

Vite+ combines two parts:

• The vp command: Installed globally to manage Node.js and package managers, and to run development commands
• The vite-plus package: Installed in each project to provide the development tools

The vite-plus package includes the following tools:

• Development server and builds: Vite and Rolldown
• Testing: Vitest
• Linting and formatting: Oxlint and Oxfmt
• Library builds and task execution: tsdown and Vite Task

For more on Vite, Rolldown, Oxlint, and Oxfmt, see “Vite guide - HTML, TypeScript, React, Vue, and Tailwind CSS.”

Comparison with a conventional setup

The following table compares Vite+ with a setup in which Vite, Vitest, Oxlint, and Oxfmt are installed individually. The packages listed are development tools managed as direct dependencies in package.json.

The versions of the tools included in Vite+ are determined by the version of vite-plus. This reduces the work of choosing compatible versions of each tool. TypeScript and the libraries used by the application are managed separately.

Basic usage

The following steps cover creating a project, starting the development server, checking code, running tests, and building the application. A small function that adds two numbers is used to demonstrate the check and test results. To follow along, add the files and run the commands in the order shown.

Use the vp command throughout. The commands are the same regardless of whether the project uses npm, pnpm, or another package manager.

For command details, see the official documentation, Getting Started.

• View the source code

1. Install the vp command

Install the vp command once on your machine. On macOS or Linux, run the following command in a terminal:

curl -fsSL https://vite.plus | bash

On Windows, run this command in PowerShell:

irm https://vite.plus/ps1 | iex

Open a new terminal and run vp help. If the list of commands appears, the installation is complete.

2. Create a project

Create a project with vp create. This example specifies pnpm, the package manager recommended by Vite+.

vp create --package-manager pnpm

Answer the prompts as follows to select a TypeScript setup without a framework:

• Template: “Vite+ Application”
• Project name: my-app
• Framework: “Vanilla”
• Language: “TypeScript”

Choose the editor, Git, and other settings to suit your environment.

The dependencies, including vite-plus, are installed automatically. If pnpm is not already installed, vp downloads it, so there is no need to install it beforehand.

3. Start the development server

Move into the project directory and start the development server:

cd my-app
vp dev

Open the URL shown in the terminal, usually http://localhost:5173/, in a browser to see the starter page.

Before running the remaining commands, stop the development server or open another terminal in the my-app directory.

4. Run formatting checks, linting, and type checking

The vp check command checks formatting with Oxfmt and runs linting and type checking with Oxlint. In the generated vite.config.ts, typeAware and typeCheck under lint.options are enabled, so type checking is included.

To see how problems are detected, add a src/sum.ts file with intentional errors:

▼ src/sum.ts (example with errors)

export function sum(a: number, b: number): number {
  const unused = 1;
  return a + b + "1";
}

vp check

The unused variable unused causes both a lint warning and a TypeScript error. The return value also includes a string, so its type does not match number. The command reports the following:

! eslint(no-unused-vars): Variable 'unused' is declared but never used. Unused variables should start with a '_'.
...
x typescript(TS2322): Type 'string' is not assignable to type 'number'.

Note: Only part of the output is shown. The eslint(...) label is an ESLint-compatible rule name displayed by Oxlint.

Fix the function by removing the unused variable and the extra string:

▼ src/sum.ts (after the fix)

export function sum(a: number, b: number): number {
  return a + b;
}

Run vp check again to confirm that the warnings and errors are resolved. If a formatting issue, such as a missing newline at the end of a file, causes the check to fail, use vp check --fix to fix it. You can also use vp lint for linting alone or vp fmt for formatting alone.

5. Run tests

Use Vitest, which is included in Vite+, to check the result of the corrected sum function. The starter project does not contain any tests, so add a src/sum.test.ts file:

▼ src/sum.test.ts

import { expect, test } from "vite-plus/test";
import { sum } from "./sum.ts";

test("1 + 2 equals 3", () => {
  expect(sum(1, 2)).toBe(3);
});

The test functions are imported from vite-plus/test. The expression expect(sum(1, 2)).toBe(3) checks that the result is 3.

vp test

The test has passed if the terminal shows the following output:

 Test Files  1 passed (1)
      Tests  1 passed (1)

For more on writing tests, see “JavaScriptのユニットテストを始めよう.”

6. Build the application

To generate files for deployment, run the build script defined in package.json:

vpr build

The vpr build command is shorthand for vp run build. In this example, package.json defines the script as tsc && vp build, so it checks TypeScript types before building. By default, the build output is written to the dist directory.

Running vp build directly invokes only the built-in build command, without going through the script. This article uses vpr build so that type checking is included.

Conclusion

After trying Vite+, I found that setting up a development environment took less effort because there was less need to install and configure tools for code checks and tests individually.

Consider Vite+ as an option when setting up the development environment for a new project.