在 Visual Studio Code 中使用 CodeFuse

简介: Visual Studio Code作为一款广受程序员欢迎的代码编辑器,在前端开发和各类脚本语言开发中占据主流地位,CodeFuse智能研发助手就专门为VS Code研发了插件,只要安装插件就可以使用CodeFuse提供的各种功能,下面我们看看如何在VS Code中使用CodeFuse插件呢?

s x.png

Visual Studio Code作为一款广受程序员欢迎的代码编辑器,在前端开发和各类脚本语言开发中占据主流地位,CodeFuse智能研发助手就专门为VS Code研发了插件,只要安装插件就可以使用CodeFuse提供的各种功能,下面我们看看如何在VS Code中使用CodeFuse插件呢?


CodeFuse官网:https://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 版,正式版敬请期待。

  1. CodeFuse 官网,下载 Visual Studio Code 插件安装包。
  2. 打开 VS Code,在编辑器左侧导航栏,单击 图标,再单击 图标,选择 Install from VSIX…
  3. 选中下载的 CodeFuse-x.x.x.vsix 文件,单击 Install
  4. 在 IDE 的左侧导航栏,单击 图标进入插件面板。
  5. 在插件面板,单击登录
  6. 在弹窗中,单击 Open,然后使用支付宝登录 CodeFuse 官网并申请试用。

    您可以从以下的两个申请入口中选择一个进行申请。
  • 申请入口一:在 CodeFuse 官网首页申请试用。
  • 申请入口二:在插件面板申请体验。
  1. 申请试用弹窗中,填写申请理由、阅读并勾选用户服务协议和隐私协议,单击提交申请
  2. 申请通过后,查看插件面板,如下图左侧所示即可开始使用。


使用插件

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[

显示上一个补全结果。


单行代码补全

  1. 在 IDE 编辑器中创建一个 Java 文件。
  2. 在 Java 文件中,CodeFuse 将能够根据代码上下文,为您键入的内容给出补全提示。例如在以下示例代码的 arr[i] = arr[j]; 后面按下回车键,插件将给出代码补全提示。
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 + \)主动触发补全
    }
}
  1. 如需接受代码补全建议,请按 Tab 键。


多行代码补全

  1. 插件还支持输入注释文本完成多行代码补全。例如键入以下注释内容并按下回车键。CodeFuse 会根据注释内容自动生成多行代码,生成的代码以灰色文本展示。
/* 
* 判断字符串是否为英文
*/
  1. 如需接受代码补全建议,请按 Tab 键。

    键入内容并按下回车键后,您可以在编辑器右下角看到内容生成的状态。
  • 内容正在生成中,将展示一个转圈的动效和 running 提示。
  • 内容成功生成后,系统将展示 CodeFuse 图标。


关闭自动代码补全

自动代码补全功能默认开启,支持在插件面板的设置中关闭此功能,以禁止自动触发单行或多行代码补全。

  • 单行代码补全:例如在编辑器中键入一个函数名称并按下回车键。
  • 多行代码补全:例如在编辑器中键入一段注释文本并按下回车键。

说明:关闭自动触发代码补全后,您仍然可以使用 Alt/Option + \ 快捷键手动触发代码补全。

解释代码

  1. 在 IDE 编辑器中创建一个 Java 文件。
  2. 在 Java 文件内选中需要解释的代码片段。
  3. 单击鼠标右键,选择 CodeFuse:解释代码,插件将在左侧的对话窗口中生成代码解释。


添加注释

说明:目前模型的生成注释功能对整个函数级别的支持较为完善,因此推荐您优先针对函数级别生成注释。

  1. 在 IDE 编辑器中创建一个 Java 文件。
  2. 在 Java 文件内选中需要添加注释的代码片段。
  3. 单击鼠标右键,选择 CodeFuse:添加注释,将在所选代码上自动生成注释。


生成单测

  1. 在 IDE 编辑器中创建一个 Java 文件。
  2. 在 Java 文件内选中需要生成单测的代码片段。例如为以下代码片段生成单测:
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;
    }
}
  1. 单击鼠标右键,选择 CodeFuse:生成单测,插件将在左侧的对话窗口中为选中的代码生成测试用例。


代码优化

