# vscode-plugin-template

**Repository Path**: ironc/vscode-plugin-template

## Basic Information

- **Project Name**: vscode-plugin-template
- **Description**: vscode 插件开发模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-22
- **Last Updated**: 2024-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

vscode插件开发模板

## 开发

打包插件

```
npm run watch
```

打包页面

```
cd webview-app   
npm run build
```

> 一定要 build 一下，webview 会加载这个打包后的 dist 文件夹



## 调试

先执行上面的开发命令

### 配置 `task.json`

> .vscode/task.json

```json
{
  "version": "2.0.0",
  "tasks": [
      {
          "label": "webpack: build",
          "type": "shell",
          "command": "pnpm run compile",
          "group": "build",
          "problemMatcher": "$tsc",
          "presentation": {
              "reveal": "silent"
          }
      },
      {
          "label": "webpack: watch",
          "type": "shell",
          "command": "pnpm run watch",
          "group": "build",
          "problemMatcher": "$tsc",
          "isBackground": true,
          "presentation": {
              "reveal": "silent"
          }
      },
      {
          "label": "eslint: lint",
          "type": "shell",
          "command": "pnpm run lint",
          "group": {
              "kind": "test",
              "isDefault": true
          },
          "problemMatcher": "$eslint-stylish",
          "presentation": {
              "reveal": "silent"
          }
      },
      {
          "label": "prepare for tests",
          "type": "shell",
          "command": "pnpm run pretest",
          "group": "test",
          "problemMatcher": [
              "$tsc",
              "$eslint-stylish"
          ],
          "presentation": {
              "reveal": "silent"
          }
      }
  ]
}

```



### 开启调试

![image-20240322224040604](https://qn.huat.xyz/mac/202403222240626.png)



![image-20240322224221384](https://qn.huat.xyz/mac/202403222242411.png)





### webview 调试

先打开 webview 

![image-20240322224401586](https://qn.huat.xyz/mac/202403222244611.png)



![image-20240322224444513](https://qn.huat.xyz/mac/202403222244543.png)





## 打包

```
npm i -g vsce
vsce package
```



## 目录结构

```
.
├── .eslintrc.json
├── .gitignore
├── .vscodeignore
├── CHANGELOG.md
├── README.md
├── dist  // vscode插件打包后的 dist
│   ├── extension.js
│   └── extension.js.map
├── package-lock.json
├── package.json
├── src
│   ├── command.ts  // 注册 vscode 命令
│   ├── const				// 定义常量
│   │   └── index.ts
│   ├── core					// vscode命令对应的执行函数
│   │   └── index.ts
│   ├── extension.ts  // 入口文件
│   ├── init.ts				 // 插件初始化
│   ├── service
│   │   ├── ConfigService.ts   // 获取 vscode 插件的配置信息 
│   │   ├── DIContainer.ts			// DI 容器
│   │   ├── LocalStorageService.ts	// 本地存储封装
│   │   └── index.ts
│   ├── type		// 类型定义
│   │   └── index.ts
│   ├── utils			// 工具集
│   │   ├── index.ts
│   │   ├── utils.ts	// 普通工具方法
│   │   └── vscode.ts  // vscode 相关的工具方法
│   └── webview
│       ├── WebviewCommunicator.ts	
│       ├── WebviewMessageHandler.ts   // 通信
│       └── index.ts
├── tsconfig.json
├── vsc-extension-quickstart.md
├── webpack.config.js
└── webview-app   // vue3 的页面
    ├── .gitignore
    ├── README.md
    ├── dist
    │   ├── assets
    │   │   ├── index-DHZYYcoY.css
    │   │   └── index-N-FVQiFm.js
    │   ├── index.html
    │   └── vite.svg
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── vite.svg
    ├── src
    │   ├── App.vue
    │   ├── ExtensionCommunicator.js
    │   ├── assets
    │   │   └── vue.svg
    │   ├── components
    │   │   ├── HelloWorld.vue
    │   │   └── Message
    │   │       ├── Message.vue
    │   │       └── message.js
    │   ├── main.js
    │   └── style.css
    └── vite.config.js

```