Vite Plugin Template

A template for creating Vite plugins with TypeScript, testing, and publishing setup.

Features

• 📦 TypeScript support with type definitions
• 🧪 Testing with Vitest
• 📦 Dual CJS/ESM build with tsup
• 🔍 ESLint configuration
• 📚 Ready for npm publishing
• 🎯 Example plugin implementation

Usage

Installation

npm install vite-plugin-template

Basic Usage

// vite.config.ts
import { defineConfig } from 'vite'
import templatePlugin from 'vite-plugin-template'

export default defineConfig({
  plugins: [
    templatePlugin({
      example: true
    })
  ]
})

Development

Setup

# Clone this template
git clone https://github.com/yourusername/vite-plugin-template.git
cd vite-plugin-template

# Install dependencies
npm install

# Start development
npm run dev

Scripts

• npm run dev - Build in watch mode
• npm run build - Build the plugin
• npm run test - Run tests
• npm run test:ui - Run tests with UI
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues
• npm run prepublishOnly - Build and test before publishing

Publishing to npm

1. Update package.json with your plugin details
2. Update the repository URL in package.json
3. Run npm run build && npm test
4. Publish with npm publish

Plugin Development

Your plugin's main logic goes in src/index.ts. The template includes:

• Plugin options interface
• Basic plugin structure with common hooks
• Example transformation logic
• Type safety with TypeScript

Testing

Write your tests in the tests/ directory. The template includes example tests that demonstrate:

• Plugin creation
• Option handling
• Transformation logic

License

MIT