DevEco Studio怎么自定义折叠代码块?

DevEco Studio怎么自定义折叠代码块? 在DevEco Stduio,如果我想给变量进行分组,折叠某几行变量,应该怎么做呢?

cke_6018.png


6 回复

cke_120.png

cke_300.png 像这样,选上面那个 Toggle Folding


这种折叠方式,看起来不能自定义描述,如果折叠多处代码块,就会有点分不清。不过也学到了,感谢! 顺带可以看看我2楼的教程。

在折叠区上方写注释就行,不过你的更通用,我觉得我发这个更适合应急,

初级用法

首先,选中需要折叠的代码块。

cke_308.png

按下Ctrl+Alt+T快捷键,即可选择折叠方式。

分别为editor-fold和region。(推荐第一种,折叠后可以看到描述)。

cke_3940.png

cke_7503.png

这里选了第一种,点击左上角的按钮即可折叠代码块。

cke_12291.png

悬停描述即可看到里面的代码。

cke_11150.png

高级用法

先重复一遍初级用法的步骤,区别是额外增加defaultstate=“collapsed”。

cke_76964.png

然后在文件树选中文件,Ctrl+C复制,Ctrl+V粘贴,改名后创建新文件。

cke_57786.png

最后你就会神奇的发现,这段代码自动折叠了起来。

cke_73202.png

在DevEco Studio中,自定义折叠代码块可通过ArkTS/ETS的注释标记实现。使用// region 描述// endregion包裹代码。例如:

// region 自定义折叠块
// 你的代码
// endregion

编辑器会自动识别并显示折叠控件。此方法适用于函数、类或任意代码段,无需依赖特定语言结构。

在DevEco Studio中,可以通过自定义代码折叠(Code Folding)来实现对变量分组等代码块的折叠。具体操作如下:

  1. 使用区域注释(Region Comments): 这是最直接的方法。在希望折叠的代码块前后添加特定的注释标记。

    • 在代码块开始前添加:// region 描述文字
    • 在代码块结束后添加:// endregion 例如:
    // region 用户配置变量
    let userName: string = "张三";
    let userAge: number = 25;
    // endregion
    

    添加后,编辑器会在对应位置显示折叠按钮(通常是一个-+图标),点击即可折叠/展开该区域。

  2. 使用IDE内置的折叠功能

    • 将光标放在需要折叠的代码行,使用快捷键:
      • 折叠Ctrl + Shift + -(Windows/Linux)或 Cmd + Option + -(Mac)
      • 展开Ctrl + Shift + +(Windows/Linux)或 Cmd + Option + +(Mac)
    • 也可以点击编辑器行号左侧的折叠箭头手动操作。
  3. 自定义折叠范围

    • 选中多行代码后,右键选择 “折叠代码块”(或使用上述快捷键),DevEco Studio会根据语法自动识别可折叠的块(如函数、循环、条件语句等)。
    • 对于变量分组,建议优先使用// region注释,因为IDE可能不会自动将连续的变量声明识别为可折叠块。
  4. 配置折叠规则: 进入 “文件 > 设置 > 编辑器 > 通用 > 代码折叠”(Windows/Linux)或 “DevEco Studio > 偏好设置 > 编辑器 > 通用 > 代码折叠”(Mac),可以调整折叠的触发条件(如根据语法、注释等)。

注意// region// endregion是多数IDE支持的通用标记,在HarmonyOS应用开发中同样适用。折叠后,代码功能不受影响,仅改变编辑器的显示方式,便于聚焦其他部分。

回到顶部