WebStorm 2025.2 Help

编写和编辑源代码

在处理代码时，WebStorm 可确保您的工作无压力。 它提供多种快捷键和功能，可帮助您添加、选择、复制、移动、编辑、折叠、查找出现项以及保存代码。

若要导航编辑器中的内容，请参阅 编辑器基础知识。

查找操作

  • 如果您不记得要执行操作的快捷键，请按 Ctrl+Shift+A ，根据名称查找操作。

您也可以使用同一个对话框查找类、文件或符号。 有关详细信息，请参阅 按名称搜索目标（全局搜索）。

切换文件的只读属性

如果文件为只读状态，在 状态栏 、编辑器标签或 项目工具窗口 中会使用关闭的锁图标 锁定图标 标记。 如果文件可写，在状态栏中会使用打开的锁图标 解锁图标 标记。

  1. 在编辑器中打开文件，或在 项目 工具窗口中选择文件。

  2. 请执行以下任一操作：

    • 转到 文件 | 文件属性 | 设为只读 或 文件 | 文件属性 | 设为可写。

    • 单击 状态栏中的锁图标。

如果只读状态是由版本控制系统设置的，建议使用 WebStorm 的版本控制集成功能。 有关详细信息，请参阅 版本控制。

交换字符

  1. 在编辑器中，将插入符号放在您要交换的字符处。

  2. 转到 编辑 | 变换位置。

    此操作没有默认快捷键。 您可以分配一个 自定义快捷键。

代码行

WebStorm 提供多个用于操作代码行的实用快捷键。

  • 要在当前行后添加一行，请按 Shift+Enter。 WebStorm 会将插入符号移动到下一行。

  • 要在当前行前添加一行，请按 Ctrl+Alt+Enter。 WebStorm 会将插入符号移动到上一行。

  • 要复制一行，请按 Ctrl+D。

  • 要按字母顺序对整个文件或选中的代码进行排序，请转到 编辑 | 排序行 或 编辑 | 反转行顺序。 这些操作在处理属性文件、数据集、文本文件、日志文件等时可能会很有帮助。 如果需要为这些操作分配快捷键，请参阅 配置键盘快捷键 了解详情。

  • 要删除一行，请将插入符号定位到所需的行上，然后按 Ctrl+Y。

  • 要合并多行，请将插入符号放在目标行，然后按 Ctrl+Shift+J。 持续按下快捷键，直到所有所需元素合并。

    您还可以合并字符串文本、字段或变量声明以及语句。 请注意，WebStorm 会检查代码样式设置并消除多余的空格和冗余字符。

  • 要将字符串文本分割为两个部分，请按 Enter。

    WebStorm 会拆分字符串并提供正确的语法。 您也可以使用 在 '\n' 处断开字符串 意图来分割字符串文本。 按下 Alt+Enter 或单击 意图操作按钮 以选择此意图操作。

    WebStorm 还提供了一组便捷的意图操作，用于处理字符串字面量，例如将字符串替换为模板字符串，或将嵌套调用替换为 pipe expression。 要查看可用操作，请将插入符号置于字符串字面量内，并按下 Alt+Enter 或单击 意图操作按钮。

    应用字符串操作意图

  • 要注释某行代码，请将插入符号置于相应行，并按 Ctrl+/。 要取消注释，请在同一行再次按 Ctrl+/。

  • 要上下移动一行，请分别按 Alt+Shift+Up 或 Alt+Shift+Down。

  • 要左右移动（交换）XML 或 HTML 标签属性，请将插入符号置于该属性上，或选中它，然后分别按左移用 Ctrl+Alt+Shift+Left ，右移用 Ctrl+Alt+Shift+Right。

    向左或向右移动 HTML 属性

复制并粘贴代码

您可以使用标准快捷键复制 Ctrl+C 并粘贴 Ctrl+V 选中的任何代码片段。 如果未选中任何内容，WebStorm 会自动复制插入符号所在行的整行内容。