基于大模型的代码理解能力和静态源码分析能力,CodeFuse 支持对选定的代码片段进行分析理解,提出优化和改进建议,还能直接基于改进建议形成代码补丁,以帮助您写出更好的代码。使用代码优化的步骤如下。

  1. 在 IDE 编辑器中创建一个 Java 文件,编写并选中一段需要优化的代码。
  2. 单击鼠标右键,选择 CodeFuse:代码优化,将在插件面板提供多个代码优化建议。
  3. 单击按照以上建议优化选中的代码,生成优化后的代码。
  4. 鼠标放置在生成的代码上,单击 查看代码变更 Diff。
  5. 在重构预览界面,勾选并单击变更内容(图示 ①),然后单击 Apply(图示 ②)即可替换代码。若单击 Discard,将退出代码 Diff 界面并放弃本次变更。


快捷方式

快捷键

Windows 按键

Mac 按键

说明

Tab

Tab

采纳代码建议。在编辑器中按下 Tab 键,即可使用插件生成的代码;按下左上角的 Esc 键则不接受代码建议。

Alt\

Option\

主动触发代码补全。在编辑器中按下此快捷键,可在光标处手动触发代码补全。

说明:关闭自动触发代码补全后,仍然可以使用此快捷键触发补全。

Alt]

Option]

显示下一个补全结果。

