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
vue3baseextensionwith your extension id - Replace all instances of
vue-3-base-viewwith a view ID - Replace all instances of
Vue 3 Base Extensionwith an extension name - Replace
default.pngwith your own extension icon
- Replace all instances of
Run the extension:
- Enter
yarn watchin the console - Press
f5on theextension.tsto 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 Extensionto open webview view.)