DevEco Studio 内置的AI编程辅助工具（二）

最新推荐文章于 2025-12-15 19:53:31 发布

原创最新推荐文章于 2025-12-15 19:53:31 发布 · 1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#AI编程 #鸿蒙 #华为

本文同步发表于我的微信公众号，微信搜索程语新视界即可关注，每个工作日都有文章更新

CodeGenie是集成在DevEco Studio中的AI智能编程助手，基于华为盘古大模型，提供智能代码生成、代码续写、代码优化等功能。主要包含三大核心功能：自然语言代码生成、编辑区代码生成（Inline Edit）、编辑区代码续写。

二、自然语言代码生成

2.1 两种生成模式

模式一：提问问答模式（标准代码生成）

功能：根据自然语言描述生成独立的代码片段
输入方式：在对话框输入代码需求描述
输出：生成符合要求的完整代码段
操作步骤：
1. 在对话区域输入代码需求描述
2. 点击发送按钮（或按Enter键）
3. 自动生成代码
4. 可选择一键复制或一键插入到编辑区

模式二：代码修改模式（上下文感知修改）

功能：基于现有文件上下文进行代码修改
输入方式：先选择文件，再输入修改描述
输出：提供代码对比，显示修改差异
操作步骤：
1. 点击"@Add Context > Files"选择需要修改的文件
2. 在对话框输入代码修改描述
3. 生成内容与原始文件对比
4. 点击采纳按钮快速应用修改

2.2 使用示例

需求描述：
"使用ArkTS语言写一段代码，在页面顶部插入Swiper组件，其中有3个Image组件，图片资源名分别为app.media.axxx，app.media.bxxx，app.media.cxxx。这些Image组件的宽度撑满父布局，高度为200，图片缩放类型为保持图片宽高比不变，将图片完全显示在边界内。Swiper组件设置为自动播放，播放时间间隔为2秒。"

生成代码可能包含：

// 生成的ArkTS代码片段
@Component
struct MySwiperComponent {
  build() {
    Column() {
      Swiper() {
        ForEach(['app.media.axxx', 'app.media.bxxx', 'app.media.c'], 
          (item: Resource) => {
            Image(item)
              .width('100%')
              .height(200)
              .objectFit(ImageFit.Contain)
          }
        )
      }
      .autoPlay(true)
      .interval(2000) // 2秒
      .indicator(true)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
  }
}

2.3 功能特点

智能理解：能理解复杂的自然语言描述
一键操作：支持一键复制或插入到编辑区
对比查看：修改模式下提供代码对比功能
快速采纳：可直接采纳全部或部分修改

三、编辑区代码生成（Inline Edit）

Inline Edit允许在ArkTS文件的编辑窗口中通过自然语言进行问答，基于当前文件的上下文智能生成代码片段，特别适合在现有代码基础上进行修改和增强。

3.2 唤醒方式

方式一：右键菜单唤醒

在代码编辑区域右键
选择"CodeGenie > Inline Edit"
或使用快捷键：
- Windows/Linux: Alt + I
- macOS: Command + I

方式二：选中代码唤醒

选中一段代码
点击出现的Inline Edit浮框
或使用快捷键唤醒
注意：如果浮框未出现，需要到设置中取消勾选"Hide Inline Edit Overlay"

设置路径：

File > Settings > CodeGenie > Code Generation
或 macOS: DevEco Studio > Preferences/Settings > CodeGenie > Code Generation

3.3 使用流程

步骤1：输入描述

在对话框中输入代码功能描述
按Enter键开始生成
点击"Stop Generation"可中断生成过程

步骤2：查看结果

生成完成后，在编辑区展示生成的代码内容，通过不同颜色显示差异：

绿色区域：新生成的代码内容
蓝色区域：对现有代码进行修改的内容
红色区域：删除的代码内容

步骤3：采纳或拒绝

提供多种采纳方式：

全部采纳：
- 点击"Accept All"
- 或使用快捷键：Alt + Enter
分段采纳：
- 点击界面中的"Accept"区域
- 或使用快捷键：
  - Windows/Linux: Shift + Ctrl + Y
  - macOS: Shift + Command + Y
分段拒绝：
- 点击界面中的"Reject"区域
- 或使用快捷键：
  - Windows/Linux: Shift + Ctrl + N
  - macOS: Shift + Command + N

步骤4：重新生成或继续编辑

重新生成：点击刷新/Regenerate按钮，根据当前描述重新生成
继续编辑：点击"Further Edit"或使用快捷键：
- Windows/Linux: Ctrl + K
- macOS: Command + K

3.4 使用示例

场景：为现有组件添加功能

// 现有代码
@Component
struct UserCard {
  @State userName: string = '张三'
  
  build() {
    Row() {
      Text(this.userName)
        .fontSize(20)
    }
  }
}

// 输入描述："添加用户头像和点击事件"
// 生成可能的结果：
@Component
struct UserCard {
  @State userName: string = '张三'
  @State isSelected: boolean = false
  
