WebStorm 2025.2 Help

代码样式。 HTML

使用此页面配置 HTML 文件的格式设置选项。 更改这些设置时, 预览 窗格将展示这些更改对代码的影响。

制表符与缩进

使用制表符字符

  • 选中此复选框后,将使用制表符字符:

    • 按下 Tab 键时

    • 用于缩进

    • 用于代码重排

  • 如果取消选中此复选框,WebStorm 将使用空格代替制表符。

智能制表符

缩进由两个部分组成。 一部分来自代码块嵌套,另一部分由对齐方式决定。

  • 选中此复选框时,来自嵌套的部分将视需要同时包含制表符与空格,而对齐部分仅包含空格。

  • 取消选中该复选框时,将仅使用制表符。这意味着在代码重排后,与设定的制表符宽度相符的一组空格将自动被替换为制表符,这可能导致精细对齐被破坏。 这意味着在代码重排后,与设定的制表符宽度相符的一组空格将自动被替换为制表符,这可能导致精细对齐被破坏。

制表符宽度

在此字段中,指定一个制表符所对应的空格数。

缩进

在此字段中,为每个缩进级别指定要插入的空格数。

续行缩进

在此字段中,指定数组元素、表达式、方法声明和方法调用各元素之间要插入的空格数量。

保留空行缩进

选中此复选框时,WebStorm 将保留空行上的缩进,就像这些行中包含代码一样。如果取消选中此复选框,WebStorm 将删除空行中的制表符字符和空格。 如果取消选中此复选框,WebStorm 将删除空行中的制表符字符和空格。

其他

项目

描述

右边距

使用这些设置来指定元素右侧所需的边距空间。 若选择 默认 选项,则右边距的值将使用 全局设置中的设置。

输入时自动换行

使用这些设置可以指定如何在指定的 右边距 中适配编辑文本。

您可以选择以下选项之一:

  • 默认 — 在此情况下,WebStorm 使用 输入时自动换行 选项,该选项在 全局设置中指定。

  • — 在此情况下,使用指定右边距中的值。

  • — 在此情况下,该选项将禁用,某行可超过右边距中指定的字符数。

保留换行符

选中此复选框后,WebStorm 会在编辑器中查看 HTML 文件时保留换行符。

保留文本中的换行符

选中此复选框后,WebStorm 会在编辑器中查看 HTML 文件时保留属性(例如较长描述)中的换行符。

保留空白行

在此字段中,指定重新格式化后应保留的最少连续空白行数。

换行属性

使用此下拉列表指定属性行的换行方式。 可用选项包括:

  • 不换行 — 选中此选项时,代码不采用特殊的换行方式。

  • 过长换行 — 选择该选项后,超出右边距的行将按正确缩进方式自动换行。

  • 过长截断 — 选择该选项后,超出右边距的列表元素将按正确缩进方式换行,每行一个元素。

  • 始终换行 — 选择该选项后,列表中所有元素都将按正确缩进方式换行,每行一个元素。

换行文本

选中此复选框后,将根据代码样式设置为长行换行。

对齐属性

选中此复选框后,将对齐连续行中的属性。

对齐文本

选中此复选框后,WebStorm 将对齐标签内分布于多行的文本内容。

保留空格

选中此复选框可阻止将实际空格替换为制表符。

空格

在此区域中定义属性与标签名称使用空格的方式。

  • 属性中的 "=" 两侧 — 选中此复选框可在属性中的 "=" 符号两侧添加空格。

  • 标签名后 — 选中此复选框可在标签名称之后添加空格。

  • 空标签中 — 选中此复选框可在空标签中添加空格。

在之前插入新行

这个显示字段展示了在其前应插入新行的选项卡列表。 使用字段右侧的按钮 或按 Shift+Enter 以打开 在标签前插入换行符 对话框,在此处可编辑标签列表。

在之前移除新行

这个显示字段展示了一个选项卡列表,在这些选项卡前应删除换行符。 使用字段右侧的按钮 或按 Shift+Enter 以打开 在标签前移除换行符 对话框,在此处可编辑标签列表。

不缩进其子标签

这个显示字段显示了一个选项卡列表,这些选项卡的子元素不应该进行缩进。 使用字段右侧的按钮 或按 Shift+Enter 以打开 不缩进其子项 对话框,在此处可编辑标签列表。

