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) 可以快速对选定范围的代码进行格式化。
如果在进行格式化时,对于部分代码片段不需要进行自动的格式化处理,可以通过如下方式进行设置:
- 在File > Settings >Editor > Code Style(macOS为DevEco Studio > Preferences > Editor > Code Style),单击“Formatter”,勾选“Turn formatter on/off with markers in code comments”。
- 在不需要进行格式化操作的代码块前增加“
//@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参考。
在弹窗中可以查看:
- 使用的API是否涉及权限申请或仅支持在测试框架下使用。
- 使用的接口状态。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 文档,参考相关指导。为了提高代码修复效率,编器还提供了代码实时检查和快速修复能力。
关于介绍编器提供的代码编辑能力就介绍到这里,谢谢各位观看!!!