Vite

Install and configure Vite.

Create Project

First, create a new React project vite using the following command.

Tip

Currently only the react template for vite is supported


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.