默认情况下，当您在编辑器中粘贴内容时，WebStorm 会执行“智能”粘贴，例如在注释块中粘贴多行时，会自动为要粘贴的各行添加适当的标记。 如果只需粘贴纯文本，请按 Ctrl+Alt+Shift+V。

  • 当您在未选中代码的情况下复制（Ctrl+C ）或剪切（Ctrl+X ）一行时，“粘贴”操作会将剪贴板中的内容添加到当前行上方，而不是插入符号的位置。

    如果您希望将复制的代码粘贴到插入符号位置，请在 高级设置 中选择 粘贴到插入符号位置 选项。

  • 将插入符号放到想要操作的行或符号上，右键点击以打开上下文菜单，然后选择 复制/粘贴特殊操作 | 复制引用。 当您选择 复制引用 （Ctrl+Alt+Shift+C ）选项时，WebStorm 会创建包含所选行或符号行号的引用字符串。 您可以按 Ctrl+V 在任意位置粘贴复制的引用。

  • WebStorm 会跟踪您复制到剪贴板的所有内容。 要从剪贴板历史中粘贴内容，请在编辑器中通过上下文菜单选择 复制/粘贴特殊操作 | 从历史记录中粘贴 （Ctrl+Shift+V）。 在打开的对话框中，选择条目并点击 粘贴。

  • 当您将代码复制粘贴到编辑器中时，WebStorm 会以 Unicode 名称缩写的方式显示隐藏（特殊）字符。

代码选择

选择代码结构

  • 在编辑器中，将插入符号放置在需要选中的内容上，然后按 Ctrl+W/Ctrl+Shift+W 以扩大或缩小选区。

    在 JavaScript 文件中，如果您先选择方法调用中的一个参数，接下来将扩展到全部参数，然后是整个方法，再是包含该方法的表达式，接着是更大的表达式块，依此类推。

    代码选择

  • 如需高亮显示括号，请将插入符号直接放在块结束大括号或中括号之后，或者放在块开始大括号或中括号之前。

根据大小写选择代码

  1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 编辑器 | 常规 | 智能键。

  2. 选中 使用"CamelHumps" 单词 复选框。

如果希望根据单词大小写使用双击选择单词，请确保也勾选了下方的 在通过双击进行选择时允许"CamelHumps" 单词 复选框。

CamelHumps 单词设置

代码语句

移动语句

  • 在编辑器中，将插入符号放置在所需语句上，按 Ctrl+Shift+Up 可将语句上移，按 Ctrl+Shift+Down 可将语句下移。 WebStorm 在移动选定语句时会执行语法检查。

完成当前语句

  • 选择一个补全建议并按 Ctrl+Shift+Enter。 WebStorm 会完成语句，自动在其末尾添加分号，并将插入符号置于可继续输入新语句的位置。

    使用 Ctrl+Shift+Enter 完成语句

展开或移除语句

  1. 将插入符号放置在您想删除或展开的表达式处。

  2. 按 Ctrl+Shift+Delete 或从主菜单中选择 代码 | 解包/移除。

    WebStorm 会显示一个弹出窗口，其中包含当前上下文下的所有可用操作。 为便于区分待提取语句和待移除语句，WebStorm 使用不同的背景颜色。

    选择要展开的语句

  3. 选择一个操作并按 Enter。

代码片段

  • 通过在编辑器中拖动代码片段来移动或复制它们。

    • 要移动代码片段，请选中它并将选区拖动到目标位置。

    • 要复制选中的代码，请按住 Ctrl 并将其拖动到目标位置。

    拖动功能默认启用。 要禁用此功能，请在 设置 对话框（Ctrl+Alt+S ）中，转到 编辑器 | 常规 ，并取消选中 通过拖放移动代码片段 复选框，该选项位于 鼠标控制 部分。

  • 要切换选中代码片段的字母大小写，请按 Ctrl+Shift+U。

    请注意，将切换大小写操作应用于 CamelCase 命名格式时，WebStorm 会将名称转换为小写形式。

  • 要注释或取消注释代码片段，请选中它并按 Ctrl+Shift+/。

    默认情况下，当将代码片段括在块注释中时，注释文本直接紧跟在起始 /* 字符后，无空格。 在结束 */ 字符之前也不会插入空格。

    此默认代码样式可能与某些 linter 规则（如 ESLint）冲突。 为优化代码样式，请配置块注释的前导和尾随空格。

    在 设置 对话框（Ctrl+Alt+S ）中，前往 编辑器(E) | 代码样式 | JavaScript 或 编辑器(E) | 代码样式 | TypeScript ，打开 代码生成 选项卡，并在 注释 区域中配置空格和格式。

参数提示

参数提示 显示方法和函数中的参数名称，以增强代码可读性。 默认情况下，参数提示处于启用状态，并且仅对文字或函数表达式类型的值显示，不适用于具名对象。

配置参数提示

  1. 打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 内嵌提示。

  2. 在 参数名称 下展开 <所需语言>。

  3. 通过选中对应的复选框，指定希望显示参数提示的上下文。

    预览会显示您在设置中所做的更改如何影响代码的外观。

  4. 对于某些方法和函数，WebStorm 在任何上下文中都不会显示参数提示。 单击 排除列表... 可查看这些方法和函数，按需为其启用参数提示或将新项添加至列表中。

