WebStorm 2025.2 Help

编辑器标尺

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

编辑器标尺

如果您使用较小的屏幕并希望标尺和其他 UI 元素占用更少空间,您可以启用 compact mode

如果您使用屏幕阅读器,您可以 configure 它以朗读标尺中的行号、注解和图标提示。

配置标尺外观

  • 要配置标尺外观,请右键点击标尺并导航到 外观

    您可以配置以下标尺元素:

    • 行号

    • 行号上的断点

    • 缩进辅助线

    • 粘性行

    • 路径导航

    配置标尺外观

行号

默认情况下,标尺会显示行号,便于在与团队成员讨论或浏览代码时引用特定行。

配置行号

您可以根据需要在多个行号模式之间切换。

  1. 打开 设置 对话框(Ctrl+Alt+S ),然后前往 编辑器 | 常规 | 外观

  2. 启用 显示行号 选项后,从下拉菜单中选择所需的行号模式:

    标准行号模式从文件顶部按顺序编号到文件底部,为每一行分配唯一编号。 此模式便于直接跳转并在讨论或错误信息中引用特定行。

    绝对行号

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

    相对行号

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

    混合行号

隐藏行号

要隐藏行号,请执行以下操作之一:

  • 右键单击标尺区域并取消选择 外观 | 显示行号

    显示行号开启
    显示行号关闭
  • 设置 对话框中,转到 编辑器 | 常规 | 外观 ,然后取消选中 显示行号 选项。

代码折叠

为便于完成当前任务,您可以使用 代码折叠。 默认情况下,未折叠区域的图标在悬停时显示在标尺区域中。

代码折叠

要始终显示折叠图标,请转到 设置 | 编辑器 | 常规 | 代码折叠 并在 显示代码折叠箭头 旁边选中 始终

要始终隐藏折叠图标,请转到 设置 | 编辑器 | 常规 | 代码折叠 并清除 显示代码折叠箭头 复选框。

操作图标

可用标尺图标列表 取决于项目的配置、所使用的框架以及所安装的插件。 例如,可以使用操作图标来 跟踪类实现和重写方法 ,或 运行 应用程序。

要访问项目中可用的标尺图标列表,请转到 设置 | 编辑器 | 常规 | 边距图标

要在标尺中显示或隐藏图标,请选中或取消选中其旁边的复选框。 如果要禁用所有标尺图标,请清除列表顶部的 显示装订区域图标(I) 复选框。

设置对话框中的标尺图标设置

书签

书签 用于标记特定的代码行,以便以后快速导航到这些行。

添加匿名行书签

  • 在编辑器中,将插入符放在某行代码上,然后按下 F11

  • 或者,右键单击您想添加书签的代码行旁的标尺,并选择 添加书签

    添加匿名书签

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

标尺中的匿名书签

添加助记符行书签

  1. 在编辑器中,将插入符放在某行代码上,然后按下 Ctrl+F11

    或者,右键单击您想添加书签的代码行旁的标尺,并选择 添加助记书签

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

    添加助记符书签:选择标识符

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

    添加助记符书签:重写助记符弹窗
  3. 您可以为新书签添加描述(可选)。

  4. Enter 键或再次单击所选的字母或数字以保存书签。

    一个带有字母或数字的书签图标会出现在该行标尺的旁边。

    标尺中添加的助记符书签

运行和调试脚本与测试

编辑器边距可作为运行和调试脚本与测试的便捷入口。

  • 要运行或调试脚本,请在编辑器中打开相关 package.json 文件,点击脚本旁边边距中的 运行按钮 ,并在上下文菜单中选择 运行 <script_name>调试 <script_name>

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

    从编辑器运行单个测试

边距还允许您 管理断点

管理断点

  • 要设置行断点,请点击可执行代码行的边距。

  • 要设置方法断点,请点击声明该方法的行所在的边距。

  • 要移动断点,请将其拖动到边距中的其他行。

配置断点图标

默认情况下, 断点图标会叠加在行号上,以节省横向空间。

断点

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

在行号上显示断点
在行号旁显示断点

    版本控制

    配置 Git Blame 注解

    您可以通过使用 VCS 注解确定是谁引入了文件中的哪个更改。

    要启用注解,请右键点击边距并选择 使用Git 追溯注解(N)

    Git Blame 注解

    您可以根据偏好配置注解以显示相关信息:

    • 注解内容。 右键点击注解并转到 视图。 您可以选择要在注解中包含哪些信息:修订号、更改日期、作者名称。

    • 颜色。 右键点击注解并转到 视图 | 颜色。 您可以选择突出显示的内容:更改的顺序(便于查看最近提交)或更改的作者。 要禁用高亮显示,请选择 隐藏 选项。

    • 名称。 右键点击注解并转到 视图 | 名称。 您可以选择如何标注作者:使用全名、仅名或仅姓、首字母或电子邮件地址。

    您还可以在编辑器中修改文件时跟踪其更改。 所有更改都会通过 更改标记以高亮显示,这些标记出现在修改行旁的边距中,显示自上次 与版本库同步以来引入的更改类型。 当您将更改提交到版本库时,更改标记会自动消失。

    您对文本引入的更改会使用颜色编码进行区分:

    新增、更改和删除行的高亮颜色

    下表列出了部分 配色方案中默认的行高亮颜色及其含义。

    颜色

    行状态

    说明

    颜色样本:浅蓝色 #C3D6E8

    已修改的行

    自上次更新以来已被修改的行。

    颜色样本:浅橙色 #EDDCBC

    仅空白字符被修改的行

    自上次更新以来仅空白字符被修改的行。

    颜色样本:浅绿色 #C9DEC1

    新增的行

    自上次更新以来添加的行。

    灰色三角形 #9F9F9F

    已删除的行

    自上次更新以来删除的行。

    颜色

    行状态

    描述

    颜色样本:深灰蓝色 #374752

    已修改的行

    自上次更新以来修改的行。

    颜色样本:深灰橙色 #4C4638

    仅空格已修改的行

    自上次更新以来仅空格被修改的行。

    颜色样本:深灰绿色 #384C38

    已添加的行

    自上次更新以来添加的行。

    灰色三角形 #656E76

    已删除的行

    自上次更新以来删除的行。

    颜色

    行状态

    描述

    颜色样本:蓝色 #1AABFF

    已修改的行

    自上次更新以来修改的行。

    颜色样本:灰色 #666666

    仅空格已修改的行

    自上次更新以来仅空格被修改的行。

    颜色样本:绿色 #009924

    已添加的行

    自上次更新以来添加的行。

    橙色三角形 #FFA14F

    已删除的行

    自上次更新以来删除的行。

    当您将鼠标悬停在更改标记上并点击它时,会出现一个工具栏,您可以通过该工具栏管理更改。 工具栏将与一个框架一起显示,该框架显示了已修改行的先前内容:

    修改行标记

    您可以点击 还原图标 回滚更改,或点击 显示差异图标 查看当前行与版本库中的版本之间的差异。

    您无需还原整个文件,可以复制此弹出窗口中的任意内容粘贴到编辑器中。

    最后修改日期: 2025年 9月 26日