JetBrains Rider 2025.2 Help

语言和框架：HTML

JetBrains Rider 提供了对 HTML 的强大支持，包括语法和错误高亮显示、根据代码样式进行格式化、结构验证、代码补全、调试会话期间的即时预览（Live Edit ）或代码编辑器中的 专用预览标签等功能。

启用 HTML Tools 插件

此功能依赖于 HTML Tools插件，该插件默认在 JetBrains Rider 中捆绑并启用。 如果相关功能不可用，请确保您未禁用该插件。

  1. 按下 Ctrl+Alt+S 打开设置，然后选择 插件。

  2. 打开 已安装 选项卡，找到 HTML Tools插件，并选择插件名称旁边的复选框。

HTML 规范可通过 语言与框架 | 模式和 DTD 设置页面  Ctrl+Alt+S 上的默认 HTML 语言级别首选项进行配置。 默认情况下，假定使用 W3C 的 HTML 5.0 规范。

创建一个 HTML 文件

  1. 在解决方案资源管理器中右键单击项目或目录，然后选择 添加 | HTML 文件。

  2. 在打开的对话框中，输入新文件的名称，不带任何扩展名。 您可以在新文件名之前输入整个目录结构。 如果嵌套目录尚不存在，则会创建它们：

    创建一个 HTML 文件

    JetBrains Rider 基于 HTML file template 创建一个存根文件并在编辑器中打开。

在 HTML 文件中创建引用

在 <script>、 <link> 或 <img> 标签内，JetBrains Rider 会建议您参考文件路径的自动完成。

HTML 中的路径补全

或者，在 资源管理器 工具窗口 Alt+1 中，选择您想要引用的 JavaScript、CSS 或图像文件，并将其拖入 HTML 文件中。 JetBrains Rider 在 <head> 中生成 <script>、 <link> 或 <img> 标签。 对于 <img> 标签，JetBrains Rider 还会生成 宽度 和 高度 属性。

通过拖放生成引用

将代码片段包装在标签中

  1. 选择要包装的代码片段并按 Ctrl+Alt+T 或从主菜单中选择 代码 | 代码包围。

  2. 从列表中选择 用标签包装。 JetBrains Rider 将选定内容用一对括号（<> 和 </> ）括起来。

  3. 在尖括号内键入标签 <>。 JetBrains Rider 会自动填充在闭合括号中的标签 </>。

    将文本包装在标签中

文档查找

对于大多数 HTML 标签和属性，JetBrains Rider 可以向您显示相应的 MDN 文章 摘要。 此摘要显示在 文档 弹出窗口中，该窗口还显示标签或属性的弃用状态以及其与各种浏览器的兼容性信息。

如果该标签或属性在所有版本的浏览器中都可用，JetBrains Rider 不显示任何关于其兼容性的信息。

HTML 快速文档：该属性在所有版本的浏览器中都可用

否则， 文档 弹出窗口还会列出支持该标签或属性的浏览器及其版本。

HTML 快速文档：列出了兼容的浏览器

如果标签或属性已被弃用，弹出窗口也会告知您此状态。

HTML 快速文档：<big> 标签已经废弃

查看标签或属性的文档

  • 将文本光标置于该标签或属性上并按下 Ctrl+Q 或从主菜单中选择 查看 | 快速文档查找。

  • 当您将鼠标悬停在标签或属性上时，JetBrains Rider 会立即在 文档 弹窗中显示相关参考。

    您可以关闭此行为或配置弹出窗口的显示速度，更快或更慢，详见下文 配置文档弹出窗口的行为。

配置文档弹出窗口的行为

  • 要关闭在悬停代码符号时自动显示文档的功能，请点击弹出窗口中的 显示选项菜单图标 ，并禁用 在鼠标移动时显示 选项。

  • 要调整 文档 弹窗的显示速度，请打开 设置/首选项 对话框（Ctrl+Alt+S ），转到 编辑器 | 常规 | 代码完成 ，然后选择 显示文档弹窗 复选框并指定延迟时间。

