共计 3075 个字符，预计需要花费 8 分钟才能阅读完成。
你每天有在用 Visual Studio Code 吗？依据面向程序开发人员的工夫跟踪工具 WakeTime 统计，在 2020 年寰球开发者应用 Visual Studio Code 的工夫合共 1800 万小时。这是一个十分惊人的数字。你有想过开发一个 Visual Studio Code 插件吗？
Visual Studio Code 插件介绍
Visual Studio Code 是一个收费，开源的编辑器，通过联合不同的插件，你能够实现不同利用场景的开发。在 Visual Studio Code 中有超过 3 万个插件, 波及编程语言, 调试 / 测试, 数据迷信, 云计算等。通过 Visual Studio Code 提供的 API 你能够构建不同类型的插件。Visual Studio Code 插件 AP 包含了编程语言扩大 API (理解更多能够拜访 https://code.visualstudio.com…) 和 利用场景扩大 API (理解更多能够拜访 https://code.visualstudio.com…)。
如何开发一个 Visual Studio Code 插件
1. 环境装置
Visual Studio Code 开发须要 Node.js , 并通过 npm 装置好 Yeoman 和 Visual Studio Code 创立模版。以下是相干语句
npm install -g yo generator-code 一个小倡议 ：Visual Studio Code 插件反对用 TypeScript 和 JavaScript 开发，我举荐应用 TypeScript 去进行开发。所以小伙伴也把 TypeScript 的环境装置好。
2. 通过 Yoeman 创立一个简略的 Code 插件，执行以下命令创立一个 Visual Studio Code 我的项目
yo code 通过命令行的反馈你能够疾速创立一个我的项目
通过 Visual Studio Code 关上我的项目文件夹
点击 Run and Debug 运行这个我的项目，能够看到 Visual Studio Code 会新开一个窗口，通过按 Ctrl+Shift+P (Windows / Linux) 或 CMD+ Shift + P (macOS) 输出 Hello World，能够看到右下角的显示
Visual Studio Code 插件我的项目次要文件
1.package.json
这是根本配置文件，蕴含了开发该插件反对的 Visual Studio Code 版本，以及相干命令绑定等。
2.src/extension.ts
这是插件最次要的逻辑文件，你能够通过它对输出命令进行响应, 包含了 Language Server 的调用以及配置设定等 API 的调用。
以下是我画的基于这两个文件的一些要点和关联，心愿能够帮忙大家更好了解
聊天 Visual Studio 插件的思考和架构
技术一直倒退，开发人员会接触很多新的技术，新的利用场景。这个时候可能很多的开发者会抉择在互联网上查找相干的信息，但我在想如果有一个插件放在 Visual Studio Code 是否更不便开发人员去查找和理解信息。咱们之前理解了 Visual Studio Code 插件的构建形式，接下来咱们想想如何做聊天局部？在 Microsoft Azure 就有十分的 Bot Service，通过 Bot Service 联合 Language Studio 中的文本剖析，问答设定，实体关联等就能够构建咱们的聊天工具，而后利用 Web 的形式嵌入到 Visual Studio Code 插件中就能够了。
搭建一个简略的问答机器人
- 去 Azure Portal 创立一个文本剖析服务，记得抉择自定义问题解答
- 创立胜利后，关上 Language Studio , 登陆绑定方才创立的服务，就能够应用
- 对于问答语料，Language Studio 能够在自定义问题解答服务外面把非构造文件，变成问答的意料，在这里我用一个 MSDN 公众号上对于 Daper 1.7 更新的文档保留为 docx 文件作为语料
- 在 Language Studio 中，创立一个自定义问题解答服务
创立一个新我的项目，并上传下面生成的 docx 文件，生成对于 Dapr 问答的中文语料
- 抉择“编辑知识库”在抉择“测试”，能够看看成果
留神：你能够对相干问题的答案进行甄别和调整
- 如果你确认无误后，就能够抉择部署知识库，公布你的自定义问题解答
- 部署胜利后，你就能够点击“创立机器人”生成基于 Dapr 知识点的问答机器人了
创立会跳转到 Azure Portal 你只须要依照提醒把问答机器人的名字，关联的区域以及 App Service 就创立胜利了
- 抉择刚创立好的问答机器人利用，抉择在“Web 中测试聊天”检查一下语料和机器人是否绑定胜利
把问答机器人加到 Visual Studio Code 插件中
通过 Azure 创立的问答机器人有多种部署形式，最简略的形式是通过 Web 的形式部署，所以插件是通过 WebView 的形式绑定方才创立的问答机器人。
- 从 Azure Portal 抉择方才创立的问答机器人资源，并抉择“渠道”抉择“Web Chat”再抉择 Default Web 获取 Key 和相干代码
- 在之前创立好的 VSCode 我的项目中批改 src/extension.ts 文件中的代码，替换一下如下代码
let disposable = vscode.commands.registerCommand('chatbotdemo.helloWorld', () => {
const panel = vscode.window.createWebviewPanel("chatRoom", "VSCode Chat Room", vscode.ViewColumn.Two, {
enableScripts: true,
retainContextWhenHidden: true,
});
panel.webview.html = `<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="替换通过 azure 上获取的链接和相干 key" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>`;
});
context.subscriptions.push(disposable);- 咱们在运行一下咱们的插件我的项目，就能够启动咱们的聊天插件了
后记
构建一个 Visual Studio Code 的插件并不难，要害要有多方面的技术常识，心愿小伙伴能施展更多的创意创立更多好玩的插件。和大家走漏一下，我会欠缺这个基于技术常识问答机器人插件的开发，让更多的开发者遇到问题和学习技能的时候能通过该插件进行沟通。
相干资源
- 申请收费的 Azure 资源，请拜访该链接
https://azure.microsoft.com/z… - 申请学生版本的收费 Azure 资源，请拜访该链接
https://aka.ms/studentgetazur… - Visual Studio Code API 相干文档，请拜访该链接
https://code.visualstudio.com… - 对于 Language Studio 的相干常识，请拜访该链接
https://docs.microsoft.com/zh… - 理解 Azure Bot Service 的相干常识，请拜访该链接
https://docs.microsoft.com/en…