  build() {
    Row() {
      // 绿色：新生成的代码
      Image($r('app.media.user_avatar'))
        .width(40)
        .height(40)
        .borderRadius(20)
        .margin({ right: 10 })
      
      Text(this.userName)
        .fontSize(20)
        // 蓝色：修改的代码
        .fontColor(this.isSelected ? Color.Blue : Color.Black)
    }
    // 绿色：新生成的代码
    .padding(10)
    .backgroundColor(this.isSelected ? '#F0F8FF' : Color.White)
    .onClick(() => {
      this.isSelected = !this.isSelected
    })
    .border({ width: 1, color: this.isSelected ? Color.Blue : Color.Gray })
  }
}

四、编辑区代码续写

利用AI大模型分析并理解在代码编辑区的上下文信息，智能续写符合上下文的ArkTS或C++代码片段。特别适合在编写代码过程中获得智能提示。

4.2 使用约束

上下文要求：
- 建议编辑区已有较丰富上下文
- AI模型需要足够的上下文来理解编程场景
- 如果内容太少，AI可能无法有效理解意图
触发规则：
- 光标上文10行内，有效代码行数需超过5行
- 排除以下情况：
  - 单独的{}、()、[]括号行
  - 空行
  - 纯注释行

4.3 续写设置

设置路径：

File > Settings > CodeGenie > Code Generation
或 macOS: DevEco Studio > Preferences/Settings > CodeGenie > Code Generation

主要配置选项：

启用代码续写：
- 勾选"Enable code generation"
勿扰模式：
- 勾选"Do not disturb mode"
- 隐藏代码生成工具栏及快捷键提示
- 适合熟悉快捷键的开发者
续写类型选择：
- Enable snippet generation：片段续写
- Enable inline generation：行内续写
时延设置：
- 可设置续写的触发时延

4.4 续写类型

类型一：行内续写（Inline Generation）

触发方式：在编码时稍作停顿
特点：在当前代码行即时续写
适用场景：编写单行代码时的智能补全

类型二：片段续写（Snippet Generation）

触发方式：输入回车
特点：根据上下文生成多行代码片段
适用场景：需要生成完整代码块

4.5 触发方式

自动触发：
- 行内续写：停顿自动触发
- 片段续写：按Enter键触发
手动触发：
- 使用快捷键：
  - Windows/Linux: Alt + C
  - macOS: Option + C

4.6 采纳方式

提供多种灵活的采纳方式：

快速采纳：
- 按Tab键采纳全部内容
精细采纳：
- 逐行采纳：
  - Windows/Linux: Ctrl + ↓
  - macOS: Command + ↓
- 逐单词采纳：
  - Windows/Linux: Ctrl + →
  - macOS: Option + →
忽略内容：
- 按Esc键忽略续写内容

4.7 常用快捷键

操作	macOS快捷键	Windows快捷键
触发多行代码续写	Enter、Option+C	Enter、Alt+C
触发单行代码续写	Option+X	Alt+X
采纳续写生成的代码	Tab	Tab
忽略续写生成的代码	Esc	Esc
查看上一个代码续写结果	Option + [	Alt + [
查看下一个代码续写结果	Option + ]	Alt + ]
重新生成代码内容（最多5次）	Option + R	Alt + R
展示CodeGenie面板	Option + U	Alt + U
代码逐行采纳	Command + ↓	Ctrl + ↓
代码逐单词采纳	Option + →	Ctrl + →

4.8 使用示例

场景：编写一个状态管理函数

// 用户编写的代码
@Component
struct Counter {
  @State count: number = 0
  
  build() {
    Column() {
      Text(`Count: ${this.count}`)
        .fontSize(24)
      
      // 在此处按Enter或稍作停顿
      // AI可能续写的内容：
      Button('增加')
        .onClick(() => {
          this.count++
        })
        .margin({ top: 10 })
      
      Button('减少')
        .onClick(() => {
          if (this.count > 0) {
            this.count--
          }
        })
        .margin({ top: 5 })
      
      Button('重置')
        .onClick(() => {
          this.count = 0
        })
        .margin({ top: 5 })
    }
  }
}

五、功能对比

功能特性	自然语言代码生成	编辑区代码生成（Inline Edit）	编辑区代码续写
使用场景	全新代码生成、复杂功能实现	现有代码修改、功能增强	编写过程中的智能补全
上下文依赖	可选（代码修改模式）	强依赖当前文件上下文	强依赖当前编辑位置上下文
输入方式	自然语言描述	自然语言描述	自动或快捷键触发
输出形式	完整代码片段	代码差异对比	续写代码建议
采纳方式	一键复制/插入	分段采纳/拒绝	Tab键采纳、逐行采纳
交互性	中等	高（可多次修改）	低（主要自动）