VSCode 插件开发实战（十三）：怎样添加个性化接待信息
前言contributes.viewsWelcome允许开发者为 VSCode 的侧边栏视图添加个性化的接待信息，从而提升用户体验并引导用户更好地利用插件。通过这一功能，您可以在插件激活时展示有用的提示、链接和操作按钮，帮助用户更快速地上手和利用您的插件。
什么是 contributes.viewsWelcome
简单来说，contributes.viewsWelcome 是 VSCode 插件的一个设置，用于在侧边栏视图中展示接待信息。这些接待信息可以包含文案、链接，甚至按钮，帮助引导用户怎样利用插件。
基础用法
编辑 package.json
完成插件项目创建后，我们必要在 package.json 中添加 contributes.viewsWelcome 设置。打开 package.json 文件，找到 contributes 部分，并添加 viewsWelcome 设置：
{
"contributes": {
"viewsWelcome": [
{
"view": "explorer",
"contents": "## 欢迎使用我的插件\n\n这是一个自定义的欢迎信息。",
"when": "explorerViewletVisible",
"group": "navigation"
}
]
}
}
让我们解释一下每个字段的含义：
[*]view: 指定接待信息展示在哪个视图中，比如 explorer（资源管理器）视图。
[*]contents: 接待信息的内容，可以利用 Markdown 格式。
[*]when: 一个条件表达式，当条件为真时接待信息才会表现。
[*]group: 接待信息的分组，可以是 navigation 或 help.
添加更多动态内容
你可以在 contents 中添加更多动态内容，比如链接和按钮：
{
"contributes": {
"viewsWelcome": [
{
"view": "explorer",
"contents": "## 欢迎使用我的插件\n\n这是一个自定义的欢迎信息。\n\n[点击这里了解更多](https://example.com)\n\n[命令按钮](command:example.helloWorld)",
"when": "explorerViewletVisible",
"group": "navigation"
}
]
}
}
[*]点击这里了解更多: 这是一个超链接，点击后会在浏览器中打开指定的网址。
[*]命令按钮: 这是一个命令按钮，点击后会实行插件中的 example.helloWorld 命令。
实现命令
我们还必要在插件代码中实现这个命令。打开 src/extension.ts 文件，添加以下代码：
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand('example.helloWorld', () => {
vscode.window.showInformationMessage('Hello World from example plugin!');
});
context.subscriptions.push(disposable);
}
export function deactivate() {}
高级用法
在实际开发中，你可能希望根据差别的条件表现差别的接待信息，或将接待信息分组以便更好地管理。让我们进一步优化我们的插件，添加更多的条件和分组。
利用多个条件
你可以通过 when 表达式指定更复杂的条件。比如，我们希望在特定文件夹中表现特定的接待信息：
{
"contributes": {
"viewsWelcome": [
{
"view": "explorer",
"contents": "## 欢迎使用我的插件\n\n这是一个在特定文件夹中显示的欢迎信息。",
"when": "resourceFilename =~ /.vscode/",
"group": "navigation"
},
{
"view": "explorer",
"contents": "## 欢迎使用我的插件\n\n这是一个默认的欢迎信息。",
"when": "explorerViewletVisible",
"group": "help"
}
]
}
}
在这个例子中，我们添加了两个接待信息：
[*]当文件名包含 .vscode 时表现的接待信息。
[*]默认的接待信息，当资源管理器视图可见时表现。
添加分组
在 VSCode 的侧边栏中，接待信息可以分组表现，从而简化用户界面。你可以利用 group 字段来指定差别的分组：
{
"contributes": {
"viewsWelcome": [
{
"view": "explorer",
"contents": "## 导航\n\n- [打开设置](command:workbench.action.openGlobalSettings)\n- [新建文件](command:explorer.newFile)",
"when": "explorerViewletVisible",
"group": "navigation"
},
{
"view": "explorer",
"contents": "## 帮助\n\n- [插件文档](https://example.com/docs)\n- [提交反馈](https://example.com/feedback)",
"when": "explorerViewletVisible",
"group": "help"
}
]
}
}
在这个例子中，我们将接待信息分为两个组：
[*]navigation 组，包含导航相关的链接和命令。
[*]help 组，包含帮助和反馈相关的链接。
这样可以让用户更容易找到所需的信息。
动态内容
为了使接待信息更具动态性，我们可以在插件激活时，根据某些条件动态天生接待信息。比方，根据用户是否已经安装了某个依靠项来表现差别的信息。
首先，我们必要修改 package.json 中的 viewsWelcome 设置，以便在插件激活时动态设置接待信息。我们可以利用 viewsWelcome 作为占位符，然后在插件代码中动态修改它。
{
"contributes": {
"viewsWelcome": [
{
"view": "explorer",
"contents": "## 动态欢迎信息占位符",
"when": "explorerViewletVisible",
"group": "navigation"
}
]
}
}
然后，在 extension.ts 文件中，我们可以利用 VSCode 的 API 动态设置接待信息的内容：
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
const welcomeMessageKey = 'example.dynamicWelcomeMessage';
// 动态设置欢迎信息
vscode.commands.executeCommand('setContext', welcomeMessageKey, true);
const welcomeMessage = "## 动态欢迎信息\n\n这是根据某些条件动态生成的欢迎信息。";
vscode.workspace.getConfiguration().update(welcomeMessageKey, welcomeMessage, vscode.ConfigurationTarget.Global);
let disposable = vscode.commands.registerCommand('example.helloWorld', () => {
vscode.window.showInformationMessage('Hello World from example plugin!');
});
context.subscriptions.push(disposable);
}
export function deactivate() {}
这里我们利用了 setContext 命令和 vscode.workspace.getConfiguration().update 方法来动态更新接待信息的内容。
总结
通过本教程，我们系统地先容了如安在 VSCode 插件中利用 contributes.viewsWelcome 来添加自定义的接待信息。从基础设置到高级用法，我们详细探讨了怎样根据差别条件表现信息、怎样分组管理以及怎样动态天生内容。这一功能为插件开发者提供了强盛的工具，提升了插件的用户体验和可用性。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]