《第二章、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 文档，参考相关指导。为了提高代码修复效率，编器还提供了代码实时检查和快速修复能力。

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