前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >腾讯云 AI 代码助手最佳实践 - VSCode 版

腾讯云 AI 代码助手最佳实践 - VSCode 版

原创
作者头像
Cloud Studio
发布2023-08-29 17:42:53
3.1K2
发布2023-08-29 17:42:53
举报
文章被收录于专栏:Cloud StudioCloud Studio

一、前言

腾讯云 AI 代码助手根据开发者使用 IDE 的不同,会提供对应 IDE 的插件,并结合大语言模型提升研发效率。目前已经分别提供了 Intellij IDEA 和 VSCode 两款 IDE 的腾讯云 AI 助手插件。如果你是初次使用,可以使用以下网络地址下载并安装使用:

腾讯云 AI 代码助手 VSCode 插件

腾讯云 AI 代码助手 Intellij IDEA 插件

上述插件的详细使用手册:产品使用手册

腾讯云 AI 代码助手目前主要提供两类功能:AI 助手对话功能和代码补全功能。

其中,AI 助手对话功能是可以使用自然语言与 AI 助手多回合对话,AI 也会结合对话历史给出答复。你可以通过 AI 助手对话功能,咨询一些与编程相关的技术问题,例如”帮我一段 xxx 代码“、”解释 xxxx 正则表达式“、“如何使用 Spring Boot 实现一个 Web 应用” 等等。

代码补全功能是该插件中开发者使用频率最高的功能,相对 AI 助手对话功能而言,代码补全是自动触发,而对话是开发者主动的行为。一般情况下,IDE 自身也会基于 LSP(语言服务协议)提供了一些基本的代码补全能力,而腾讯 AI 代码助手提供的代码补全能力是一种额外的补充,且更为智能。

接下来,和大家分享一下腾讯云 AI 代码助手 VSCode 插件版的一些最佳实践,以及以一些可能遇到的问题。

二、初次安装使用

1. 安装步骤

初次使用,需要使用上面的链接下载对应的插件包,然后手动安装离线插件包,如下图所示:

从你本地文件系统选择前面下载好的离线插件包即可。由于插件部分能力使用到了一些 VSCode 实验 API,所以安装插件后会提示需要“初始化并重启 VSCode”,如下图所示:

请点击“初始化并重启 VSCode”按钮。

2. 注意事项
  • 如果不点击“初始化并重启 VSCode” 按钮,AI 助手对话功能将不可用;
  • 如果 VSCode 版本低于 1.79.0,AI 助手对话功能将不可用。

三、插件如何登录

1. 登录方式

插件的账号体系使用的是腾讯云的账号体系,目前支持两种登录方式:腾讯云扫码登录和 API 秘钥登录,如下图所示:

建议使用腾讯云扫码登录,更安全简单,且登录后可以保持 60 天内无需再次登录。

2. 登录步骤

2.1 点击”腾讯云登录“按钮

2.2 选择 iOA 快速登录

目前,对公司内部腾讯云子账号默认开通了白名单,所以推荐选择 iOA 登录方式进行登录,如下图所示:

2.3 根据浏览器提示“打开Visual Studio Code”

在登录成功后,腾讯云 OAuth 登录流程会回调插件,先选择点击“打开Visual Studio Code”按钮,如下图所示:

2.4 编辑器弹出框提示是否允许打开此 URI,点击“打开”

四、代码补全功能

1. 如何禁用和启用补全功能

点击状态栏的插件小图标,可以启用或者禁用插件代码补全功能,如下图所示:

禁用的时候,可以全局禁用,也可以选择对特定的代码语言进行禁用,如下图所示:

2. 代码补全触发时机

我们一直在优化代码补全的触发时机,直觉上可能会认为插件在每次输入的时候自动触发补全。其实不是,插件会根据光标所在位置合理选择合适的位置进行代码补全,比如插件当光标位置在代码行尾附近位置,或者换行的时候才会触发代码补全。

2.1 行尾右小括号前面位置触发补全:

2.2 行尾右大括号前面位置触发补全:

2.3 代码行尾位置触发补全:

2.4 代码换行位置触发补全:

3. 代码补全内容的粒度

