Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 106 additions & 121 deletions src/vite-plus/README.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,40 @@
# Vite+ Development Environment (vite-plus)

Complete Vite+ toolchain setup with VS Code extensions, Oxc formatter/linter, Vitest, and optimized configuration for the unified web development workflow.
Complete Vite+ unified toolchain setup with the `vp` CLI, integrating Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown, and Vite Task into a single development experience with VS Code extensions pre-configured.

## Features

- **Vite+ CLI (`vp`)**: Unified toolchain installed via the official installer
- **VS Code Extensions**: Oxc and Vitest extensions pre-configured
- **Vite CLI**: Optional global Vite installation for quick project scaffolding
- **Vitest CLI**: Optional global Vitest installation for running tests
- **Oxc Integration**: Blazing fast linting and formatting (100x faster than ESLint)
- **Oxc Integration**: Ultra-fast linting (Oxlint) and formatting (Oxfmt)
- **Vitest Support**: Test explorer and optimal configuration
- **Smart Defaults**: Editor configured for Vite+ best practices
- **Project Helper**: Includes `vite-plus-init` command for setup guidance

## What is Vite+?

Vite+ is the unified toolchain for web development, combining:
[Vite+](https://viteplus.dev/) combines [Vite](https://vite.dev/), [Vitest](https://vitest.dev/), [Oxlint](https://oxc.rs/docs/guide/usage/linter.html), [Oxfmt](https://oxc.rs/docs/guide/usage/formatter.html), [Rolldown](https://rolldown.rs/), and [tsdown](https://tsdown.dev/) into a single, unified web development toolchain driven by [Vite Task](https://github.com/voidzero-dev/vite-task).

- **Vite** - Lightning-fast dev server and build tool
- **Vitest** - Fast unit test framework
- **Oxc** - Ultra-fast linter and formatter (Rust-based)
- **Rolldown** - Faster bundler
- All-in-one CLI for dev, test, lint, format, and more
**Key `vp` commands:**

Built by the creators of Vite, Vitest, and Oxc for enterprise-scale productivity.
| Command | Description |
|---------|-------------|
| `vp create` | Scaffold new projects and monorepos |
| `vp install` | Install dependencies using the correct package manager |
| `vp dev` | Start Vite dev server with instant HMR |
| `vp check` | Lint (Oxlint) + format (Oxfmt) + type-check (tsgo) |
| `vp test` | Run tests with Vitest |
| `vp build` | Production builds with Rolldown |
| `vp run` | Execute package.json scripts via Vite Task |
| `vp pack` | Bundle libraries or create standalone binaries |
| `vp env` | Manage Node.js globally and per project |

All you need is `vp` and a `vite.config.ts` at the project root.

Built by VoidZero (creators of Vite, Vitest, and Oxc). Open source under MIT license.

## Usage

### Basic Setup
### Basic Setup (recommended)

Add this feature to your `devcontainer.json`:

Expand All @@ -39,60 +47,45 @@ Add this feature to your `devcontainer.json`:
```

This will:
1. Install Vite, Vitest, and Oxc CLIs globally
1. Install `vp` (Vite+ unified CLI) for the devcontainer user
2. Install Oxc and Vitest VS Code extensions
3. Configure Oxc as the default formatter
4. Enable format-on-save and auto-fix
5. Set up Vitest test explorer

### With Global CLIs (default)

```json
{
"features": {
"ghcr.io/helpers4/devcontainer/viteplus:1": {
"installVite": true,
"installVitest": true,
"installOxc": true
}
}
}
```

This allows you to run `vite`, `vitest`, and `oxc` commands globally without npx.
### With standalone fallback CLIs

### With Vite+ Unified CLI (Early Access)
If you prefer standalone tools instead of or alongside `vp`:

```json
{
"features": {
"ghcr.io/helpers4/devcontainer/vite-plus:1": {
"installVitePlus": true,
"installVite": true,
"installVitest": true,
"installVitePlus": true,
"installOxc": true
}
}
}
```

**Note**: Vite+ is currently in early access. Register at [viteplus.dev](https://viteplus.dev/). When available, this will install the unified `vite+` CLI.
**Note**: When using `vp`, standalone installs of Vite, Vitest, and Oxc are not needed — `vp` bundles them all.

## Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `installVite` | boolean | `true` | Install Vite CLI globally |
| `installVitest` | boolean | `true` | Install Vitest CLI globally |
| `installVitePlus` | boolean | `false` | Install Vite+ unified CLI globally (early access) |
| `installOxc` | boolean | `true` | Install Oxc CLI globally |
| `enableExperimentalFormatter` | boolean | `true` | Enable experimental Oxc formatter features |
| `installVitePlus` | boolean | `true` | Install Vite+ unified CLI (`vp`) for the devcontainer user (`~/.vite-plus/bin`) |
| `installVite` | boolean | `false` | Install standalone Vite CLI via npm (not needed with `vp`) |
| `installVitest` | boolean | `false` | Install standalone Vitest CLI via npm (not needed with `vp`) |
| `installOxc` | boolean | `false` | Install Oxc language server via npm (not needed with `vp`) |

## VS Code Extensions Included

### Oxc (oxc.oxc-vscode)
- Ultra-fast linting (up to 100x faster than ESLint)
- Prettier-compatible formatting
- Ultra-fast linting with Oxlint (~50× to ~100× faster than ESLint)
- Prettier-compatible formatting with Oxfmt (up to 30× faster than Prettier)
- ESLint rule compatibility (600+ rules)
- Type-aware linting support

Expand All @@ -109,96 +102,84 @@ This allows you to run `vite`, `vitest`, and `oxc` commands globally without npx
"oxc.enable": true,
"oxc.lint.enable": true,
"oxc.fmt.enable": true,
"oxc.fmt.experimental": true,
"editor.defaultFormatter": "oxc.oxc-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.oxc": "explicit"
},
"vitest.enable": true,
"vitest.commandLine": "npx vitest" // Uses local project version if available
"vitest.commandLine": "npx vitest"
}
```

**Note**: Even though Vitest is installed globally, `npx vitest` ensures the test runner uses the project's local version specified in `package.json`, maintaining consistency across the team.
**Note**: Even though `vp test` can run Vitest, the VS Code Vitest Explorer uses `npx vitest` to ensure the project's local version runs.

## Project Setup Helper
## Typical Project Setup with Vite+

After the container is created, run:
### 1. Create a new project

```bash
vite-plus-init
vp create my-app
```

This displays:
- Recommended dependencies for your project type
- Example configuration files
- Setup instructions for React, Vue, or other frameworks
### 2. Install dependencies

## Typical Project Setup
```bash
cd my-app
vp install
```

### 3. Develop

```bash
vp dev
```

### 4. Check code quality (lint + format + type-check)

```bash
vp check # report issues
vp check --fix # auto-fix formatting and linting
```

### 1. Install Dependencies
### 5. Run tests

```bash
# Core Vite+ toolchain
npm install -D vite vitest
vp test
```

### 6. Build for production

# Oxc tools (if not using unified Vite+ CLI)
npm install -D oxc-linter oxc-formatter
```bash
vp build
```

# For React
npm install -D @vitejs/plugin-react
### 7. Run scripts via Vite Task

# For Vue
npm install -D @vitejs/plugin-vue
```bash
vp run <script-name>
```

### 2. Create vite.config.ts
All tasks are configured in your `vite.config.ts`:

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
plugins: [react()],
plugins: [],
test: {
globals: true,
environment: 'happy-dom',
},
})
```

### 3. Create oxc.config.json

```json
{
"lint": {
"rules": {
"no-unused-vars": "error",
"no-console": "warn"
}
run: {
tasks: {
'generate:icons': {
command: 'node scripts/generate-icons.js',
cache: true,
},
},
},
"format": {
"indentWidth": 2,
"lineWidth": 100
}
}
```

### 4. Update package.json scripts

```json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "vitest",
"test:ui": "vitest --ui",
"lint": "oxc lint .",
"format": "oxc fmt ."
}
}
})
```

## Works Great With
Expand Down Expand Up @@ -230,14 +211,28 @@ Vite+ works with all Vite-compatible frameworks:

## Performance Benefits

- **40x faster builds** than webpack
- **100x faster linting** than ESLint
- **~1.6× to ~7.7× faster production builds** than Vite 7 (Rolldown)
- **~50× to ~100× faster linting** than ESLint (Oxlint)
- **Up to 30× faster formatting** than Prettier (Oxfmt)
- **Instant HMR** for all file types
- **Native speed formatting** with Oxc
- **Fast unit tests** with Vitest
- **Automated caching** with Vite Task for monorepo scripts

## Bundled Tools & Versions

Vite+ Alpha ships with:
- Vite 8
- Vitest 4.1
- Oxlint 1.52
- Oxfmt (beta)
- Rolldown
- tsdown

## Troubleshooting

### `vp` command not found

The installer places `vp` in `~/.vite-plus/bin/`. Ensure your shell profile sources it. Open a new terminal session after installation.

### Oxc not formatting

Check that `oxc.oxc-vscode` extension is enabled:
Expand All @@ -256,29 +251,19 @@ export default defineConfig({
})
```