在浏览器中打开 MDN 文档以了解标签和属性

  • 在 文档 弹出窗口 Ctrl+Q 中，点击底部的链接。

  • 按 Shift+F1 或从主菜单中选择 视图｜外部文档。

预览 HTML 文件的输出

您可以在内置的 JetBrains Rider 预览中或在您选择的浏览器中外部打开 HTML 代码的输出。

默认情况下，在浏览器或内置预览中打开 HTML 文件后，每次手动或自动保存此 HTML 文件（或任何链接的 JavaScript 或样式表文件）时，JetBrains Rider 会自动重新加载页面，详见 保存并撤销更改。

您可以更改默认行为，使页面在您输入时重新加载，这样对 HTML 或相关文件的更改将立即显示在浏览器或内置预览中。 请参见下文的 配置自动重新加载。

JetBrains Rider 内置预览

JetBrains Rider 内置预览使您的工作更快，因为您不再需要切换到浏览器并刷新页面。 预览在一个单独的编辑器选项卡中打开，并根据 reload behavior 自动重新加载，您输入时或保存更改时都会自动重新加载。

内置预览

打开 JetBrains Rider 内置预览

  • 在主菜单中，转到 查看 | 在浏览器中打开 ，然后从列表中选择 JetBrains Rider 图标内置预览。

  • 或者，将鼠标悬停在代码上以显示浏览器图标弹窗，然后点击 JetBrains Rider 图标。

在浏览器中预览 HTML 文件

为确保您的 HTML 代码在生产环境中正确渲染，请在特定浏览器中预览 HTML 文件。

如果您使用内置的 JetBrains Rider Web 服务器，在您保存更改或输入时，页面会自动重新加载，具体取决于 reload behavior。

  • 请移至 查看 | 在浏览器中打开 ，然后从列表中选择所需的浏览器。

    要打开 默认 JetBrains Rider 浏览器 ，请选择 默认。

  • 或者，您可以将鼠标悬停在代码上以显示浏览器图标弹出窗口，然后点击指示所需浏览器的图标： Chrome Firefox Safari Edge Opera

  • 如果您只配置了一个浏览器，只需按 Alt+F2。

在弹出窗口中配置浏览器图标

打开 设置/首选项 对话框（Ctrl+Alt+S ），然后转到 工具 | Web Browsers 和预览。

  • 若要隐藏部分图标，请取消选中不必要浏览器的 有效 复选框。

  • 要隐藏整个弹出窗口，请清除 HTML 文件专用 复选框。

配置自动重载

默认情况下，在浏览器或内置预览中打开 HTML 文件后，每次手动或自动保存此 HTML 文件（或任何链接的 JavaScript 或样式表文件）时，JetBrains Rider 会自动重新加载页面，详见 保存并撤销更改。

保存时重新加载 HTML 页面

当您保存触发页面重新加载的文件时，JetBrains Rider 将显示一个 知道了 工具提示。

保存时重新加载：明白提示

您可以更改默认行为，使页面在您输入时重新加载，这样对 HTML 或相关文件的更改将立即显示在浏览器或内置预览中。

  1. 转到 工具 | Web Browsers 和预览 设置页面&#xa0; Ctrl+Alt+S。 或者，点击 配置 在 知道了! 工具提示中。

  2. 在 重新加载行为 区域，从 在浏览器中重新加载页面 和 在内置预览中重新加载页面 列表中，选择将触发网页浏览器和内置预览中页面自动重新加载的操作。 默认情况下，会选择 保存时。

    • 选择 更改时 ，在您更新相应的 HTML 文件或链接文件时重新加载页面。

    • 选择 已禁用 以禁止自动上传。

在编辑器中查看网页的 HTML 源代码

  1. 按 Ctrl+Shift+A 并从列表中选择 从 URL 打开源代码...。

  2. 在打开的 打开 URL 对话框中，输入网页的 URL 地址或从列表中选择以前打开的 URL。

查看嵌入图像

JetBrains Rider 提供了几种查看嵌入 HTML 文件中图像的方法。 您可以使用 导航到源代码、 在外部图形编辑器中打开图像或者 即时预览图像。

