WebStorm编辑器侧边栏

编辑器侧边栏

编辑器左侧的垂直区域。当编写代码时，提供重要信息和操作图标。外观和行为可以根据你的喜好进行定制。

如果在较小的屏幕上工作，并且希望侧边栏和其他UI元素占用更少的空间，则可以启用紧凑模式。

如果使用屏幕阅读器，则可以将其配置为读取排水沟中的行号、注释和图标工具提示。

行号

默认情况下，侧边栏显示行号，这使得在与队友讨论或浏览代码时更容易引用特定的行。

配置行号

打开"设置"对话框，然后转到Editor | General | Appearance。
启用"Show line numbers"选项后，从下拉菜单中选择所需的行号模式：

Absolute：从文件顶部到底部顺序排列的标准行号，为每一行提供一个唯一的数字。此模式有助于在讨论或错误消息中直接导航和引用特定行。
Relative：显示每行与插入符号的当前位置相距多少行。这对于使用键盘快捷键快速移动或编辑代码块特别有用。
Hybrid：此模式结合了绝对和相对行号，显示插入符当前位置的绝对行号和所有其他行的相对编号。它允许使用这两个系统的优点进行高效的导航和编辑。

隐藏行号

在侧边栏上单击鼠标右键，取消选择"Appearance | Show Line Numbers"。
在"设置"对话框中，转到"Editor | General | Appearance"，取消选中"Show line numbers"选项。

代码折叠

为了根据手头的任务定制代码视图，可以使用代码折叠。

要始终显示折叠图标，请转到"Settings | Editor | General | Code Folding"，然后选择"Show code folding arrows"旁边的"Always"。

要始终隐藏折叠图标，清除"Show code folding arrows"复选框。

侧边栏图标

可用的图标列表取决于项目的配置、使用的框架和安装的插件。例如，可用于运行程序。要访问项目可用的图标列表，请转到"Settings | Editor | General | Gutter Icons"。要显示或隐藏图标，请选中或清除其旁边的复选框。如果要禁用所有图标，请清除列表顶部的"Show gutter icons"复选框。

书签

可以为某一行添加书签，用于快速定位。

添加匿名书签

按F11。
侧边栏右键，选择Add Bookmark

书签图标在侧边栏空白处显示。

添加助记符书签

按Ctrl + F11，或右键菜单，选择"Add Mnemonic Bookmark"。
在打开的弹出窗口中，选择要用作此书签标识符的数字或字母。

如果所选助记符已被使用，将询问您是否要用新书签覆盖现有书签。选择"不再询问"选项以静默覆盖助记符。
填写新书签的描述。
按Enter键或再次单击所选字母或数字以保存书签。字母或数字书签图标出现在书签行旁边的空白处。

运行和调试

要运行或调试脚本，请在编辑器中打开相关的package.json文件，单击侧边栏的运行按钮，从菜单中选择运行<script_name>或调试<script_nname>。
要运行或调试测试，请在编辑器中打开相关测试文件，单击相应按钮。

管理断点

要设置行断点，请单击可执行代码行的空白处。
要设置方法断点，请单击声明方法的行处的空白处。
要移动断点，请将其拖动到排水沟中的另一行上。

配置断点图标

默认情况下，断点图标放置在行号上以节省空间。

要在行号附近放置断点，请右键单击侧边栏，取消选择"Appearance | Breakpoints Over Line Numbers"。

版本控制

配置Git Blame注释

可以使用VCS注释找出是谁对文件进行了哪些更改。要启用注释，请右键单击侧边栏，然后选择"Annotate with Git Blame"。

可以根据自己的喜好配置注释以显示信息：

Annotation content 注释内容。在注释上单击鼠标右键，然后转到"View"。可以选择要包含在注释中的信息：修订号、更改日期、作者姓名。
Colors 颜色。在注释上单击鼠标右键，然后转到"View | Colors"。可以选择要高亮显示的内容：更改的顺序，使最近的提交更容易看到，或者更改的作者。要禁用高亮显示，请选择"Hide"选项。
Names 名字。在注释上单击鼠标右键，然后转到"View | Names"。可以选择如何标记作者：使用他们的全名、仅使用名字或仅使用姓氏、首字母缩写或电子邮件。

还可以在编辑器中修改文件时跟踪其更改。所有更改都会用更改标记高亮显示，这些标记显示在修改行旁边的空白处，并显示自上次与存储库同步以来引入的更改类型。当将更改提交到存储库时，更改标记会消失。

可以使用将鼠标悬停在更改标记上然后单击它时出现的工具栏来管理更改。该工具栏与显示修改行先前内容的框架一起显示：

单击向左按钮回滚更改，单击双箭头按钮浏览当前行的当前版本和存储库版本之间的差异，单击ab按钮高亮显示已更改的片断。