VSCode 插件开发实战（十三）：怎样添加个性化接待信息 ...

前言

contributes.viewsWelcome允许开发者为 VSCode 的侧边栏视图添加个性化的接待信息，从而提升用户体验并引导用户更好地利用插件。通过这一功能，您可以在插件激活时展示有用的提示、链接和操作按钮，帮助用户更快速地上手和利用您的插件。
什么是 contributes.viewsWelcome

简单来说，contributes.viewsWelcome 是 VSCode 插件的一个设置，用于在侧边栏视图中展示接待信息。这些接待信息可以包含文案、链接，甚至按钮，帮助引导用户怎样利用插件。
基础用法

编辑 package.json

完成插件项目创建后，我们必要在 package.json 中添加 contributes.viewsWelcome 设置。打开 package.json 文件，找到 contributes 部分，并添加 viewsWelcome 设置：

1. {
2.   "contributes": {
3.     "viewsWelcome": [
4.       {
5.         "view": "explorer",
6.         "contents": "## 欢迎使用我的插件\n\n这是一个自定义的欢迎信息。",
7.         "when": "explorerViewletVisible",
8.         "group": "navigation"
9.       }
10.     ]
11.   }
12. }

复制代码

让我们解释一下每个字段的含义：

• view: 指定接待信息展示在哪个视图中，比如 explorer（资源管理器）视图。
  
• contents: 接待信息的内容，可以利用 Markdown 格式。
  
• when: 一个条件表达式，当条件为真时接待信息才会表现。
  
• group: 接待信息的分组，可以是 navigation 或 help.
  

添加更多动态内容

你可以在 contents 中添加更多动态内容，比如链接和按钮：

1. {
2.   "contributes": {
3.     "viewsWelcome": [
4.       {
5.         "view": "explorer",
6.         "contents": "## 欢迎使用我的插件\n\n这是一个自定义的欢迎信息。\n\n[点击这里了解更多](https://example.com)\n\n[命令按钮](command:example.helloWorld)",
7.         "when": "explorerViewletVisible",
8.         "group": "navigation"
9.       }
10.     ]
11.   }
12. }

复制代码

• 点击这里了解更多: 这是一个超链接，点击后会在浏览器中打开指定的网址。
  
• 命令按钮: 这是一个命令按钮，点击后会实行插件中的 example.helloWorld 命令。
  

实现命令

我们还必要在插件代码中实现这个命令。打开 src/extension.ts 文件，添加以下代码：

1. import * as vscode from 'vscode';
3. export function activate(context: vscode.ExtensionContext) {
4.   let disposable = vscode.commands.registerCommand('example.helloWorld', () => {
5.     vscode.window.showInformationMessage('Hello World from example plugin!');
6.   });
8.   context.subscriptions.push(disposable);
9. }
11. export function deactivate() {}

复制代码

高级用法

在实际开发中，你可能希望根据差别的条件表现差别的接待信息，或将接待信息分组以便更好地管理。让我们进一步优化我们的插件，添加更多的条件和分组。
利用多个条件

你可以通过 when 表达式指定更复杂的条件。比如，我们希望在特定文件夹中表现特定的接待信息：

1. {
2.   "contributes": {
3.     "viewsWelcome": [
4.       {
5.         "view": "explorer",
6.         "contents": "## 欢迎使用我的插件\n\n这是一个在特定文件夹中显示的欢迎信息。",
7.         "when": "resourceFilename =~ /.vscode/",
8.         "group": "navigation"
9.       },
10.       {
11.         "view": "explorer",
12.         "contents": "## 欢迎使用我的插件\n\n这是一个默认的欢迎信息。",
13.         "when": "explorerViewletVisible",
14.         "group": "help"
15.       }
16.     ]
17.   }
18. }

复制代码

在这个例子中，我们添加了两个接待信息：

• 当文件名包含 .vscode 时表现的接待信息。
  
• 默认的接待信息，当资源管理器视图可见时表现。
  

添加分组

在 VSCode 的侧边栏中，接待信息可以分组表现，从而简化用户界面。你可以利用 group 字段来指定差别的分组：

1. {
2.   "contributes": {
3.     "viewsWelcome": [
4.       {
5.         "view": "explorer",
6.         "contents": "## 导航\n\n- [打开设置](command:workbench.action.openGlobalSettings)\n- [新建文件](command:explorer.newFile)",
7.         "when": "explorerViewletVisible",
8.         "group": "navigation"
9.       },
10.       {
11.         "view": "explorer",
12.         "contents": "## 帮助\n\n- [插件文档](https://example.com/docs)\n- [提交反馈](https://example.com/feedback)",
13.         "when": "explorerViewletVisible",
14.         "group": "help"
15.       }
16.     ]
17.   }
18. }

复制代码

在这个例子中，我们将接待信息分为两个组：

• navigation 组，包含导航相关的链接和命令。
  
• help 组，包含帮助和反馈相关的链接。
  

这样可以让用户更容易找到所需的信息。
动态内容

为了使接待信息更具动态性，我们可以在插件激活时，根据某些条件动态天生接待信息。比方，根据用户是否已经安装了某个依靠项来表现差别的信息。
首先，我们必要修改 package.json 中的 viewsWelcome 设置，以便在插件激活时动态设置接待信息。我们可以利用 viewsWelcome 作为占位符，然后在插件代码中动态修改它。

1. {
2.   "contributes": {
3.     "viewsWelcome": [
4.       {
5.         "view": "explorer",
6.         "contents": "## 动态欢迎信息占位符",
7.         "when": "explorerViewletVisible",
8.         "group": "navigation"
9.       }
10.     ]
11.   }
12. }

复制代码

然后，在 extension.ts 文件中，我们可以利用 VSCode 的 API 动态设置接待信息的内容：

1. import * as vscode from 'vscode';
3. export function activate(context: vscode.ExtensionContext) {
4.   const welcomeMessageKey = 'example.dynamicWelcomeMessage';
5.   
6.   // 动态设置欢迎信息
7.   vscode.commands.executeCommand('setContext', welcomeMessageKey, true);
9.   const welcomeMessage = "## 动态欢迎信息\n\n这是根据某些条件动态生成的欢迎信息。";
10.   vscode.workspace.getConfiguration().update(welcomeMessageKey, welcomeMessage, vscode.ConfigurationTarget.Global);
11.   
12.   let disposable = vscode.commands.registerCommand('example.helloWorld', () => {
13.     vscode.window.showInformationMessage('Hello World from example plugin!');
14.   });
16.   context.subscriptions.push(disposable);
17. }
19. export function deactivate() {}

复制代码

这里我们利用了 setContext 命令和 vscode.workspace.getConfiguration().update 方法来动态更新接待信息的内容。
总结

通过本教程，我们系统地先容了如安在 VSCode 插件中利用 contributes.viewsWelcome 来添加自定义的接待信息。从基础设置到高级用法，我们详细探讨了怎样根据差别条件表现信息、怎样分组管理以及怎样动态天生内容。这一功能为插件开发者提供了强盛的工具，提升了插件的用户体验和可用性。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。