【WebStorm教程】WebStorm 编辑器基础知识

WebStorm 编辑器是 IDE 的主要部分，用于创建、读取和修改代码。

编辑器由以下区域组成：

1. 滚动条显示当前文件中的错误和警告。
2. Breadcrumbs可帮助您在当前文件的代码中导航。
3. 装订线显示行号和注释。
4. 选项卡显示当前打开的文件的名称。

导航

您可以使用各种快捷方式在编辑器和不同工具窗口之间切换、更改编辑器大小、切换焦点或返回原始布局。

最大化编辑器窗格

• 在编辑器中，按Ctrl+Shift+F12。WebStorm 隐藏除活动编辑器之外的所有窗口。

您也可以最大化分屏。在这种情况下，活动屏幕被最大化，其他屏幕被移到一边。

将焦点从窗口切换到编辑器

• 按Escape。WebStorm 将焦点从任何窗口移动到活动编辑器。

从命令行终端返回编辑器

• 按Alt+F12。WebStorm 关闭终端窗口。
• 如果您在切换回活动编辑器时需要保持终端窗口打开，请按Ctrl+Tab。

返回默认布局

• 按Shift+F12。
• 要将当前布局保存为默认布局，请从主菜单中选择Window | 将当前布局存储为 Default。您可以使用相同的快捷方式Shift+F12来恢复保存的布局。

跳转到最后一个活动窗口

• 按F12。

使用切换器进行导航

1. 要使用切换器在打开的文件和工具窗口之间跳转，请按Ctrl+Tab。
2. 按住Ctrl以使切换器弹出窗口保持打开状态。
3. 按下Tab可在元素之间移动。按Backspace可从列表中删除所选文件并在编辑器中将其关闭。

更改 IDE 外观

您可以在方案、键盘映射或查看模式之间切换。

1. 按Ctrl+`。
2. 在切换菜单中，选择您需要的选项并按Enter。使用相同的快捷方式Ctrl+`撤消您的更改。

您还可以在编辑器 |查找和调整配色方案设置，包括针对视力障碍者的高对比度配色方案。颜色方案页面和设置/首选项对话框 ( )的键盘映射页面上的键盘映射设置。Ctrl+Alt+S

跳转到导航栏

• 按Alt+Home。

编辑器选项卡

您可以关闭、隐藏和分离编辑器选项卡。每次打开文件进行编辑时，都会在活动编辑器选项卡旁边添加一个带有其名称的选项卡。

从主菜单中，选择窗口 | 编辑器选项卡以查看您可以使用编辑器选项卡执行哪些其他操作。例如，Close Tabs to the Left或Close Tabs to the Right。

您可以将选项卡的上下文菜单用于相同目的或位于编辑器中。

要配置编辑器选项卡的设置，请使用Editor | 一般 | 设置/首选项对话框 ( Ctrl+Alt+S)的编辑器选项卡页面。或者，右键单击选项卡并从选项列表中选择配置编辑器选项卡。

打开或关闭选项卡

• 要关闭所有打开的选项卡，请选择Window | 编辑器标签 | 从主菜单关闭所有选项卡。
• 要关闭所有非活动选项卡，请按下Alt并单击活动选项卡。在这种情况下，只有活动选项卡保持打开状态。
• 要关闭除活动选项卡和固定选项卡之外的所有非活动选项卡，请右键单击任何选项卡并选择关闭其他选项卡。
• 要仅关闭活动选项卡，请按Ctrl+F4。您也可以单击选项卡上任意位置的鼠标滚轮按钮将其关闭。
• 要重新打开关闭的选项卡，请右键单击任何选项卡，然后从上下文菜单中选择重新打开关闭的选项卡。
• 要在已打开的标签末尾打开一个新标签，请在标签设置中选择在末尾打开新标签。

复制路径或文件名

1. 右键单击选项卡。
2. 从打开的列表中，选择Copy Path/Reference。
3. 从打开的列表中，选择您的复制选项。

WebStorm 将项目复制到剪贴板，您可以将其粘贴 ( Ctrl+V) 任何您需要的地方。

移动、删除或排序选项卡

• 要移动或删除选项卡上的图标，在设置/首选项对话框 ( Ctrl+Alt+S) 中，转到编辑器 | 一般 | 编辑器选项卡并在关闭按钮位置字段中选择适当的选项。
• 要将编辑器选项卡放置在编辑器框架的不同部分或隐藏选项卡，请右键单击选项卡并选择配置编辑器选项卡以打开编辑器选项卡设置。在外观部分的选项卡放置列表中，选择适当的选项。

