入门vscode插件开发

在插件开发上,有Chorme浏览器插件,有开发工具插件. 在开发工具插件中,有visual studio,jetbrains以及vscode,其中vscode插件开发也是非常流行.这里简单入门介绍一下.

安装脚手架

1 2	npx --package yo --package generator-code -- yo code

yeoman是创建应用的脚手架,generator-code是vscode项目生成器. 有了这两者开发vscode插件就非常方便了.

重要文件

package.json

Extension Manifest | Visual Studio Code Extension API

{
  "name": "mini-news",
  "displayName": "mini-news",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.96.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [],
  "main": "./extension.js",
  "contributes": {
    "commands": [{
      "command": "mini-news.hihi",
      "title": "mini-news:info"
    }]
  },
  "scripts": {
    "lint": "eslint .",
    "pretest": "npm run lint",
    "test": "vscode-test"
  },
  "devDependencies": {
    "@types/vscode": "^1.96.0",
    "@types/mocha": "^10.0.10",
    "@types/node": "20.x",
    "eslint": "^9.16.0",
    "@vscode/test-cli": "^0.0.10",
    "@vscode/test-electron": "^2.4.1"
  }
}

关于插件的配置,重要的属性比如name,displayname,publisher等,目前版本(>1.74.0)activationEvents不需要额外配置,此外还有contributions用于配置扩展功能Contribution Points | Visual Studio Code Extension API

contribution包括commands,menus,configuration,keybinds等等

extension.js

扩展入口文件,暴露activate和deactivate.activate 在您注册的激活事件发生时执行。 deactivate 在您的扩展被停用之前给您一个清理的机会。对于许多扩展，可能不需要显式清理，并且可以删除 deactivate 方法。然而，如果扩展需要在 VS Code 关闭或扩展被禁用或卸载时执行操作使用deactivate.

通过context.subscriptions.push添加功能,通过vscode.xx.registerxx注册功能并在contribution中指定.

小案例

import * as vscode from 'vscode';

// 定义注释内容
const COMMENT = '// This is a comment added by the extension\n';

export function activate(context: vscode.ExtensionContext) {
    // 注册命令
    const disposable = vscode.commands.registerCommand('extension.toggleComment', () => {
        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            return; // 没有活动的编辑器
        }

        const document = editor.document;
        const firstLine = document.lineAt(0); // 获取第一行

        // 检查第一行是否已经是注释
        if (firstLine.text === COMMENT.trim()) {
            // 如果是注释，则删除
            editor.edit(editBuilder => {
                const range = new vscode.Range(firstLine.range.start, firstLine.range.end);
                editBuilder.delete(range);
            });
        } else {
            // 如果不是注释，则添加
            editor.edit(editBuilder => {
                editBuilder.insert(firstLine.range.start, COMMENT);
            });
        }
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

{
    "contributes": {
        "commands": [
            {
                "command": "extension.toggleComment",
                "title": "Toggle Comment"
            }
        ],
        "keybindings": [
            {
                "command": "extension.toggleComment",
                "key": "ctrl+alt+c", // 自定义快捷键
                "mac": "cmd+alt+c",
                "when": "editorTextFocus"
            }
        ]
    }
}

Sekyoro的博客小屋

入门vscode插件开发

安装脚手架

重要文件

package.json

extension.js

小案例

相关资料