Vite

Install and configure Vite.

Create Project

First, use the following command to create a new React project with vite.

💡

Tip

Currently only supports vite’s react template


npm create vite@latest


pnpm create vite


yarn create vite


bunx create-vite

Add Canyon and its Configuration


npm install babel-plugin-istanbul babel-plugin-canyon -D


pnpm add babel-plugin-istanbul babel-plugin-canyon -D


yarn add babel-plugin-istanbul babel-plugin-canyon --dev


bun add babel-plugin-istanbul babel-plugin-canyon --dev

Configure Babel Plugin

vite.config.ts


import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
// https://vite.dev/config/
export default defineConfig({
plugins: [react({
    babel:{
      plugins:["istanbul","canyon"]
    }
  })],
})

That’s It

Continue to First Coverage Data - Check.