编辑器标尺
标尺是在编辑器左侧的垂直区域。 标尺在编写代码时可直观显示重要信息和操作图标,方便操作。 标尺的外观和行为可以根据您的偏好进行自定义。

如果您使用较小的屏幕并希望标尺和其他 UI 元素占用更少空间,您可以启用 compact mode。
如果您使用屏幕阅读器,您可以 configure 它以朗读标尺中的行号、注解和图标提示。
配置标尺外观
要配置标尺外观,请右键点击标尺并导航到 外观。
您可以配置以下标尺元素:
行号
行号上的断点
缩进辅助线
粘性行
路径导航

行号
默认情况下,标尺会显示行号,便于在与团队成员讨论或浏览代码时引用特定行。
配置行号
您可以根据需要在多个行号模式之间切换。
打开 设置 对话框(Ctrl+Alt+S ),然后前往 。
启用 显示行号 选项后,从下拉菜单中选择所需的行号模式:
标准行号模式从文件顶部按顺序编号到文件底部,为每一行分配唯一编号。 此模式便于直接跳转并在讨论或错误信息中引用特定行。

该行号显示每一行相对于光标当前位置之间的距离。 这对于使用 keyboard shortcuts 快速移动或编辑代码块特别有用。

此模式结合了绝对与相对行号,在光标所在行显示绝对编号,其余行显示相对编号。 它结合了两种方式的优势,便于高效导航与编辑。

隐藏行号
要隐藏行号,请执行以下操作之一:
右键单击标尺区域并取消选择 。


在 设置 对话框中,转到 ,然后取消选中 显示行号 选项。
代码折叠
为便于完成当前任务,您可以使用 代码折叠。 默认情况下,未折叠区域的图标在悬停时显示在标尺区域中。

要始终显示折叠图标,请转到 并在 显示代码折叠箭头 旁边选中 始终。
要始终隐藏折叠图标,请转到 并清除 显示代码折叠箭头 复选框。
操作图标
可用标尺图标列表 取决于项目的配置、所使用的框架以及所安装的插件。 例如,可以使用操作图标来 跟踪类实现和重写方法 ,或 运行 应用程序。
要访问项目中可用的标尺图标列表,请转到 。
要在标尺中显示或隐藏图标,请选中或取消选中其旁边的复选框。 如果要禁用所有标尺图标,请清除列表顶部的 显示装订区域图标(I) 复选框。

书签
行 书签 用于标记特定的代码行,以便以后快速导航到这些行。
添加匿名行书签
在编辑器中,将插入符放在某行代码上,然后按下 F11。
或者,右键单击您想添加书签的代码行旁的标尺,并选择 添加书签。

一个书签图标会出现在该行标尺的旁边。

添加助记符行书签
在编辑器中,将插入符放在某行代码上,然后按下 Ctrl+F11。
或者,右键单击您想添加书签的代码行旁的标尺,并选择 添加助记书签。

在打开的弹出窗口中,选择一个要用作此书签标识符的字母或数字。

如果所选助记符已被使用,IDE 会询问是否用新书签覆盖已存在的书签。 选择 不再询问 选项可静默覆盖助记符。

您可以为新书签添加描述(可选)。
按 Enter 键或再次单击所选的字母或数字以保存书签。
一个带有字母或数字的书签图标会出现在该行标尺的旁边。

运行和调试脚本与测试
编辑器边距可作为运行和调试脚本与测试的便捷入口。
要运行或调试脚本,请在编辑器中打开相关 package.json 文件,点击脚本旁边边距中的
,并在上下文菜单中选择 运行 <script_name> 或 调试 <script_name>。

要 运行或调试测试 ,请在编辑器中打开相关测试文件,点击测试旁边边距图标中的
,并从列表中选择 运行“<test name>” 或 调试“<test name>”。

边距还允许您 管理断点。
管理断点
要设置行断点,请点击可执行代码行的边距。
要设置方法断点,请点击声明该方法的行所在的边距。
要移动断点,请将其拖动到边距中的其他行。
配置断点图标
默认情况下, 断点图标会叠加在行号上,以节省横向空间。

要将断点放置在靠近行号的位置,请右键点击边距并取消选择 。


版本控制
配置 Git Blame 注解
您可以通过使用 VCS 注解确定是谁引入了文件中的哪个更改。
要启用注解,请右键点击边距并选择 使用Git 追溯注解(N)。

您可以根据偏好配置注解以显示相关信息:
注解内容。 右键点击注解并转到 。 您可以选择要在注解中包含哪些信息:修订号、更改日期、作者名称。
颜色。 右键点击注解并转到 。 您可以选择突出显示的内容:更改的顺序(便于查看最近提交)或更改的作者。 要禁用高亮显示,请选择 隐藏 选项。
名称。 右键点击注解并转到 。 您可以选择如何标注作者:使用全名、仅名或仅姓、首字母或电子邮件地址。
您还可以在编辑器中修改文件时跟踪其更改。 所有更改都会通过 更改标记以高亮显示,这些标记出现在修改行旁的边距中,显示自上次 与版本库同步以来引入的更改类型。 当您将更改提交到版本库时,更改标记会自动消失。
您对文本引入的更改会使用颜色编码进行区分:

下表列出了部分 配色方案中默认的行高亮颜色及其含义。
颜色 | 行状态 | 说明 |
|---|---|---|
| 已修改的行 | 自上次更新以来已被修改的行。 |
| 仅空白字符被修改的行 | 自上次更新以来仅空白字符被修改的行。 |
| 新增的行 | 自上次更新以来添加的行。 |
| 已删除的行 | 自上次更新以来删除的行。 |
颜色 | 行状态 | 描述 |
|---|---|---|
| 已修改的行 | 自上次更新以来修改的行。 |
| 仅空格已修改的行 | 自上次更新以来仅空格被修改的行。 |
| 已添加的行 | 自上次更新以来添加的行。 |
| 已删除的行 | 自上次更新以来删除的行。 |
颜色 | 行状态 | 描述 |
|---|---|---|
| 已修改的行 | 自上次更新以来修改的行。 |
| 仅空格已修改的行 | 自上次更新以来仅空格被修改的行。 |
| 已添加的行 | 自上次更新以来添加的行。 |
| 已删除的行 | 自上次更新以来删除的行。 |
当您将鼠标悬停在更改标记上并点击它时,会出现一个工具栏,您可以通过该工具栏管理更改。 工具栏将与一个框架一起显示,该框架显示了已修改行的先前内容:

您可以点击 回滚更改,或点击
查看当前行与版本库中的版本之间的差异。
您无需还原整个文件,可以复制此弹出窗口中的任意内容粘贴到编辑器中。