或当标签长度超过

在此字段中,指定标签的最小行数,从该长度开始,其子标签将不再缩进。

内联元素

这个显示字段显示了在源代码中与其他选项卡在同一行呈现的选项卡列表。 如果从列表中移除了某个标签,则当您将该标签添加到源代码时,编辑器会自动将其移至新行。 使用字段右侧的按钮 或按 Shift+Enter 以打开 内联元素 对话框,在此处可编辑标签列表。

保留内部空白字符

这个显示字段显示了一个选项卡列表,您希望编辑器在这些选项卡内保留空白 原样 ,不做任何更改。 使用字段右侧的按钮 或按 Shift+Enter 以打开 保留内部空格 对话框,在此处可编辑标签列表。

如果是内联内容则不换行

这个显示字段展示了一个选项卡列表,如果它们的内容已被内联,则不应被包装。 使用字段右侧的按钮 或按 Shift+Enter 以打开 仅含内联内容时不换行 对话框,在此处可编辑标签列表。

生成的引号

选择在键入 = 时自动插入到 HTML 属性周围的引号样式(双引号、单引号或不使用引号)。

此设置在使用 JavaScript 动态插入 HTML 时非常重要,并且希望为 JavaScript 字符串始终使用双引号、为 HTML 使用单引号,以避免问题,例如在复制和粘贴时出现问题。

格式化时强制应用

如果选中该复选框,则在 重新格式化代码时,会替换之前生成的引号(例如,将双引号替换为单引号)。

排列

在此选项卡中,定义一组规则,以根据您的偏好重新排列 HTML 代码。

匹配规则

在此区域定义元素顺序,这是一组规则的列表,每个规则有一组匹配项,如修饰符或类型。

  • — 使用此按钮添加规则。 将打开 空规则 区域。

  • — 使用此按钮从列表中删除规则。

  • — 使用此按钮编辑现有规则。 要查看该按钮,请导航至要编辑的规则并单击该按钮。 在打开的弹出窗口中修改规则字段。

  • — 使用这些按钮上移或下移所选规则。

空规则

使用这个区域创建新的匹配规则,或编辑已有的规则。 您可以从以下筛选器中进行选择:

  • 类型 — 使用此筛选器为规则选择标签或属性。 请注意,再次单击类型关键字将反转条件。

  • 名称 — 使用此字段为规则指定条目名称。 该筛选器仅匹配条目名称,例如标签名称或属性名称。 该筛选器支持正则表达式,并使用 标准语法。 匹配将针对整个名称执行。

  • 命名空间 — 使用此字段在规则中指定命名空间。 可用于指定控制命名空间属性位置的规则。

  • 顺序 — 使用此下拉列表选择规则的排序顺序。 当多个元素使用相同的匹配规则时,此选项非常有用。 在这种情况下,选择 Keep order 将保留重新排列前设置的顺序,而选择 Order by Name 将按名称对具有相同匹配规则的元素进行排序。

icon_sort.png

当您从 顺序 列表中选择 Order by Name 时,将显示此图标。 该图标表示此规则中的项按字母顺序排序。

代码生成

在该选项卡中配置生成代码的代码样式。

注释

在此区域中配置生成注释的代码样式。

  • 行注释在第一列 :选中此复选框可从首列开始行注释。 清除该复选框时,行注释将在代码中对齐。

    首列行注释已清除
    首列行注释已选中
  • 注释块在第一列 :默认情况下,取消选中此复选框,并且块注释在代码中对齐。 选中此复选框可从首列开始块注释。

    首列块注释为关闭状态
    首列块注释为开启状态
  • 在块注释周围添加空格 :选中此复选框可在块注释中添加前导空格和尾随空格。

    默认情况下,当您将代码片段包裹在块注释中时,文本会紧跟在起始 <!-- 字符之后,不包含空格。 在结束 --> 字符之前也不会插入空格。 此默认代码样式可能与某些 linter 规则冲突,例如 ESLint。

    未在块注释起始添加空格
    已在块注释起始添加空格

设置来源

该链接在适用时出现在页面的右上角。 单击此链接,然后选择要作为当前语言代码样式基础的语言。

要恢复初始代码样式设置并放弃所做更改,请单击 重置

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