在 JetBrains Rider 中查看图像

  • 在 资源管理器 工具窗口中，找到并选择图像文件。

    或者，将文本光标置于编辑器中引用图像的地方，然后按 Ctrl+B。

  • 要在弹窗中预览图像而不是在单独的选项卡中，选择其引用并按 Ctrl+Shift+I。

在外部编辑器中查看图像

  • 在 资源管理器 工具窗口中，右键点击图像文件，然后选择 跳转到外部编辑器。

    或者按 Ctrl+Alt+F4。

    JetBrains Rider 在编辑器中打开该图像，默认使用您的操作系统中的编辑器。 您可以在 IDE 中 配置另一个图像编辑器 以打开文件。

更改默认外部编辑器

  1. 在编辑器中右键点击图像，然后从上下文菜单中选择 编辑外部编辑器的路径…。

    您也可以按 Ctrl+Shift+A 并输入 编辑外部编辑器路径。

  2. 在 外部编辑器路径 对话框中，指定您想要打开图像的应用程序的路径，然后点击 保存。

    指定外部编辑器的路径

提取包含文件

您可以将一段 HTML 代码提取到一个独立的 include 文件中。 整个 JavaScript 代码块也可以在 <script> 标签内提取。 JetBrains Rider 也建议添加引用而不是所选片段的重复内容。

  1. 在编辑器中，选择要提取的代码块，然后从主菜单或选择的上下文菜单中选择 重构 | 提取 | 提取包含文件。

  2. 在打开的 Extract Include File对话框中，指定不带扩展名的包含文件的名字和存储这个文件的目录。 您可以接受预定义目录或选择其他目录。

  3. 请点击 确定 ，准备就绪后. JetBrains Rider 将选定的源代码提取到目标目录中的指定文件，并在源文件中生成相应的引用。

配置语法高亮

您可以根据自己的偏好和习惯配置 HTML 感知语法高亮显示。

  1. 在 设置/首选项 对话框（Ctrl+Alt+S ）中，转到 编辑器｜颜色方案｜HTML。

  2. 选择颜色方案，接受从默认设置继承的高亮设置，或按照 配色方案：IDE 文本的字体和颜色 中的描述自定义它们。

配置自定义 HTML 标签

JetBrains Rider 了解所有标准 HTML 标签，并报告标记中所有未知的标签。 如果您使用依赖于自定义 HTML 标签的框架，那么这些标签也会被报告为未知，在这种情况下，这将是一个误报。

  • 要将单个 HTML 标签添加到已知自定义标签列表中，请将文本光标放置在高亮显示的标签上，按下 Alt+Enter 并选择 将 [tag] 添加到自定义 HTML 标签。

    JetBrains Rider：未知 HTML 标签的快速修复

  • 要配置多个自定义 HTML 标签，请转到 编辑器｜检查 页面的 设置/首选项 对话框（Ctrl+Alt+S ），找到 HTML | 未知标签 检查，并在右侧的检查选项中配置自定义 HTML 标签列表。

    JetBrains Rider：未知 HTML 标签的检查选项

HTML 中的云补全和整行补全

JetBrains Rider 在 HTML 代码中提供 云补全和 整行补全。

整行代码补全功能使用本地运行的深度学习模型来建议整行代码。 该功能在 JetBrains Rider 中开箱即用，无需额外许可。

启用 HTML 中的整行代码补全

  1. 按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内嵌补全。

  2. 选中 启用本地Full Line 补全建议 复选框，并确保选中 HTML 复选框。

    启用整行补全

由 AI Assistant 驱动的云补全可以基于项目上下文实时自动补全单行代码、代码块，甚至整个函数。

云补全会根据上下文建议语法上可接受的解决方案，并提前运行各种 代码检查 ，以排除会导致错误的选项。

启用 HTML 中的云补全

  1. 安装并启用 AI Assistant 插件。

  2. 按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内嵌补全。

  3. 选中 Enable cloud completion suggestions 复选框，并确保选中 HTML 复选框。

    启用云补全
最后修改日期： 2025年 9月 26日
Tailwind CSS语言和框架：XML