A Vue 3, Vite built template can be used to create a VSCode sidebar extension by providing a structure code and utilizing the vite build tool to compile and bundle the extension for deployment to VSCode. This template contains everything you need to get started building your extension right away. With this template, you can leverage the features and capabilities of Vue 3 to build powerful and interactive extensions for VSCode.
- Typescript
- Vue 3
- Vite
- Tailwindcss
- Vscode Default style Tailwind config
- Iconify via unplugin
- I18n via unplugin
- Vitest
- Vitest UI
- Testing Library
- Decent Linting
- CircleCI
- Basic VSCode API Message Examples
Install dependencies:
yarn install
Modify the following files:
package.json
- Replace all instances of
vue3baseextension
with your extension id - Replace all instances of
vue-3-base-view
with a view ID - Replace all instances of
Vue 3 Base Extension
with an extension name - Replace
default.png
with your own extension icon
- Replace all instances of
Run the extension:
- Enter
yarn watch
in the console - Press
f5
on theextension.ts
to open a debug window (or select in menu "Debug" -> "Run Extension") - Navigate to the extension icon seen on the left sidebar (or open command palette (
Ctrl/Cmd + Shift + P
) and selectView: Vue 3 Base Extension
to open webview view.)