vscode svn插件

最新推荐文章于 2025-06-25 08:42:43 发布

原创最新推荐文章于 2025-06-25 08:42:43 发布 · 5.4k 阅读

0 ·

CC 4.0 BY-SA版权

vscode 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在Visual Studio Code中开发插件，包括定义命令、配置参数、创建菜单项及响应激活事件等核心功能。通过示例展示了如何在package.json中注册贡献点，如自定义命令、设置配置项、添加菜单选项，并在extension.ts中实现相应的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

贡献点(Contribution Point)

参考: https://code.visualstudio.com/api/references/contribution-points

命令

package.json

	"contributes": {
		"commands": [
			{
				"command": "extension.hello",
				"title": "hello"
			}
		]
	}

extension.ts

commands.registerCommand('extension.hello', () => {
    window.showInformationMessage('Hello World!');
});

快捷键Ctrl + Shift + p 输入 hello
在这里插入图片描述

配置

package.json

	"contributes": {
		"configuration": {
			"title": "TypeScript configuration",
			"properties": {
				"typescript.useCodeSnippetsOnMethodSuggest": {
					"type": "boolean",
					"default": false,
					"description": "Complete functions with their parameter signature."
				},
				"typescript.tsdk": {
					"type": ["string", "null"],
					"default": null,
					"description": "Specifies the folder path containing the tsserver and lib*.d.ts files to use."
				}
			}
		}
	}

文件 - 首选项 - 设置
输入框输入TypeScript configuration
在这里插入图片描述
读取配置
extension.ts

const config = vscode.workspace.getConfiguration('typescript');
console.log(config.get('useCodeSnippetsOnMethodSuggest'));		// false

菜单

editor/title

package.json

	"contributes": {
		"commands": [
			{
				"command": "extension.menu_title",
				"title": "showSource",
				"icon": {
					"light": "./media/love_light.svg",
					"dark": "./media/love_dark.svg"
				}
			}
		],
		"menus": {
			"editor/title": [{
				"command": "extension.menu_title",
				"group": "navigation"
			}]
		}
	},

extension.ts

export function activate(context: vscode.ExtensionContext) {
	vscode.commands.registerCommand("extension.menu_title", () => {
		vscode.window.showInformationMessage('点击了爱心');
	});
}

在这里插入图片描述

commandPalette

"menus": {
    "commandPalette": [{
        "command": "extension.menu_title",
}]
"commands": [
	{
		"command": "extension.menu_title",
		"title": "showSource"
	}
],

在这里插入图片描述

explorer/context
package.json

		"menus": {
			"explorer/context": [{
				"command": "extension.menu_title"
			}]
		}

在这里插入图片描述

editor/context
package.json

		"menus": {
			"editor/context": [{
				"command": "extension.menu_title"
			}]
		}

在这里插入图片描述

editor/title/context
debug/callstack/context
debug/toolbar
scm/title

在这里插入图片描述

scm/resourceGroup/context
scm/resourceState/context
scm/change/title
view/title

		"viewsContainers": {
			"activitybar": [
			  {
				"id": "package-explorer",
				"title": "Package Explorer",
				"icon": "./media/dep.svg"
			  }
			]
		  },
		"views": {
			"package-explorer": [
			  {
				"id": "nodeDependencies",
				"name": "Node Dependencies"
			  }
			]
		  },
		"menus": {
			"view/title": [{
				"command": "view.menu_title",
				"group": "navigation"
			}],
			"view/item/context": [
				{
					"command": "view.menu_title",
					"group": "navigation"
				}
			]
		}
		"commands": [
			{
				"command": "view.menu_title",
				"title": "showSource",
				"icon": {
					"light": "./media/love_light.svg",
					"dark": "./media/love_dark.svg"
				}
			}
		]

extension.ts

export function activate(context: vscode.ExtensionContext) {
	const nodeDependenciesProvider = new DepNodeProvider(vscode.workspace.rootPath || '');
	vscode.window.registerTreeDataProvider('nodeDependencies', nodeDependenciesProvider);
	
	vscode.commands.registerCommand("view.menu_title", () => {
		vscode.window.showInformationMessage('点击了爱心');
	});
}

在这里插入图片描述
参考: https://code.visualstudio.com/api/extension-guides/tree-view

view/item/context

参考: https://code.visualstudio.com/api/extension-guides/tree-view
touchBar
comments/commentThread/title
comments/commentThread/context
comments/comment/title
comments/comment/context

激活事件(activationEvents)

vscode启动后激活插件

package.json

	"activationEvents": [
		"*"
	],

extension.ts

export function activate(context: vscode.ExtensionContext) {
	console.log('插件激活');
}

命令激活插件

package.json

	"activationEvents": [
		"onCommand:extension.hello"
	],

extension.ts

export function activate(context: vscode.ExtensionContext) {
	console.log('插件激活');
		vscode.commands.registerCommand("extension.hello", () => {
			vscode.window.showInformationMessage('Hello World');
		});
	});
}