VSCode Extension Boilerplate (SolidJS, TailwindCSS, rspack)

Boilerplate Features

• SolidJS: Modern reactive UI framework for building fast webview UIs.
• TailwindCSS: Utility-first CSS framework for rapid styling and prototyping.
• rspack: Lightning-fast bundler for TypeScript and web assets, with hot reload support for webview UI.
• Hot Reload: Edit your webview UI and see changes instantly in the extension development host.
• VS Code Extension/Webview Communication: Example message passing between extension and webview.
• Minimal Setup: Clean structure with only essential files for fast prototyping and extension development.

Getting Started

1. Install dependencies:

   pnpm install

2. Run the extension in VS Code Extension Development Host.
3. Use the provided commands to open the webview and interact with the example UI.

Example UI

The starter UI includes:

• Counter with increment/decrement buttons
• All actions send messages to the extension using a type-safe payload

Customisation

This boilerplate is designed to get you up and running quickly with minimal setup required. To make it your own, replace the example UI in webview-ui/src/index.tsx with your own SolidJS components. Define custom message types in src/interfaces/payload.ts, and handle them in your extension logic as needed. You can also tailor the styling by adjusting TailwindCSS classes or extending the UI with additional features. Use this as a "solid" foundation for building your VS Code extension with ease and flexibility.

---

Feedback & Issues

Have an idea to make this boilerplate better? Just open an issue or drop a note in GitHub Discussions. Any feedback is super welcome—thanks for checking this out!