Make a chat plugin for Visual Studio Code

Do you use Visual Studio Code every day? According to WakeTime, a time tracking tool for program developers, developers around the world spent a total of 18 million hours in Visual Studio Code in 2020. This is a very staggering number. Have you ever thought about developing a Visual Studio Code plugin?

Introducing the Visual Studio Code Plugin

Visual Studio Code is a free and open source editor. By combining different plugins, you can complete the development of different application scenarios. There are over 30,000 plugins in Visual Studio Code covering programming languages, debugging/testing, data science, cloud computing, and more. Through the API provided by Visual Studio Code you can build different types of plugins. Visual Studio Code Plugin AP includes programming language extension API (for more information, please visit https://code.visualstudio.com/api/language-extensions/overview ) and application scenario extension API (for more information, please visit https://code.visualstudio.com/api/language-extensions/overview ) code.visualstudio.com/api/extension-guides/overview ).

How to develop a Visual Studio Code plugin

1. Environment installation
Visual Studio Code development requires Node.js, and Yeoman and Visual Studio Code are installed through npm to create templates. Here are the relevant sentences

 npm install -g yo generator-code

A small suggestion : The Visual Studio Code plugin supports both TypeScript and JavaScript development, and I recommend using TypeScript for development. So the friends also installed the TypeScript environment.

2. Create a simple Code plugin through Yoeman and execute the following command to create a Visual Studio Code project

 yo code

With command line feedback you can quickly create a project

Open the project folder via Visual Studio Code

Click Run and Debug to run the project, you can see that Visual Studio Code will open a new window, by pressing Ctrl+Shift+P (Windows / Linux) or CMD+Shift+P (macOS) Type Hello World, you can see the lower right corner show

Visual Studio Code plugin project main file

1. package.json

This is the basic configuration file, which contains the Visual Studio Code version supported by the plugin, as well as related command bindings.
2. src/extension.ts
This is the main logic file of the plugin. You can use it to respond to input commands, including Language Server calls and API calls such as configuration settings.

The following are some points and associations I drew based on these two documents, I hope they can help you understand better

Thinking and Architecture of the Chat Visual Studio Plugin

With the continuous development of technology, developers will be exposed to many new technologies and new application scenarios. At this time, many developers may choose to find relevant information on the Internet, but I am wondering if it would be easier for developers to find and understand information if there is a plug-in in Visual Studio Code. We've seen how Visual Studio Code plugins are built before, let's think about how to do the chat part? There is a very Bot Service in Microsoft Azure. Through the Bot Service combined with the text analysis in Language Studio, question and answer setting, entity association, etc., we can build our chat tool, and then use the Web method to embed it into the Visual Studio Code plugin. .

Build a simple question answering bot

1. Go to Azure Portal to create a text analysis service, remember to select Custom Question Answers
   
2. After the creation is successful, open Language Studio , log in to bind the service you just created, and you can use
   
3. Regarding the question and answer corpus, Language Studio can turn unstructured files into Q&A expectations in the custom question answering service. Here I use an MSDN public account about the Daper 1.7 update document and save it as a docx file as a corpus
4. In Language Studio, create a custom Q&A service
   

Create a new project and upload the docx file generated above to generate a Chinese corpus about Dapr Q&A

5. Select "Edit Knowledge Base" and select "Test" to see the effect
   

Note: You can identify and adjust answers to related questions

6. If you confirm it is correct, you can choose to deploy the knowledge base and publish your custom question answer
   
7. After successful deployment, you can click "Create Robot" to generate a question and answer robot based on Dapr knowledge points
   

The creation will jump to the Azure Portal. You only need to follow the prompts to enter the name of the question and answer robot, the associated region and the App Service, and the creation is successful.

8. Select the Q&A robot application you just created, and select "Test Chat in Web" to check whether the corpus and the robot are successfully bound
   

Add the Q&A bot to the Visual Studio Code plugin

There are many ways to deploy the Q&A robot created through Azure, the easiest way is to deploy through the Web, so the plug-in binds the Q&A robot just created through WebView.

1. Select the Q&A robot resource you just created from the Azure Portal, and select "Channel", select "Web Chat", and then select Default Web to get the Key and related codes
   
2. Modify the code in the src/extension.ts file in the previously created VSCode project and replace the following code

 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);

3. We are running our plugin project, we can start our chat plugin
   

postscript

It is not difficult to build a Visual Studio Code plug-in. The key is to have a lot of technical knowledge. I hope you can use more creativity to create more interesting plug-ins. Let me tell you, I will improve the development of this technical knowledge-based question and answer robot plug-in, so that more developers can communicate through this plug-in when they encounter problems and learn skills.

related resources

1. To apply for free Azure resources, please visit this link
   https://azure.microsoft.com/en-us/free/?ocid=AID3042760
2. To request free Azure resources for the student version, please visit this link
   https://aka.ms/studentgetazure?ocid=AID3042760?ocid=AID3042760
3. Visual Studio Code API related documentation, please visit this link
   https://code.visualstudio.com/api?ocid=AID3042760?ocid=AID3042760
4. For language studio related knowledge, please visit this link
   https://docs.microsoft.com/en-us/azure/cognitiveservices/language-service/language-studio?ocid=AID3042760
5. To learn about Azure Bot Service, please visit this link
   https://docs.microsoft.com/en-us/azure/botservice/?view=azure-bot-service-4.0?ocid=AID3042760