Bootstrap

《第二章、DevEco Studio的使用》03 - 代码编辑的相关使用

1. 前言

这节课我们来了解代码编辑器的相关特性。首先来了解一下如何利用编辑器的能力来帮助我们提升开发效率。

2. 代码快速注释

支持对选择的代码块进行快速注释,使用快捷键Ctrl+/macOS为Command+/)进行快速注释。对于已注释的代码块,再次使用快捷键Ctrl+/macOS为Command+/)取消注释。

3. 代码自动补全

首先是代码自动补全能力,编辑器工具会分析上下文,并根据输入内容提示可补全的类、方法、字段和关键字的名称等。

例如在之前案例中,我们输入t,编辑器会自动联想出与t有关的组件或元素。我们选择text组件,添加文字信息,添加完成后,鼠标点击下编辑器以外的地方,让它刷新右侧的预览器,页面就会显示刚刚添加的text的组件。

接下来我们给这个 text 组件添加一些属性,同样输入.运算符号,编辑器会自动联想出再次组建的各种属性。

举个例子,修改文字的大小,我们添加 fontSize 属性并填入 24fp,可以通过预览器看到我们的修改生效了。或者修改文字颜色,我们添加方 fontColor 属性并选择红色,可以看到字体颜色变为了红色。

4. 自动导包

其次是自动导包能力,当我们对 sdk 接口不熟悉时,手动导入会严重影响我们的编码效率,此时我们就可以通过自动导包来帮助我们提升开发效率。

例如这个案例中,我们可以看到未导包的router已经被红色波浪线提示出来了。我们将鼠标悬浮至此,点击蓝色的高亮字体,可以实现一键修复自动导包。

当文件中存在有未使用 import 时,可以使用 Optimize Imports 功能,快速清除未使用的import,并根据设置的规则对 import 进行合并或排序。

5. 代码查找

此外,IDE 还提供了代码查找的相关能力,帮助我们轻松的搜索工程里的所有内容。例如在这个工程中,我们要搜索 跳转,通过连续敲击两次 Shift 键打开代码查找界面,输入对应的值就会出现对应结果,再选择查找出的结果就可以快速打开所在文件并跳转至代码处。

6. 查阅API参考

接下来,我们一起学习下在调用 ArtTS API 或组件时,如何在编辑器中快速精准地调取出对应的参考文档。

我们可以在编辑器中将鼠标悬停在需要查阅的接口和组件上,弹窗将显示当前接口或组件在不同 API 版本下的信息。单击弹窗右下角的 Show in APl Reference,可以快速查阅更详细的 API 文档。

文档中提供了组件的详细介绍,包括说明参数、错误码、示例代码等。当我们编写代码遇到疑问时,快速找到相关的文档,不需要跳出 IDE 查阅资料。

7. 代码检查和修复

接下来一起来看看编辑器提供的代码检查与修复能力。

首先是实时检查。如果输入的语法不符合编码规范,或者出现语义语法错误,问题代码将会被突出显示错误或警告。将鼠标悬浮至问题代码处,则会提示详细的错误信息。

例如我们在设置text字体大小时未添加参数,此时 fontSize 属性则会报红,提示我们添加参数,当我们添加后报红消失。

或者当我们编写代码时拼写错误,编辑器也会报红提示,并提供相应的修复方法。

例如我们在设置 fontSize 的时候,把fontSize拼写成fontSiz时。同样的,我们将鼠标悬浮至此,点击 Change spelling to fontSize蓝色的高量字体,可以实现一键修复。

8. 代码重构

最后,使代码重构能力。我们可以将函数或类、方法内等区域的代码块或表达式提取为新函数、常量、接口、变量或类型别名。

有时候,为防止方法过长,我们需要将组件或属性提取出来,以优化其可读性。举例,我们将Button组件的属性抽取出来。首先框选要抽取的属性,右键单击Refector,选择Extract Method,编辑器则会自适应吧代码范围补全,并提取了一个带Extend注解的新函数。

9. 代码高亮

