官方文档
VS Code API | Visual Studio Code Extension API
官方文档
https://code.visualstudio.com/api/references/vscode-api
vscode扩展整体开发流程
-
vscode插件开发调试
-
卸载开发的插件
-
执行watch脚本, 监听代码的变化
-
点击编辑器按F5, 进入调试状态
-
Reload Window刷新页面
-
审核元素
帮助 --> 切换开发人员工具
-
-
外部登录交互
背景
当一个外部的应用程序或者网页试图通过特定的 URI 模式(通过链接快速执行 VSCode 中的命令 即:
vscode://
)启动或者与 VSCode 进行交互时,使用这个registerUriHandler
可以注册一个处理程序(handler)以响应和处理这些 URI 请求。registerUriHandler
在 Visual Studio Code (VSCode) 中通常用于让你的扩展(extension)能够响应和处理外部调用的 URI (统一资源标识符)。VSCode打开外部链接
vscode.env.openExternal(vscode.Uri.parse(url))
VSCode扩展处理URI
vscode.window.registerUriHandler({ handleUri(uri) { if(uri.scheme === 'vscode') { // 解析和处理 URI 中的参数 const query = new URLSearchParams(uri.query); } } });
在 Visual Studio Code (VSCode) 中,可以通过构建特定的 URI 并使用
vscode://
协议来快速执行 VSCode 内的命令。URI 的格式通常如下:vscode://<publisher>.<extension>/<command>?<params>
extensionID
:<publisher>.<extension>, 可在扩展的设置位置复制-
<publisher>
是扩展的发布者名称。 -
<extension>
是扩展的名称。 -
<command>
是要执行的命令。 -
<params>
是传递给命令的参数,采用 URL 查询字符串的格式。
-
-
状态栏设置快捷入口
在extension.ts文件中创建状态栏
// 创建状态栏快速入口 let statusBarItem = vscode.window.createStatusBarItem( vscode.StatusBarAlignment.Right, 10 ); statusBarItem.command = "vscode.view.focus"; statusBarItem.tooltip = "xxx"; // 状态栏text设置需以package.json中配置的icons的key为准 statusBarItem.text = `$(xxx-dark)`; statusBarItem.show();
在package.json中创建一个图标
"icons": { "xxx-dark": { "description": "icon", "default": { // fontPath需是woff/woff2/ttf格式 "fontPath": "images/xxx.woff", "fontCharacter": "\\e900" } } }
woff字体可以通过https://icomoon.io/app/#/select生成
-
上传svg
-
选中上传的图标, 点击右下角的Font
-
Download
-
侧边栏标题旁设置操作区
在package.json文件中menus
下设置view/title
"view/title": [
{
"command": "login",
// 什么情况下进行展示, loginSuccess表示触发命令时进行展示
"when": "loginSuccess && view == vscode.view",
// 分组, 如不设置, 则会统一管理
"group": "navigation"
}
]
配置view/title
之后需设置commands
commands: [
{
"command": "login",
"title": "已登录",
// 设置不可交互
"enablement": "false",
// $(icon-name) vscode设置图标语法
"icon": "$(clear-all)"
}
]
要触发loginSuccess
需使用
vscode.commands.executeCommand('setContext', 'loginSuccess', true);
-
使用 VS Code 的语言特性获取所有的文档符号
const editor = vscode.window.activeTextEditor!; // 该方式可以获取到全部的变量和函数的行号; 缺点是执行时间过久 const symbols = await vscode.commands.executeCommand<vscode.DocumentSymbol[]>("vscode.executeDocumentSymbolProvider", editor.document.uri);
-
代码透镜
-
class MyCodeLensProvider { provideCodeLenses(document: vscode.TextDocument) { // 在这里实现你的逻辑来确定在哪些范围以及如何创建 CodeLens let lenses: vscode.CodeLens[] = []; // 假设我们为每个函数声明创建 CodeLens for (let i = 0; i < document.lineCount; i++) { const lineOfText = document.lineAt(i); if (lineOfText.text.startsWith("function")) { const range1 = new vscode.Range(i, 0, i, lineOfText.text.length); const command1: vscode.Command = { // 此命令将用于 CodeLens 交互 command: "extension.showCodeLens", title: "代码解释", // 显示在 CodeLens 上的文本 arguments: [], //传递到command命令的参数, 只能传递至registerCommand注册的命令 }; const range2 = new vscode.Range(i, 0, i, lineOfText.text.length); const command2: vscode.Command = { command: "extension.showCodeLens", title: "代码优化", }; let lens1 = new vscode.CodeLens(range1, command1); let lens2 = new vscode.CodeLens(range2, command2); lenses.push(lens1, lens2); } } return lenses; } } let provider = new MyCodeLensProvider(); // 注册 CodeLens 提供程序 // 第一个参数指定 CodeLens 在哪种类型的文件中激活 // 第二个参数是提供程序实例 context.subscriptions.push( vscode.languages.registerCodeLensProvider("*", provider) );
-
内联代码提示
let completionItems: vscode.InlineCompletionItem[] = []; const provider = vscode.languages.registerInlineCompletionItemProvider( { pattern: "**" }, { provideInlineCompletionItems: async ( document: vscode.TextDocument, position: vscode.Position, context: vscode.InlineCompletionContext, token: vscode.CancellationToken ) => { // 每次触发代码提示triggerKind都是先1后0, 不进行判断会连续执行两次提示 if (context.triggerKind === vscode.InlineCompletionTriggerKind.Invoke) { return completionItems; } else if ( context.triggerKind === vscode.InlineCompletionTriggerKind.Automatic ) { const editor = vscode.window.activeTextEditor!; const cursorPosition = editor.selection.active; let beforeSelection = new vscode.Selection( 0, 0, cursorPosition.line, cursorPosition.character ); // 获取光标之前的文本 let beforeText = document.getText(beforeSelection); const trailingRange = new vscode.Range( cursorPosition, document.lineAt(document.lineCount - 1).range.end ); const trailingText = document.getText(trailingRange); if ( cursorPosition.character === 0 && beforeText[beforeText.length - 1] !== "\n" ) { beforeText += "\n"; } if (beforeText.trim() === "") { return []; } let beforeLine = document?.lineAt(cursorPosition.line - 1); let beforeLineText = beforeLine?.text; let result = await util.getCodeCompletions(); const completionItem = new vscode.InlineCompletionItem( result, // 插入的文本 new vscode.Range( cursorPosition.translate(0, result.length), cursorPosition ) // 插入文本的位置 ); completionItems.push(completionItem); return completionItems; } }, } ); context.subscriptions.push(provider);