vsCode 插件

开发一款设置 vsCode 背景图片的插件

准备

参照 VSC 官方文档, 安装相关依赖

如果打包工具选择 esbuild, 可能会报错 problemMatcher 引用无效: $esbuild-watch, 此时安装插件 esbuild Problem Matchers 重新调试即可

# 脚手架
npm install -g yo generator-code

# 运行
yo code

调试成功界面

关键 API

window.createStatusBarItem: 创建底部状态栏按钮
window.registerWebviewViewProvider: 创建侧边 webview 图标按钮
window.showInformationMessage: 信息展示相关方法
window.onDidChangeActiveColorTheme: 监听主题变化
window.createQuickPick: 创建快捷选项列表
commands.registerCommand: 注册指令
commands.executeCommand: 执行指令

编辑插件功能

在 extension.ts 文件中注册指令或者添加个性化逻辑，借助 API 实现监听版本之类的自执行逻辑
功能前缀为 package.name 的驼峰形式

context.subscriptions.push(
  commands.registerCommand("extension.skinCover.start", () => {
    Instructions.createList();
  })
);

context.subscriptions.push(
  commands.registerCommand("extension.skinCover.refresh", () => {
    Instructions.randomUpdateCover();
  })
);

添加插件功能

在 package.json 中 contributes 字段中添加属性
- commands: 指令集
- keybindings: 快捷键
- configuration: 属性配置简介
configuration 中的 properties 配置具体细节
- viewsContainers: 配置自定义扩展图标
- views: 配置自定义扩展逻辑
- menus: 配置不同视图下的菜单
常用的 menus 配置选项
- editor/context: 编辑器上下文菜单，当在编辑器中右键点击时显示
- explorer/context: 资源管理器上下文菜单，当在资源管理器中右键点击文件或文件夹时显示
- commandPalette: 命令面板，用户可以通过 ctrl + shift + p 或 cmd + shift + p 打开
- view/title: 视图标题栏菜单，显示在视图的标题栏上
- view/item/context: 视图项上下文菜单，当在视图中的某个项上右键点击时显示

"contributes": {
  "commands": [
    {
      "command": "extension.skinCover.start",
      "title": "skinCover - start"
    },
    {
      "command": "extension.skinCover.refresh",
      "title": "skinCover - refresh"
    },
    {
      "command": "skinCover.refreshEntry",
      "title": "刷新",
      "icon": {
        "light": "resources/light/refresh.png",
        "dark": "resources/dark/refresh.png"
      }
    },
    {
      "command": "skinCover.home",
      "title": "首页",
      "icon": {
        "light": "resources/light/home.png",
        "dark": "resources/dark/home.png"
      }
    }
  ],
}

"viewsContainers": {
  "activitybar": [
    {
      "id": "skinCover-explorer",
      "title": "skinCover",
      "icon": "resources/big.png"
    }
  ]
},
"views": {
  "skinCover-explorer": [
    {
      "id": "skinCover.readerView",
      "type": "webview",
      "name": "skinCover"
    }
  ]
},
"menus": {
  "view/title": [
    {
      "command": "skinCover.refreshEntry",
      "when": "view == skinCover.readerView",
      "group": "navigation@1"
    },
    {
      "command": "skinCover.home",
      "when": "view == skinCover.readerView",
      "group": "navigation@0"
    }
  ]
}

调试插件功能

一般将 package.json 中 activationEvents 字段设置为 onStartupFinished, 表示在 vsc 启动时启动插件，启动时机可参考官网 > ctrl + shift + p 选择输入指令结合断点调试，注意设置 launch.js 中的 preLaunchTask，保证每次调试是编译之后的代码

1
2
3

"activationEvents": [
    "onStartupFinished"
  ],

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Extension",
      "type": "extensionHost",
      "request": "launch",
      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
      "outFiles": ["${workspaceFolder}/out/**/*.js"],
      "preLaunchTask": "npm: pretest"
    }
  ]
}

发布与安装

官网
安装 @vscode/vsce 将插件打包为 .vsix 文件，然后在插件根目录下执行 vsce package
发布有两种方式
- 执行 vsce publish，需要 vsce 的令牌
- 将 .vsix 文件上传到 Visual Studio Marketplace 发布者管理页面，选哟微软账户
审核完成后即可在 vsc 扩展里找的上传的插件进行安装

npm install -g @vscode/vsce

$ cd myExtension
$ vsce package
# myExtension.vsix generated
$ vsce publish
# <publisher id>.myExtension published to VS Code Marketplace