Visual Studio Code作为一款广受程序员欢迎的代码编辑器,在前端开发和各类脚本语言开发中占据主流地位,CodeFuse智能研发助手就专门为VS Code研发了插件,只要安装插件就可以使用CodeFuse提供的各种功能,下面我们看看如何在VS Code中使用CodeFuse插件呢?
CodeFuse官网:codefuse.alipay.com/
CodeFuse 目前支持在 10 款 IDE 中安装,包括支付宝小程序云云端研发、Visual Studio Code(下文简称为 VS Code),以及 JetBrains 系列的 8 款 IDE,分别是 IntelliJ IDEA、PyCharm、WebStorm、GoLand、CLion、DataGrip、PhpStorm 和 RubyMine。本文将介绍如何在本地 VS Code 中安装和使用 CodeFuse 插件。
说明 :目前仅支持在 VS Code 1.75.0 以上的版本中安装 CodeFuse 插件。
前提条件
安装 CodeFuse 插件之前,您需要下载并安装 Visual Studio Code。
安装插件
目前 CodeFuse 插件在 VS Code 中仅支持下载插件安装包进行安装。完成安装后,您需要完成登录并通过申请才能使用插件。安装插件的步骤如下。
说明:目前官网提供下载的 CodeFuse 插件安装包为 Beta 版,正式版敬请期待。
- 在 CodeFuse 官网,下载 Visual Studio Code 插件安装包。
- 打开 VS Code,在编辑器左侧导航栏,单击
图标,再单击
图标,选择 Install from VSIX... 。
- 选中下载的 CodeFuse-x.x.x.vsix 文件,单击 Install 。
- 在 IDE 的左侧导航栏,单击
图标进入插件面板。
- 在插件面板,单击登录 。
- 在弹窗中,单击 Open ,然后使用支付宝登录 CodeFuse 官网并申请试用。
您可以从以下的两个申请入口中选择一个进行申请。
-
- 申请入口一:在 CodeFuse 官网首页申请试用。
- 申请入口二:在插件面板申请体验。
- 申请入口一:在 CodeFuse 官网首页申请试用。
- 在申请试用 弹窗中,填写申请理由、阅读并勾选用户服务协议和隐私协议,单击提交申请 。**
** - 申请通过后,查看插件面板,如下图左侧所示即可开始使用。
使用插件
CodeFuse 插件支持以下两种使用模式,对应模式支持的操作如下。
使用模式 | 支持操作 |
---|---|
IDE 代码编辑区 | - 键入注释文本并回车补全代码 |
鼠标右键 | - 选中代码后,单击鼠标右键选择添加注释 |
- 选中代码后,单击鼠标右键选择解释代码
- 选中代码后,单击鼠标右键选择生成单测
- 选中代码后,单击鼠标右键选择代码优化 |
CodeFuse 插件可以为多种编程语言和各种框架提供代码建议,其在 Python 和 Java 中表现尤为突出。接下来,我们将以 Java 为例,在 VS Code 中演示如何使用该插件。
代码补全
代码补全功能基于海量数据提供实时地代码补全服务,包括行内补全(单行补全)和片段补全(多行补全)。目前该功能支持 Java、Python、TypeScript、JavaScript、Go 等 5 种主流编程语言的多行和单行代码补全,以及其他 40 种编程语言的单行代码补全。
目前 CodeFuse 支持自动代码补全和手动代码补全两种触发方式。关闭自动代码补全后,您仍然可以使用快捷键(Alt/Option + \)手动触发代码补全。代码补全功能还支持切换多个补全结果,目前最多支持切换 2 个结果。您可以通过以下快捷键来切换补全结果。
Windows 按键 | Mac 按键 | 说明 |
---|---|---|
Alt``] |
Option``] |
显示下一个补全结果。 |
Alt``[ |
Option``[ |
显示上一个补全结果。 |
单行代码补全
- 在 IDE 编辑器中创建一个 Java 文件。
- 在 Java 文件中,CodeFuse 将能够根据代码上下文,为您键入的内容给出补全提示。例如在以下示例代码的
arr[i] = arr[j];
后面按下回车键,插件将给出代码补全提示。
arduino
public class BubbleSort {
public static void bubbleSort(int[] arr) {
for (int i = 0; i < arr.length - 1; i++) {
for (int j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
swap(arr, j, j + 1);
}
}
}
}
private static void swap(int[] arr, int i, int j) {
int temp = arr[i];
arr[i] = arr[j]; ## 在此处按下回车触发补全,也可使用快捷键(Alt/Option + \)主动触发补全
}
}
- 如需接受代码补全建议,请按
Tab
键。
多行代码补全
- 插件还支持输入注释文本完成多行代码补全。例如键入以下注释内容并按下回车键。CodeFuse 会根据注释内容自动生成多行代码,生成的代码以灰色文本展示。
arduino
/*
* 判断字符串是否为英文
*/
- 如需接受代码补全建议,请按
Tab
键。
键入内容并按下回车键后,您可以在编辑器右下角看到内容生成的状态。
-
- 内容正在生成中,将展示一个转圈的动效和 running 提示。
- 内容成功生成后,系统将展示 CodeFuse 图标。
关闭自动代码补全
自动代码补全功能默认开启,支持在插件面板的设置中关闭此功能,以禁止自动触发单行或多行代码补全。
- 单行代码补全:例如在编辑器中键入一个函数名称并按下回车键。
- 多行代码补全:例如在编辑器中键入一段注释文本并按下回车键。
说明 :关闭自动触发代码补全后,您仍然可以使用 *Alt/Option + * 快捷键手动触发代码补全。
解释代码
- 在 IDE 编辑器中创建一个 Java 文件。
- 在 Java 文件内选中需要解释的代码片段。
- 单击鼠标右键,选择 CodeFuse:解释代码 ,插件将在左侧的对话窗口中生成代码解释。
添加注释
说明:目前模型的生成注释功能对整个函数级别的支持较为完善,因此推荐您优先针对函数级别生成注释。
- 在 IDE 编辑器中创建一个 Java 文件。
- 在 Java 文件内选中需要添加注释的代码片段。
- 单击鼠标右键,选择 CodeFuse:添加注释 ,将在所选代码上自动生成注释。
生成单测
- 在 IDE 编辑器中创建一个 Java 文件。
- 在 Java 文件内选中需要生成单测的代码片段。例如为以下代码片段生成单测:
arduino
public class Conversion {
public static byte binaryToByte(final boolean[] src, final int srcPos, final byte dstInit, final int dstPos,
final int nBools) {
if (src.length == 0 && srcPos == 0 || 0 == nBools) {
return dstInit;
}
if (nBools - 1 + dstPos >= 8) {
throw new IllegalArgumentException("nBools-1+dstPos is greater or equal to than 8");
}
byte out = dstInit;
for (int i = 0; i < nBools; i++) {
final int shift = i + dstPos;
final int bits = (src[i + srcPos] ? 1 : 0) << shift;
final int mask = 0x1 << shift;
out = (byte) ((out & ~mask) | bits);
}
return out;
}
}
- 单击鼠标右键,选择 CodeFuse:生成单测 ,插件将在左侧的对话窗口中为选中的代码生成测试用例。
代码优化
基于大模型的代码理解能力和静态源码分析能力,CodeFuse 支持对选定的代码片段进行分析理解,提出优化和改进建议,还能直接基于改进建议形成代码补丁,以帮助您写出更好的代码。使用代码优化的步骤如下。
- 在 IDE 编辑器中创建一个 Java 文件,编写并选中一段需要优化的代码。
- 单击鼠标右键,选择 CodeFuse:代码优化 ,将在插件面板提供多个代码优化建议。
- 单击按照以上建议优化选中的代码 ,生成优化后的代码。
- 鼠标放置在生成的代码上,单击
查看代码变更 Diff。
- 在重构预览界面,勾选并单击 变更内容(图示 ①),然后单击 Apply (图示 ②)即可替换代码。若单击 Discard ,将退出代码 Diff 界面并放弃本次变更。
快捷方式
快捷键
Windows 按键 | Mac 按键 | 说明 |
---|---|---|
Tab |
Tab |
采纳代码建议。在编辑器中按下 Tab 键,即可使用插件生成的代码;按下左上角的 Esc 键则不接受代码建议。 |
`Alt``` | `Option``` | 主动触发代码补全 。在编辑器中按下此快捷键,可在光标处手动触发代码补全。说明:关闭自动触发代码补全后,仍然可以使用此快捷键触发补全。 |
Alt``] |
Option``] |
显示下一个补全结果。 |
Alt``[ |
Option``[ |
显示上一个补全结果。 |
说明:CodeFuse 支持自定义快捷键。若遇到快捷键冲突,可按以下步骤修改快捷键。
- 在 CodeFuse 面板的快捷键区域,单击去设置 。
- 在快捷键页面的搜索框,输入 CodeFuse 搜索快捷键,然后选中快捷键,单击
进行编辑。
快捷操作
快捷方式 | 说明 |
---|---|
清空会话帮助文档跳转网页 | ![]() |
- 单击
可查看帮助文档。
- 单击
将前往 CodeFuse 官网。 | | 鼠标右键 | 选中代码片段,单击鼠标右键,可选择添加注释、解释代码、生成单测,以及代码优化。
| | 快速复制、粘贴和展开代码 |
在插件面板,将鼠标放置在生成的内容右下角,您可以执行以下操作:- 单击
,将选中的代码替换为生成的代码。具体操作步骤请参见优化代码。
- 单击
,一键将代码粘贴到编辑器中的光标处。
- 单击
,一键复制代码。
- 单击
,一键展开代码,便于您阅读完整的代码。 | | 快捷指令 | 插件面板底部支持使用以下两个快捷指令。-
/Explain
:解释选中的代码。 /Test
:为选中的代码生成测试用例。快捷指令的使用步骤如下:在编辑器内,选中一段代码,单击/Explain
或/Test
发送内容。 |
反馈代码质量
您可以对 CodeFuse 所生成的内容进行评价,支持点赞和点踩操作。
- 赞:CodeFuse 生成的代码符合期望、生成的代码可直接使用等情况,您可以点赞评价。
- 踩:CodeFuse 生成的代码有明显漏洞或给出错误的回复等情况、您可以点踩反馈,以帮助我们持续优化模型的回复质量。