Overview:

The Base Vue 3 Sidebar View Extension is a Vue 3 and Vite-built template that allows you to create a sidebar extension for Visual Studio Code (VSCode). It provides a structured code and utilizes the Vite build tool to compile and bundle the extension for deployment to VSCode. This template offers all the necessary components to quickly get started building your own extension. By leveraging the features and capabilities of Vue 3, you can create powerful and interactive extensions for VSCode.

Features:

• Typescript: The template is written in Typescript, providing strong typing and improved development experience.
• Vue 3: Uses Vue 3, the latest version of the Vue framework, allowing you to take advantage of its enhanced performance and new features.
• Vite: Utilizes Vite, a fast and lightweight build tool, to optimize the development and build process.
• Tailwindcss: Integrates Tailwindcss, a highly customizable CSS framework, for easy styling and design.
• Vscode Default style Tailwind config: Includes the Tailwindcss configuration specifically tailored for VSCode’s default style.
• Iconify via unplugin: Enables the usage of Iconify icons through the unplugin package, providing a wide range of icons to choose from.
• I18n via unplugin: Implements internationalization using the unplugin package, allowing you to easily translate your extension.
• Vitest: Includes Vitest, a testing utility for Vue, to facilitate the implementation of unit tests for your extension.
• Vitest UI: Provides Vitest UI, a user interface for running and monitoring your extension tests.
• Testing Library: Integrates the Testing Library, a popular testing framework, to simplify the writing of tests.
• Decent Linting: Implements a comprehensive linting setup for maintaining code quality and consistency.
• CircleCI: Includes CircleCI configuration for continuous integration, ensuring automatic testing and deployment.
• Basic VSCode API Message Examples: Offers basic code examples demonstrating how to interact with the VSCode API.

Installation:

To get started with the Base Vue 3 Sidebar View Extension, follow these steps:

1. Install dependencies:

yarn install

2. Modify the following files:

• package.json: Replace all instances of “vue3baseextension” with your extension ID.
• Replace all instances of “vue-3-base-view” with your desired view ID.
• Replace all instances of “Vue 3 Base Extension” with your preferred extension name.
• Replace “default.png” with your own extension icon.

3. Run the extension:

• Enter the following command in the console:

yarn watch

• Press F5 on the extension.ts file to open a debug window, or select “Debug” -> “Run Extension” from the menu.

4. Navigate to the extension:

• Click on the extension icon in the left sidebar, or open the command palette (Ctrl/Cmd + Shift + P) and select “View: Vue 3 Base Extension” to open the webview view.

Summary:

The Base Vue 3 Sidebar View Extension is a powerful template that allows you to quickly build sidebar extensions for VSCode using Vue 3 and Vite. With a range of features such as Typescript, Vite, Tailwindcss, and Testing Library, you have all the tools necessary to create interactive and visually appealing extensions. The template also includes customization options for extension ID, view ID, extension name, and icon, making it easy to tailor the extension to your specific needs. By following the installation guide, you can start building your own VSCode sidebar extension in no time.