vscode插件开发

• 入门
• 官方文档

1. 创建插件

• 同官方文档一样，使用yo code创建插件，需要注意的是目前打包工具vsce还不支持项目使用pnpm，建议使用yarn

  npm install --global yo generator-code
  
  # 创建项目
  yo code

1.1 调试与打包

• 打包器：官方构建工具中提供了webpack和esbuild两种工具，webpack更加成熟，esbuild性能更好

  • 如果使用webpack打包，调试时需要额外安装tsl-problem-matcher扩展
  • 如果使用esbuild打包，调试时需要额外安装esbuild-problem-matchers扩展

• 调试可以直接通过vscode的调试运行功能启动

• 如果觉得插件功能已经满足要求，可以打包成.vsix文件，通过vscode安装插件

  # 安装打包工具
  npm add -D @vscode/vsce
  
  vsce package
  
  # 如果需要使用pnpm，打包命令需要额外参数
  # !!!最终打包文件会包含pnpm.lock.yaml
  vsce package --no-dependencies

2. 基本插件

• 最基本的插件，也就是通过activate方法注册一个命令，在命令中执行一些操作

  export function activate(context: vscode.ExtensionContext) { }
  
  export function deactivate() { }

• 命令的注册：

  • 通过vscode.commands.registerCommand方法注册一个命令，第一个参数为命令的名称，第二个参数为命令执行的回调函数

    // 在activate方法中注册命令
    context.subscriptions.push(
        vscode.commands.registerCommand('extension.addFrontMatter', () => {})
    );

  • 在package.json中注册命令，通过第一级contributes注册，比如一个添加FrontMatter的插件，可以如下配置

    {
        "activationEvents": [
            "onLanguage:markdown"
        ],
        "contributes": {
            // 命令注册
            "commands": [
            {
                "command": "extension.addFrontMatter",
                "title": "Add/Update FrontMatter"
            }
            ],
            // 快捷键
            "keybindings": [
            {
                "command": "extension.addFrontMatter",
                "key": "ctrl+alt+m",
                "when": "editorTextFocus && editorLangId == markdown"
            }
            ],
            // 菜单选项
            "menus": {
            "editor/context": [
                {
                "command": "extension.addFrontMatter",
                "when": "editorLangId == markdown"
                }
            ]
            }
        },
    }