要在所有选项卡都隐藏时访问编辑器选项卡设置，请选择Window | 编辑器标签 | 从主菜单配置编辑器选项卡。

• 要按字母顺序对编辑器选项卡进行排序，请右键单击选项卡并选择配置编辑器选项卡以打开编辑器选项卡设置。在选项卡顺序部分中，选择按字母顺序排序选项卡。

固定或取消固定选项卡

您可以在编辑器中固定活动选项卡，以便在达到选项卡限制或使用“关闭其他选项卡”命令时保持打开状态。

• 要固定或取消固定活动选项卡，请右键单击它并从上下文菜单中选择固定选项卡或取消固定选项卡。
• 要关闭除固定选项卡以外的所有选项卡，请右键单击任何选项卡并选择Close All but Pinned。
• 要为Pin Tab操作分配键盘快捷键，在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Keymap，找到Pin Active Tab操作，右键单击它，选择Add Keyboard Shortcut，然后按下您要使用的组合键.

分离选项卡

分离选项卡时，该选项卡将在一个单独的窗口中打开，并且该窗口将保留给分离的选项卡。如果您尝试从主框架中分离另一个选项卡，它将在新窗口中打开。

• 要分离活动选项卡，请按Shift+F4。
• 将您需要的选项卡拖到主窗口之外，然后将选项卡拖回以附加它。
• 您也可以Alt+mouse用于相同的操作。
• 在项目工具窗口中，选择要分离的文件并按Shift+Enter。

在选项卡之间切换

• 要在选项卡之间移动，请按Alt+Right或Alt+Left。

• 您还可以在最近查看的选项卡或文件之间切换。

在编辑器中，按Ctrl+Tab。按住切换器Ctrl窗口保持打开状态。用于在选项卡和其他文件之间切换。Tab

为打开的选项卡分配快捷方式

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Keymap。
2. 在目录列表中，单击其他目录，然后从选项卡列表中选择您需要为其添加快捷方式的目录。您可以为其分配快捷方式的选项卡限制为 9 个。

更改默认选项卡限制

WebStorm 限制您可以同时在编辑器中打开的选项卡数量（默认选项卡限制为 10）。

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 一般 | 编辑器选项卡。
2. 在选项卡关闭策略部分，根据您的偏好调整设置，然后单击确定。

如果选项卡限制等于 1，则编辑器中的选项卡将被禁用。如果您希望编辑器永远不会关闭选项卡，请输入一些无法访问的数字。

在预览选项卡中打开文件

预览选项卡允许您在单个选项卡中逐个查看文件，而无需在新选项卡中打开每个文件。如果您需要在不超过制表符限制的情况下查看多个文件，这将很有帮助。

1. 在项目工具窗口Alt+1中，单击并选择启用预览选项卡。

您还可以在Settings/Preferences |中启用预览选项卡。一般 | 编辑器标签 | 开放政策。

1. 在项目工具窗口中，选择尚未在任何其他选项卡中打开的文件。

文件名用斜体表示，表示预览模式。您选择的任何其他文件都将替换预览选项卡中的前一个文件。

开始编辑文件以退出预览模式并将其更改为常规选项卡。

请注意，启用预览选项卡后，单击打开文件选项将被忽略。双击文件以在常规选项卡中打开它。

或者，在弹出窗口中预览文件，而无需打开单独的选项卡。在项目工具窗口中选择必要的文件并按Space，有关详细信息，请参阅从项目工具窗口预览文件。

如果没有更多空间，隐藏编辑器选项卡

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 一般 | 编辑器选项卡。
2. 如果没有空格，请选择隐藏选项卡选项。额外的选项卡将放置在位于编辑器右上角的列表中。

更改选项卡中的字体大小

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Appearance & Behavior | 外观。
2. 在“大小”字段中，指定字体大小并单击“确定”以保存更改。

请记住，字体大小不仅会更改选项卡，还会更改工具窗口。

分屏

WebStorm 提供了各种操作，您可以从主菜单或上下文菜单、编辑器或项目工具窗口调用这些操作来拆分编辑器屏幕。

• 在编辑器中，右键单击所需的选项卡，然后选择要拆分编辑器窗口并移动所选文件的方式：拆分右、拆分和右移、下拆分、拆分和下移。

