AI助力，从零基础开发一个vscode插件

前言

在日常的代码开发中，总会遇到很多很小的知识点，想用却无从记起。尤其是在日常的前端开发，想要添加一个自己想要的css样式，却又想不起属性名，然后再css网站和笔记中搜索。当时想，如果能在IDE中内嵌一个AI编程助手就好了。

后来GitHub推出了Copilot，再后来腾讯云基于混元大模型，推出了腾讯云AI代码助手。在惊喜之余，更多的是想要体验一下腾讯云AI代码助手的功能。

开发需求

以前都是用IDEA做代码开发，但是IDEA太占内存，所以最近在朋友的推荐下，开始尝试使用vscode做前端开发。但是在开发中发现一个问题：vscode不和IDEA一样的是，在一个字符或者变量后面紧跟.log，无法自动补全为console.log。

我在IDEA可以自动补全console.log：

而在vscode中，却无法使用.log生成console.log，只能输入console.log，然后通过腾讯云AI编程助手的自动补全功能，补全括号和其中的变量部分：

vscode有着丰富的插件，同时也给开发者提供了独立开发插件的功能。虽然我对vscode插件开发没有涉猎过，但是这次想借着腾讯云AI代码助手的“东风”，看我是否可以从零基础，独自开发一个vscode的插件，实现IDEA中console.log的功能。

腾讯云AI代码助手

首先我们先在vscode中安装腾讯云AI助手的插件。在vscode插件市场中搜索腾讯云AI代码助手下载安装。

安装之后在下方就能看到AI助手的图标，点击即可使用。

腾讯云AI代码助手除了提供完善的自动补全代码、根据注释生成代码、代码解释、生成测试代码、转换代码语言、技术对话等能力，还内置了很多对话快捷指令，在对话输入框中输入 / 或 @ 就可调用快捷指令：

1. /clear：清空当前会话。
2. /comments：为所选的代码添加文档注释。
3. /newNotebook：创建一个新的 Jupyter 笔记本。
4. /explain：解释所选代码的工作原理。
5. /fix：针对所选代码中的问题提出修复方案。
6. /tests：为所选代码生成单元测试。
7. /nameVariable：变量命名。
8. @vscode：询问 VS Code。
9. @terminal：询问如何在终端中执行某些操作。
10. @workspace：询问您的工作空间，将自动引用当前代码。

插件开发环境准备

询问腾讯云AI代码助手创建vscode插件的流程：

根据给出的代码安装vocode插件的开发依赖和环境。在腾讯云AI代码助手给出的操作代码中，我们无需再通过选中，然后CTRL + C复制，在代码助手中提供了辩解的一键复制功能。

然后在terminal中执行代码，创建过程中根据提示操作，最后打包方式选择unbundled。

这样，vscode创建项目就创建完成。在src中只生成了一个extension.ts文件，猜测这就是vscode插件的代码文件。

选中代码，使用腾讯云AI代码助手的代码解释（Explain code），来解释一下代码。

从下图中可以看出，上面操作与在对话框中直接输入 @workpace /explain 的快捷指令效果相同。

通过腾讯云AI代码助手的代码解释，明白了extension.ts是如何定义插件的。对于开发者要做的就是在vscode.commands.registerCommand接口中，定义插件的逻辑代码即可。

const disposable = vscode.commands.registerCommand('test.helloWorld', () => {
   
   
		// 在这里编写插件的功能代码
		vscode.window.showInformationMessage('Hello World from aqi!');
	});

	context.subscriptions.push(disposable);
}

在给出的模板代码中，插件功能主题是vscode.window.showInformationMessage，在vscode中展示提示信息，提示信息我改成了“Hello World from aqi!”。

而test.helloWorld就是插件注册的命令，调用这个命令就可以执行插件的功能。同时，也需要在package.json声明这个命令。

其中title意味着在命令界面输入Hello World，就可以调用这个插件命令。

运行插件

第一次使用vscode，第一次开发vscode插件，还是要求助腾讯云AI代码助手：如何在vscode中运行自己开发的插件。

F5启动vscode的debug，进入Extension Development Host页面。