### Global CLI not available
## Migrating an existing project

If `oxc` or `vite` commands aren't found, ensure the feature installed with:
```json
{
"features": {
"ghcr.io/helpers4/devcontainer/viteplus:1": {
"installOxc": true
}
}
}
```
vite`, `vitest`, or `oxc` commands aren't found, ensure the feature installed with:
```json
{
"features": {
"ghcr.io/helpers4/devcontainer/vite-plus:1": {
"installVite": true,
"installVitest": true,/r/nGWebL
- **Vite Documentation**: https://vite.dev/
- **Vitest Documentation**: https://vitest.dev/
- **Oxc Documentation**: https://oxc.rs/
- **VoidZero (Company)**: https://voidzero.dev/
Run `vp migrate` in your project root or see the [migration guide](https://viteplus.dev/guide/).

## Links

- **Vite+**: https://viteplus.dev/
- **Vite**: https://vite.dev/
- **Vitest**: https://vitest.dev/
- **Oxc**: https://oxc.rs/
- **Rolldown**: https://rolldown.rs/
- **tsdown**: https://tsdown.dev/
- **Vite Task**: https://github.com/voidzero-dev/vite-task

## License

Expand Down
28 changes: 11 additions & 17 deletions src/vite-plus/devcontainer-feature.json
Original file line number Diff line number Diff line change
@@ -1,34 +1,29 @@
{
"id": "vite-plus",
"version": "1.0.1",
"version": "1.0.2",
"name": "Vite+ Development Environment",
"description": "Complete Vite+ toolchain setup with VS Code extensions, Oxc formatter/linter, Vitest, and optimized configuration.",
"description": "Complete Vite+ unified toolchain setup (vp) with Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown, and VS Code integration.",
"documentationURL": "https://github.com/helpers4/devcontainer/tree/main/features/vite-plus",
"options": {
"installVite": {
"installVitePlus": {
"type": "boolean",
"default": true,
"description": "Install Vite CLI globally"
"description": "Install Vite+ unified CLI (vp) for the devcontainer user (~/.vite-plus/bin)"
},
"installVitest": {
"installVite": {
"type": "boolean",
"default": true,
"description": "Install Vitest CLI globally"
"default": false,
"description": "Install Vite CLI globally via npm (not needed if using vp)"
},
"installVitePlus": {
"installVitest": {
"type": "boolean",
"default": false,
"description": "Install Vite+ unified CLI globally (currently in early access)"
"description": "Install Vitest CLI globally via npm (not needed if using vp)"
},
"installOxc": {
"type": "boolean",
"default": true,
"description": "Install Oxc CLI globally for linting and formatting"
},
"enableExperimentalFormatter": {
"type": "boolean",
"default": true,
"description": "Enable experimental Oxc formatter in VS Code settings"
"default": false,
"description": "Install Oxc language server globally via npm (not needed if using vp)"
}
},
"customizations": {
Expand All @@ -42,7 +37,6 @@
"oxc.enable": true,
"oxc.lint.enable": true,
"oxc.fmt.enable": true,
"oxc.fmt.experimental": true,
"editor.defaultFormatter": "oxc.oxc-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
Expand Down
Loading
Loading