WebStorm 创建编辑器的拆分视图并根据您的选择放置文件。

• 或者，从Window |中选择类似的选项。主菜单中的编辑器选项卡。

您还可以为这些操作分配键盘快捷键。转到设置/首选项 | 键盘映射并找到其中一项操作：Split Right、Split and Move Right、Split Down、Split and Move Down。右键单击它，选择Add Keyboard Shortcut，然后按您要使用的组合键。从配置键盘快捷键了解更多信息。

• 您可以垂直或水平拖动选项卡以拆分编辑器，然后将选项卡向后拖动以取消拆分屏幕。

• 您可以在右侧拆分的编辑器中打开文件。

在Project工具窗口中，右键单击文件并从上下文菜单中选择Open in Right SplitShift+Enter （或按）。WebStorm 将在编辑器右侧的拆分中打开一个文件。

如果有两个拆分并且焦点在左拆分，则文件将在现有的右拆分中打开。如果焦点在右拆分，文件将在下一个右拆分中打开。

• 您可以在分屏之间移动文件。在编辑器中右键单击所需的文件选项卡，然后从上下文菜单中选择Move To Opposite Group或Open In Opposite Group。
• 您可以一次关闭所有打开的工具窗口，从而放大分屏。将插入符号放置在编辑器选项卡中，然后按下Ctrl+Shift+F12或双击该选项卡。WebStorm 隐藏所有打开的工具窗口，因此所有空间都由分屏共享。

• 要取消拆分屏幕，请从上下文菜单中选择Unsplit或Unsplit All以取消拆分所有拆分帧。

移动分屏

1. 将插入符号放在所需的拆分框架内。
2. 从主菜单中，选择窗口 | 编辑器选项卡。

3. 从选项列表中，选择以下选项之一：

   • 将编辑器拉伸到顶部
   • 向左拉伸编辑器
   • 将编辑器拉伸到底部
   • 向右拉伸编辑器

您可以为每个选项分配一个快捷方式，并使用键盘来拉伸拆分框架。

要在您创建的分割帧之间移动，请从主菜单中选择Window | 编辑器选项卡。从选项列表中分别选择Goto Next Splitter N/A或Goto Previous Splitter N/A。

有用的编辑器配置

您可以使用“设置/首选项”对话框 ( Ctrl+Alt+S) 自定义编辑器的行为。

检查以下流行的配置：

配置代码格式

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 代码风格。
2. 从语言列表中选择适当的语言，然后在语言页面上配置制表符和缩进、空格、换行和大括号、硬边距和软边距等设置。

配置字体、大小和字体连字

• 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 字体。

例如，如果您之前保存了配色方案字体设置，则主要设置将被覆盖。带有相应通知的链接将出现在字体页面上。

在编辑器中更改字体大小

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 一般（鼠标控制部分）。
2. 在选项中选择使用 Ctrl+鼠标滚轮更改字体大小。
3. 返回编辑器，按住Ctrl，然后使用鼠标滚轮调整字体大小。

您可以在编辑器设置的字体页面上配置编辑器大小。

为不同的语言和框架配置配色方案设置

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 配色方案。
2. 打开配色方案节点并选择所需的语言或框架。您还可以从节点列表中选择“常规”选项来配置常规项目（例如代码、编辑器、错误和警告、弹出窗口和提示、搜索结果等）的配色方案设置。

配置代码完成选项

• 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 一般 | 代码完成。在这里您可以配置区分大小写的完成、自动显示选项、代码排序等。

配置插入符号位置

• 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 一般。在虚拟空间部分，您可以配置插入符号放置选项。

选择允许在行尾后放置插入符号选项以将插入符号放置在与上一行末尾相同的位置的下一行。如果清除此选项，则下一行的插入符号将放置在实际行的末尾。

选择允许在选项卡内放置插入符号选项，以帮助您在文件中上下移动插入符号，同时将其保持在同一位置。

配置保存时尾随空格的行为

• 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 一般。在“其他”部分中，您可以配置尾随空格的选项。

例如，当您手动或自动保存代码并希望在脱字符号行上保留尾随空格时，无论在保存时去除尾随空格列表中选择了哪个选项，请选择始终在脱字符号行上保留尾随空格选项。

配置编辑器外观选项

• 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 一般 | 外观。

例如，您可以配置显示硬包装指南，或显示参数提示。