实际使用过程中,我们可以发现插件补全内容的粒度在不同的代码位置是不一样的。我们实验发现,并不是补全的内容越多越好(可能补全的越多,错得越多,而且速度也会变慢,补全内容的长度与补全所需要的时间成正比),在不同代码位置,补全的内容的多少(粒度)是不一样的。比如在一个空的代码块中,插件则按代码块粒度进行补全;在非空代码块中,大部分情况按单行粒度进行补全;在类定义块中,或者顶级块中,就算块内不为空,也按代码块粒度进行补全。

3.1 光标在方法或者函数体内,且体内为空,按块补全:

3.2 光标在 try 语句内,且体内为空,按块补全:

3.3 光标在 try 语句内,且体内不为空,则按单行补全:

3.4 光标在方法或者函数体内,且体内不为空,按单行补全:

3.5 光标在类定义体内,按块补全:

3.6 光标在一行代码尾部范围,则按单行补全:

4. 如何提升代码补全结果的正确性

代码补全结果的正确性是相对当前开发者来说的,对插件来说可能是正确合理的,但是对当前开发者来说可能不正确、不合理。当遇到不合预期的补全结果的时候,建议给我们反馈问题,让我们可以针对这些案例进一步优化。

除此之外,这里也有一些最佳实践,可以帮助开发者提升代码补全结果的正确性。为了方便大家举一反三,可以把代码补全功能,想象成一个隐藏在背后的程序员:

● 他的眼睛几乎只能看到当前光标之前的代码(代码行数和字符数也是有一定限制的);

● 具有较强的逻辑推理和模仿能力;

● 他只能接着当前光标位置继续完成后续的代码。

所以,从上面三个特性就能很容易推出可以通过使用光标之前的代码“引导”他帮忙我们写出更为正确的后续代码。引导的方式有很多种,如下所示:

1. 通过代码注释直接告诉他,我想要做什么,比如实现一个冒泡排序;

2. 通过已有平级同类型代码,引导出可能的补全内容,比如用户模块的 CRUD 功能实现,通过实现 CRU,引导他模仿 CRU 的实现方式,实现 D 功能;

3. 让自己的代码”有迹可循“,比如代码风格统一、变量和方法等命名具体且有规律、代码结构具有规律。他很擅长挖掘已有代码潜在的规律,然后去模仿推导。

4.1 通过代码注释引导补全

4.2 通过已有平级同类型代码引导补全

4.3 通过潜在代码规律引导补全

5. 代码补全支持的开发语言

为了确保代码补全质量,目前代码补全只放开了部分开发语言,未来根据情况逐步放开更多开发语言。目前支持的开发语言:c、cpp、css、go、html、java、javascript、javascriptreact、typescript、typescriptreact、python、sql。

五、 AI 助手对话功能

1、 AI 助手对话面板

AI 助手对话面板包括:左侧对话面板和编辑器内联对话面板。左侧对话面板,和传统的聊天软件类似,只是开发者只能与 AI 助手进行对话,并且只能咨询一些有关编程技术的问题。

相较于编辑器内联对话面板,左侧对话面板更适合咨询一些比较泛的问题,并且问题答案的不确定很大,需要开发者多回合沟通才能得到最终答案,并且答案不一定有代码,或者是代码 + 文字说明等各种各样的形式。至于答案里面的代码部分是否需要复制或者插入到代码文件中,操作相对灵活自由,开发者自由选择。

而编辑器内联对话面板是与选中的代码进行对话,要求 AI 助手对选中的代码做处理。处理的方式可以通过自然语言交互。对选中的代码处理后的结果,是明确要求开发者选择是接受,还是取消。左侧对话面板和编辑器内联对话面板的概览图如下所示:

2、 编程相关技术咨询

我们在左侧对话面板的输入框中咨询“基于 Spring Boot 实现一个简单应用”,回车发送后(Shift + 回车是文本换行),AI 助手的回答如下图所示:

3、 对轮对话逼近最终答案

上一轮,我们在左侧对话面板的输入中下咨询了“基于 Spring Boot 实现一个简单应用”,并得到了回答。接下来,我们可以接着上面的对话上下文,继续更多的对话。我们会发现 AI 助手能记住我们对话的上下文(目前最多只能记住五条对话记录),如下图所示:

4、 业务代码辅助生成