支持对代码关键字、运算符、字符串、类、标识符、注释等进行高亮显示,您可以打开File > Settings(macOS为DevEco Studio > Preferences)面板,在Editor > Color Scheme自定义各字段的高亮显示颜色

默认情况下,您可以在Language Defaults中设置源代码中的各种高亮显示方案,该设置将对所有语言生效;如果您需要针对具体语言的源码高亮显示方案进行定制,可以在左侧边栏选择对应的语言,然后取消“Inherit values from”选项后设置对应的颜色即可。

10. 代码跳转

在编辑器中,可以按住Ctrl键(macOS为Command键),鼠标单击代码中引用的类、方法、参数、变量等名称,自动跳转到定义处。若单击定义处的类、变量等名称,当仅有一处引用时,可直接跳转到引用位置;若有多处引用,在弹窗中可以选择想要查看的引用位置。

11. 跨语言跳转

DevEco Studio支持在声明或引用了Native接口的文件中(如d.ts)跨语言跳转其对应的C/C++函数,从而提升混合语言开发时的开发效率。您可以选中接口名称单击右键,在弹出的菜单中选择Go To > Implementation(s)(或使用快捷键Ctrl+Alt+B,macOS为Command+Option+B)实现跨语言跳转。

12. 代码格式化

代码格式化功能可以帮助您快速的调整和规范代码格式,提升代码的美观度和可读性。默认情况下,DevEco Studio已预置了代码格式化的规范,您也可以个性化的设置各个文件的格式化规范,设置方式如下:在File > Settings > Editor > Code Style(macOS为DevEco Studio > Preferences > Editor > Code Style)下,选择需要定制的文件类型,如ArkTS,然后自定义格式化规范即可。

在使用代码格式化功能时,您可以使用快捷键Ctrl + Alt + L(macOS为Option+Shift+Command +L) 可以快速对选定范围的代码进行格式化。

如果在进行格式化时,对于部分代码片段不需要进行自动的格式化处理,可以通过如下方式进行设置:

  1. File > Settings >Editor > Code Style(macOS为DevEco Studio > Preferences > Editor > Code Style),单击“Formatter”,勾选“Turn formatter on/off with markers in code comments”。

  1. 在不需要进行格式化操作的代码块前增加“//@formatter:off”,在不格式化代码块的最后增加“//@formatter:on”,即表示对该范围的代码块不需要进行格式化操作。

13. 代码结构树

使用快捷键Alt + 7 / Ctrl + F12(macOS为Command+7)打开代码结构树,快速查看文件代码的结构树,包括全局变量和函数,类成员变量和方法等,并可以跳转到对应代码行。

14. 代码引用查找

提供Find Usages代码引用查找功能,帮助开发者快速查看某个对象(变量、函数或者类等)被引用的地方,用于后续的代码重构,可以极大的提升开发者的开发效率。

使用方法:在要查找的对象上,单击鼠标右键 > Find Usages或使用快捷键Alt +F7(macOS为Option + F7)。

15. 函数注释生成