Alt[

Option[

显示上一个补全结果。

说明:CodeFuse 支持自定义快捷键。若遇到快捷键冲突,可按以下步骤修改快捷键。

  1. 在 CodeFuse 面板的快捷键区域,单击去设置
  2. 在快捷键页面的搜索框,输入 CodeFuse 搜索快捷键,然后选中快捷键,单击进行编辑。


快捷操作

快捷方式

说明

清空会话

帮助文档

跳转网页

在插件面板右上角,您可以有以下操作:

  • 单击  将一键清空当前会话下的所有内容。
  • 单击  可查看帮助文档。
  • 单击  将前往 CodeFuse 官网。

鼠标右键

选中代码片段,单击鼠标右键,可选择添加注释、解释代码、生成单测,以及代码优化。

快速复制、粘贴和展开代码


在插件面板,将鼠标放置在生成的内容右下角,您可以执行以下操作:

  • 单击 ,将选中的代码替换为生成的代码。具体操作步骤请参见优化代码
  • 单击 ,一键将代码粘贴到编辑器中的光标处。
  • 单击 ,一键复制代码。
  • 单击 ,一键展开代码,便于您阅读完整的代码。

快捷指令

插件面板底部支持使用以下两个快捷指令。

  • /Explain:解释选中的代码。
  • /Test:为选中的代码生成测试用例。

快捷指令的使用步骤如下:

在编辑器内,选中一段代码,单击 /Explain 或 /Test 发送内容。


反馈代码质量

您可以对 CodeFuse 所生成的内容进行评价,支持点赞和点踩操作。

  • :CodeFuse 生成的代码符合期望、生成的代码可直接使用等情况,您可以点赞评价。
  • :CodeFuse 生成的代码有明显漏洞或给出错误的回复等情况、您可以点踩反馈,以帮助我们持续优化模型的回复质量。
目录
相关文章
|
3月前
|
机器学习/深度学习 人工智能 前端开发
终端里的 AI 编程助手:OpenCode 使用指南
OpenCode 是开源的终端 AI 编码助手,支持 Claude、GPT-4 等模型,可在命令行完成代码编写、Bug 修复、项目重构。提供原生终端界面和上下文感知能力,适合全栈开发者和终端用户使用。
31904 10
|
4月前
|
移动开发 小程序 前端开发
小程序快速开发平台有哪些?
小程序开发并非“一刀切”,需结合技术储备、资金预算、时间规划及功能需求等多维度因素综合考量。以下为您详细拆解五种主流开发方案及其适用场景,助您精准匹配开发路径。
320 3
|
人工智能 运维 开发者
CodeFuse 开源官网上线啦~
CodeFuse是一个致力于开发大型代码语言模型以支持软件全生命周期的项目,涵盖设计、编码、测试等阶段,旨在提供创新的解决方案,优化开发者体验。其开源官网提供项目背景、相关AI开发项目展示、详细文档及贡献指南。团队已推出多个代码模型和开源工具,并在相关领域有学术成果和行业奖项。感兴趣者可通过GitHub、HuggingFace和魔搭社区主页联系或关注。
1361 0
CodeFuse 开源官网上线啦~
|
9月前
|
自然语言处理 安全 JavaScript
HarmonyOsNEXT【ArkUI超全解析】新手必看的方舟UI框架指南!
本文是HarmonyOS NEXT方舟UI框架新手指南,涵盖ArkTS开发核心知识点。从UI与组件基础概念到声明式开发优势,再到ArkTS代码实战,包括组件创建、属性设置、事件绑定等。通过实例解析自定义组件开发流程,提供避坑技巧与代码风格建议,助你快速掌握ArkUI框架精髓,轻松构建高效、美观的HarmonyOS应用界面。适合初学者及希望转型声明式开发的开发者学习参考。
|
人工智能 自然语言处理 IDE
CodeFuse IDE 0.7 版本发布,支持 Lint Error 智能改写
CodeFuse IDE 0.7 版本发布,支持 Lint Error 智能改写和 zsh 终端自然语言生成命令。它基于蚂蚁自研大模型和 OpenSumi 框架开发,提供代码编写建议、解释、单测生成等功能,提升开发效率。内置插件升级至 VS Code 1.88.1,未来将支持更多模型服务。下载地址:[GitHub](https://github.com/codefuse-ai/codefuse-ide/releases)。
477 4
|
人工智能 运维 IDE
CodeFuse 开源一周年,焕新出发!
CodeFuse 是蚂蚁集团推出的开源项目,旨在通过大型代码语言模型(Code LLMs)支持软件开发生命周期各阶段,包括设计、编码、测试、部署等。自2023年9月开源以来,CodeFuse 不断迭代,推出了一系列创新产品和技术,如 CodeFuse IDE、muAgent 2.0 框架及 CGE 和 Rodimus 模型。项目已在蚂蚁集团内部广泛应用,并在多个行业会议上展示分享。未来,CodeFuse 将继续深耕开源,推出更多创新产品,并加强社区互动与合作。欢迎访问 CodeFuse 官网和 GitHub 项目主页了解更多详情。
1182 0
CodeFuse 开源一周年,焕新出发!
|
运维 前端开发 算法
开源中国【专访】 | CodeFuse:让研发变得更简单
CodeFuse 是蚂蚁集团自研的代码生成大模型,旨在简化研发流程,提供智能建议和实时支持。它能自动生成代码、添加注释、生成测试用例并优化代码。通过创新的 Rodimus 架构,CodeFuse 实现了“小体量,大能量”,显著提升了资源利用效率。其特色功能“图生代码”可将设计图一键转换为代码,准确率超过90%,大幅提高前端开发效率。此外,CodeFuse 还引入了“Code Graph”概念,帮助 LLM 更好地理解仓库级代码结构,缩短任务处理时间。未来,CodeFuse 将致力于全生命周期的研发支持,涵盖需求分析、代码生成到运维监测,推动行业技术迭代与创新。
729 3
|
人工智能 自然语言处理 IDE
CodeFuse IDE 0.6 版本发布,支持编辑器诊断问题 AI 修复
CodeFuse IDE 是基于蚂蚁自研大模型和 OpenSumi 框架的 AI 编程助手,支持多语言,提供代码建议、解释、测试生成等,增强开发效率。最新版增加 AI 修复和智能补全功能,开源并支持 VS Code 插件生态。[了解更多](https://github.com/codefuse-ai/codefuse-ide)
804 0
|
存储 Java 测试技术
阿里巴巴java开发手册
这篇文章是关于阿里巴巴Java开发手册的整理,内容包括编程规约、异常日志、单元测试、安全规约、MySQL数据库使用以及工程结构等方面的详细规范和建议,旨在帮助开发者编写更加规范、高效和安全的代码。
|
人工智能 编解码 Java
用户投稿:这款 AI 编码工具 CodeFuse 很惊艳
在 AI 时代,总是会迅速出现很多惊艳的产品工具,这些效率工具,在很大程度上推动了科技的进步。特别是在编程领域,各类工具更是层出不穷,从 GitHub Copilot 到 CodeGeeX,再到通义灵码,有很多工具在不断涌现。今天,我想和大家分享一款我最近发现的、非常出色的编程辅助工具 —— CodeFuse。
843 0
用户投稿:这款 AI 编码工具 CodeFuse 很惊艳