福
福

雨辰枫司的小栈

vscode扩展开发

  • ~2.73K 字
  • 条评论
  1. 1. 开始
  2. 2. 使用 vite 构建
  3. 3. 打包

开始

先来了解一下基本的结构，接下来要创建三个文件。

  1. 先在跟目录创建一个package.json文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "name": "helloworld",
  "displayName": "HelloWorld",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.91.0"
  },
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "helloworld.helloWorld",
        "title": "Hello World"
      }
    ]
  }
}
字段 说明
name 插件名称
displayName 插件显示名称（发布时显示的名称）
description 插件描述
version 插件版本
engines.vscode 插件支持的vscode版本
main 插件入口文件
contributes.commands 插件命令
contributes.commands.command 命令名称
contributes.commands.title 命令显示名称

  1. 接着创建一个入口文件./dist/extension.js。这里编写一个简单的示例，弹出一个提示框，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
const vscode = require('vscode');

function activate(context) {
    // 创建命令
    const disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from HelloWorld!');
    });
    // 注册命令
    context.subscriptions.push(disposable);
}

// 导出
module.exports = { activate };

  1. 接着想要在vscode调试，就添加./.vscode/launch.json文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
{
	"configurations": [
		{
			"name": "Run Extension",
			"type": "extensionHost",
			"request": "launch",
			"args": [
				"--extensionDevelopmentPath=${workspaceFolder}"
			]
		}
	]
}
字段 说明
name 调试配置的名称
type 调试类型
request 调试请求
args 调试参数

自此，选择运行或调试就可以打开一个新的调试窗口。

使用 vite 构建

首先，安装 vite（npm i vite -D），然后创建vite的配置文件 vite.config.js，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [],
    build: {
        outDir: 'dist/',
        lib: {
            entry: './extension/index.js',
            name: 'Test',
            fileName: 'extension',
            formats: ['cjs'],
        },
        rollupOptions: {
            external: [
                "vscode"
            ],
            output: {
            },
        }
    }
})

在根据内容来创建文件，目录结构如下

1
2
3
4
5
6
7
8
9
10
11
│  package-lock.json
│  package.json
│  README.md
│  vite.config.js
├─.vscode
│      launch.json
├─dist
│      extension.js
├─extension
│      index.js
└─node_modules

剩下的就是根据自己需求，参照官方文档来编写了。

打包

  1. 安装vsce：npm i vsce -g。

  2. 打包：vsce package。

  3. 打包完成后，会在根目录下生成一个*.vsix文件，可以直接进行安装和上传到vscode的插件市场。