当遇到一些偏算法的业务代码实现时,传统的方式是通过网上检索方式,从一堆结果中筛选出想要的代码,然后做归纳总结,而现在我们可以直接向 AI 助手咨询。

4.1 正则表达式验证邮箱

咨询“正则表达式验证邮箱”的算法,AI 助手给出代码的同时自动帮我们做好了归纳总结,如下图所示:

4.2 为函数取名字

4.3 优化代码

4.4 生成单元测试

5、 相关问题自动推荐

当我们咨询完一个问题后,AI 助手回答完的同时会主动推荐几个相关的问题给我们,它会预测我们接下来最有可能想要咨询的问题,如果推测正确,我们就无需额外输入,点击推荐的问题项,即可继续发问咨询,如下图所示(目前推荐三个问题):

6、 常用斜杠命令一键咨询

斜杠命令是 VSCode 编辑器对这种对话交互提供的一种便捷操作,它把一些经常会咨询的问题,抽象为一个斜杠命令,使用斜杠命令可以快速达成某一目的,而不需要输入自然语言描述。比如我们想让 AI 助手解释一段代码,可以在右边编辑器中选中需要被解释的代码,然后再在左侧对话面板中选择解释代码对应的斜杠命令即可,如下图所示:

从上图可以看出,我们可以通过输入“/”字符快速唤出斜杠命令,然后通过模糊匹配快速匹配到想要的斜杠命令。每个斜杠命令都有对应的名称和描述。

7、 编辑器内联对话面板

对于左侧对话面板,可以将编辑器中选择的代码,携带到对话的上下文中,从可以对选择的代码执行一些列自然语言的指令或者斜杠命令。我们可以直接使用编辑器内联对话面板(CMD+i 或者 Windows 系统下 control + i 唤起编辑器内联对话面板),直接与选中的代码进行对话。比如我们可以先选中一个代码区域,然后输入自然语言命令或者选择斜杠命令对选中的代码进行加工处理。如下图所示:

选择上图代码,并选择 “/注释” 这个斜杠命令,咨询 AI 助手以后得到结果如下图所示:

使用局部 DIFF 编辑器显示处理前后的变化,我们可以选择接受、放弃、重新处理等一些操作。

六、当插件不工作的时候,如何排查问题

1. 鼠标悬浮在转态栏对应的插件小图标上,可以查看 tips,如下图所示:

2. 切换到插件对应的日志输出,查看有没有有用的日志信息,如下图所示:

3. 找到插件的详情页面,查看插件激活状态,如下图所示:

七、 如何反馈问题

1. 异步反馈方式

在 AI 聊天对话面板中提供了一个“产品反馈”链接,如下图所示:

2. 同步反馈方式

产品讨论群:小黑板

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、前言
  • 二、初次安装使用
    • 1. 安装步骤
      • 2. 注意事项
      • 三、插件如何登录
        • 1. 登录方式
          • 2. 登录步骤
          • 四、代码补全功能
            • 1. 如何禁用和启用补全功能
              • 2. 代码补全触发时机
                • 3. 代码补全内容的粒度
                  • 4. 如何提升代码补全结果的正确性
                    • 5. 代码补全支持的开发语言
                    • 五、 AI 助手对话功能
                      • 1、 AI 助手对话面板
                        • 2、 编程相关技术咨询
                          • 3、 对轮对话逼近最终答案
                            • 4、 业务代码辅助生成
                              • 5、 相关问题自动推荐
                                • 6、 常用斜杠命令一键咨询
                                  • 7、 编辑器内联对话面板
                                  • 六、当插件不工作的时候,如何排查问题
                                    • 1. 鼠标悬浮在转态栏对应的插件小图标上,可以查看 tips,如下图所示:
                                      • 2. 切换到插件对应的日志输出,查看有没有有用的日志信息,如下图所示:
                                        • 3. 找到插件的详情页面,查看插件激活状态,如下图所示:
                                        • 七、 如何反馈问题
                                          • 1. 异步反馈方式
                                            • 2. 同步反馈方式
                                            相关产品与服务
                                            Cloud Studio(云端 IDE)
                                            Cloud Studio(云端 IDE)是基于浏览器的集成式开发环境,为开发者提供了一个稳定的云端工作站。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器即可使用。
                                            领券
                                            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
                                            http://www.vxiaotou.com