HBuilder X 中使用 CodeGeeX

HBuilder X 是一个通用的前端开发工具，它是 uni-app 的官方推荐开发工具，为uni-app做了特别的强化。uni-app 是一个只使用 Vue.js 即可开发所有前端应用的框架。开发者只需编写一套代码，即可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

下载HBuilder X：

https://www.dcloud.io/hbuilderx.html

1、安装 CodeGeeX 插件

智谱AI 于 2023年11月22日首次发布了智谱HBuilder X 中的 CodeGeeX 插件。通过“工具-插件安装”菜单，进入插件市场，搜索 CodeGeeX，可找到相应的插件，点“下载插件并导入 HBuilderX”后确认安装即可。需要登录，可使用邮箱注册后登录。

2、使用

CodeGeeX 插件基于 CodeGeeX 代码生成模型，提供了包括代码生成与补全、代码翻译、注释生成、代码解释等多种功能。CodeGeeX 插件能够在编辑器中自动生成或补全代码，生成的代码会以灰色显示，按下 Tab 键即可插入当前位置，Esc 键撤销。注释生成功能则可以自动为代码添加注释，支持中文和英文两种语言。CodeGeeX 还支持代码翻译功能，可以将选中的代码片段翻译成其他语言，同时，插件支持直接的问答交互方式。

2.1、加载 CodeGeeX 插件视图

通过菜单加载：视图 – 插件扩展视图 – CodeGeeX

2.2、登录

开始使用前需要进行登录，会跳转至浏览器登录，可邮箱注册后登录，也可使用 HBuilderX 的登录账号。

登录后，插件视图如下图所示。

2.3、代码解释、注释生成

选择代码段，在插件视图中会显示选择的代码，此时，在对话框中，可以通过 / 来下达指令，/explain 是代码解释，/comment 是为代码添加注释。

代码解释和添加注释也可以通过右键菜单完成操作。

2.4、代码生成

通过书写注释描述，插件会自动根据上下文预测代码并以灰色字体呈现，按 Tab 键接受。修改代码时也会进行预测，根据上下文补全代码。

2.5、问答交互

可以直接以对话的方式问答，相当于内部集成了一个 AIGC 的大模型应用。可以跟他进行普通的对话。如：你是谁，可以画一幅山水画吗？

当然，它主要的功能还是辅助编码，并提供与代码文件良好的对接方式。

如问：在 vue2 中完成加载显示摄像头，添加一个按钮点击后进行截图的代码。

得到回复后，代码块可直接“插入”当前位置或“复制”。如果选择部分代码这里有点问题，右键和 Ctrl+C 都无法复制，但可以使用鼠标直接拖到合适的位置。

3、小结

AI的发展会改变许多东西的形态，我们可以做的是多去使用，更熟练地跟AI打交道，更有效地向AI提问来解决问题。CodeGeeX 插件相当于内部集成了一个智谱清言，单这一点就挺值得一用的。