mcpField
U
use-vite

use-vite

github.com/gkwaDevelopment087 installsUpdated 3d ago
Repository

About use-vite

A reusable skill for configuring Vite builds and Vitest tests in JavaScript projects. It guides ESM setup and adds TypeScript checking through vite-plugin-checker.

Key features

  1. 01Vite build configuration
  2. 02Vitest test setup
  3. 03ESM configuration guidance
  4. 04TypeScript checks with vite-plugin-checker

Use cases

  1. 01Setting up a Vite project with ESM
  2. 02Running type checks during development and builds

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/gkwa/volcanicviper --skill use-vite

After installing, type/use-vitein Claude Code to confirm it loaded.

Bundled filestile.json

Details

From the project README

Use Vite as the build system and Vitest as the test tool.

ESM Configuration

Use ESM syntax in vite.config.js. Add "type": "module" to package.json so all *.js files are interpreted as ESM. If a file must stay CJS, use the .cjs extension.

Do not use the CJS build of Vite's Node API — it is deprecated and removed in Vite 6. Reference: https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

vite-plugin-checker

Add vite-plugin-checker to run TypeScript type checking alongside the build:

  1. Install:
pnpm add --save-dev vite-plugin-checker
  1. Add to vite.config.js:
import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    checker({
      typescript: true,
    }),
  ],
});

Type errors appear in the browser overlay and terminal during development. The build fails if TypeScript errors are present — no separate type-check script needed.

Comments

Markdown supported