代码折叠

WebStorm 会自动识别某些代码结构并使其可折叠。 您还可以定义自定义折叠区域。

折叠的代码片段将显示为阴影省略号（折叠片段）。 如果折叠的代码片段中存在错误，WebStorm 会将该片段以红色高亮显示。

默认情况下，边栏中的折叠图标在悬停时显示。 您可以更改此行为，并在 设置 | 编辑器 | 常规 | 代码折叠 中配置其他代码折叠设置。 例如，您可以禁用针对单行 Rust 方法的默认折叠行为：

在主菜单中转到 帮助 | 查找操作 （Ctrl+Shift+A ），然后搜索 folding。 WebStorm 会显示一个弹窗，列出所有折叠操作及其快捷键：

展开或折叠代码元素

  • 要折叠或展开代码片段，请按 Ctrl+NumPad -/Ctrl+NumPad +。 WebStorm 会折叠或展开当前的代码片段，例如一个方法。

  • 要折叠或展开所有代码片段，请按 Ctrl+Shift+NumPad -/Ctrl+Shift+NumPad +。

    WebStorm 会折叠或展开选中内容中的所有片段，若无选中内容，则操作当前文件中的所有片段，例如文件中的所有方法。

  • 要递归折叠或展开代码，请按 Ctrl+Alt+NumPad -/Ctrl+Alt+NumPad +。 WebStorm 会折叠或展开当前片段及其下属所有区域。

  • 要折叠一对匹配的大括号 {} 中的代码块，请按 Ctrl+NumPad -。 要展开该代码块，请按 Ctrl+NumPad +。

  • 要折叠或展开当前文件中的文档注释，请在主菜单中选择 代码 | 折叠 | 展开文档注释 或 折叠文档注释。

  • 要折叠或展开自定义代码片段，请选择该片段并按 Ctrl+.。 或者，将代码片段标记为 自定义折叠区域。

    您可以对任意手动选中的代码区域进行折叠或展开。

折叠或展开嵌套片段

  • 要展开当前片段及其所有嵌套片段，请按 Ctrl+NumPad *, 1。 您可以将当前片段展开到指定的嵌套级别（1 到 5）。

  • 要展开文件中所有已折叠的片段，请按 Ctrl+Shift+NumPad *, 1。 您可以将已折叠的片段展开到指定的嵌套级别（1 到 5）。

自定义折叠区域

您可以通过添加专用注释将任意代码片段标记为 自定义折叠区域 ，使其可折叠。 之后，您可以使用 Ctrl+. 展开和折叠该片段，或设置在打开文件时自动折叠。

创建自定义折叠区域

  1. 在编辑器中，选择一个代码片段并按 Ctrl+Alt+T。

  2. 在弹出菜单中，选择 注释 或 region…endregion 注释。

    //<editor-fold desc="First Names"> const John = firstNames[0]; const James = firstNames[1]; const Nick = firstNames[2]; const Ann = firstNames[3]; const Tom = firstNames[4]; //</editor-fold>
    //region First names const John = firstNames[0]; const James = firstNames[1]; const Nick = firstNames[2]; const Ann = firstNames[3]; const Tom = firstNames[4]; //endregion

    选择 <editor-fold...> 注释 后，WebStorm 会插入格式为 //<editor-fold desc="Description>//</editor-fold> 的注释。 选择 region...endregion 注释 时，插入注释的格式为 //region Description //endregion。

    如果尚未配置任何自定义折叠区域，您可以任选一种样式。 但是，请勿在一个文件中同时使用两种样式。 WebStorm 只识别首次出现的样式，并会忽略另一种样式中的所有注释。

  3. 您也可以选择为折叠片段指定一个描述信息，用于隐藏。

  4. 要折叠或展开所创建的区域，请按 Ctrl+.。

    要在打开文件时自动将所有自定义区域折叠，请打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 常规 | 代码折叠 ，并在 默认折叠 区域中勾选 自定义折叠区域 复选框。

  5. 要跳转到所创建的自定义区域，请按 Ctrl+Alt+.。

配置代码折叠图标

您可以选择如何显示位于边栏中的折叠图标，或完全禁用该图标。

  1. 按 Ctrl+Alt+S 打开设置，然后选择 编辑器 | 常规 | 代码折叠。

  2. 在 显示代码折叠箭头 列表中，选择 总是 或 鼠标悬停时。

    取消选中复选框以禁用图标。

最后修改日期： 2025年 9月 26日
文件嵌套规则编辑器基础知识