DevEco Studio支持在函数定义处,快速生成对应的注释。在函数定义的代码块前,输入“/**”+回车键,快速生成注释信息。

说明

C++文件同时支持使用“//!”+回车快速生成注释。

16. 代码查找

通过对符号、类或文件的即时导航来查找代码。检查调用或类型层次结构,轻松地搜索工程里的所有内容。通过连续点击两次Shift快捷键,打开代码查找界面,在搜索框中输入需要查找内容,下方窗口实时展示搜索结果。双击查找的结果可以快速打开所在文件的位置。

17. 快速查阅API接口及组件参考文档

在编辑器中调用ArkTS/JS API或组件时,支持在编辑器中快速、精准调取出对应的参考文档。

可在编辑器中,鼠标悬停在需要查阅的接口或组件,弹窗将显示当前接口/组件在不同API版本下的参数等信息,单击弹窗右下角Show in API Reference,可以快速查阅更详细的API文档。

说明

DevEco Studio集成了离线版API参考类文档,最新版本请参考官网HarmonyOS API参考

在弹窗中可以查看:

  1. 使用的API是否涉及权限申请或仅支持在测试框架下使用。
  2. 使用的接口状态。deprecated标签表示即将废弃的API接口,可使用useinstead标记的API进行替代,请开发时关注。

18. Optimize Imports功能

使用编辑器提供的Optimize Imports,可以快速清除未使用的import,并根据设置的规则对import进行合并或排序。选择文件或目录,使用快捷键Ctrl+Alt+O(macOS为Control+Option+O),或单击菜单栏Code > Optimize Imports

如需修改优化配置,进入File > Settings... > Editor > Code Style,选择开发语言(当前以ArkTS为例),在Imports标签页中,可选择在优化时是否需合并来自同一模块的import,是否需要对同一条import语句导入的元素进行排序,或对多条import语句按模块排序。

19. 查看父类/子类继承关系

编辑器支持查看当前接口、类、方法、属性的继承关系。点击代码编辑区域左侧的Gutter Icons(装订线图标)可以跳转到对应的父/子接口或类。如有多个继承关系,在弹窗的文件列表中选择需要查看的接口/类即可。

  • Implemented:支持跳转到对应的实现类或子接口及其对应的属性/方法。
  • Implementing:支持跳转到对应的父接口或父接口的属性/方法。
  • Overridden:支持跳转到对应的子类或子类的属性/方法。
  • Overriding:支持跳转到对应的父类或父类的属性/方法。

查看父类/子类继承关系功能默认开启,可以通过菜单栏进入File > Settings > Editor > General > Gutter Icons,通过勾选或取消勾选Implemented、Implementing、Overridden、Overriding四项可以开启或关闭该功能。

20. 代码自动补全

提供代码的自动补全能力,编辑器工具会分析上下文,并根据输入的内容,提示可补全的类、方法、字段和关键字的名称等,支持模糊匹配。

自动补齐功能默认按最短路径进行排序,如仅需按照最近使用过的类、方法、字段和关键字等名称提供补全内容排序,可以在File > Settings > Editor > General > Code Completion 中勾选“Sort suggestions by recently used”。

说明

若已勾选代码补齐按最近使用排序但未生效,请检查Code Completion页面,确保“Sort suggestions alphabetically”已取消勾选。

21. 快速覆写父类

DevEco Studio提供Override Methods,辅助开发者根据父类模板快速生成子类方法,提升开发效率。将光标放于子类定义位置,使用快捷键Ctrl+O,或右键单击Generate...,选择Override Methods,指定需要覆写的对象(方法、变量等),点击OK将自动生成该对象的覆写代码。

22. 快速生成构造器

编辑器支持为类快速生成一个对应的构造函数。

在类中使用快捷键Alt+Insert,或单击鼠标右键选择Generate...,在弹窗中选择Constructor,选择一个或多个需要生成构造函数的参数,点击OK。若选择Select None,则生成不带参数的构造器。

23. 快速生成get/set方法

编辑器支持为类成员变量或对象属性快速生成get和set方法。

将光标放置在当前类中,单击右键选择Generate...>Getter and Setter,或者使用快捷键Alt+Insert,在菜单中选择Getter and Setter,完成方法快速生成。

24. 快速生成声明信息到Index文件

编辑器支持将HSP和HAR模块中变量、方法、接口、类等需要对外暴露的信息,通过Generate...>Declarations功能,批量在Index.ets文件中进行声明,便于其他模块调用。

在HSP或HAR模块内的文件编辑界面,单击右键选择Generate...>Declarations,或者使用快捷键Alt+Insert,在菜单中选择Declarations,按住快捷键Ctrl并选择需要声明的变量名、方法名、接口名、类名等,即可在模块的Index.ets文件中批量生成相应的声明信息。

25. 总结

这节课我们给大家介绍了编辑器的基本使用技巧。

在编辑代码时,大家可以利用编辑器的代码自动补齐、自动导包等能力高效编辑代码。当对 ArkTs的编程规范或 SDK 接口不熟悉时,可以快速查阅 API 文档,参考相关指导。为了提高代码修复效率,编器还提供了代码实时检查和快速修复能力。

关于介绍编器提供的代码编辑能力就介绍到这里,谢谢各位观看!!!

;