VS Code 快速跳过自动生成的 HTML 标签

本文介绍了在 VS Code 中快速跳过自动生成的 HTML 标签的方法，主要依赖于 Emmet 插件的功能以及一些常用的键盘快捷键。通过学习 Emmet 的相关命令，并熟练运用键盘快捷键，可以显著提高 HTML/XML 代码的编写效率。

在 VS Code 中编写 HTML 或 XML 代码时，经常会遇到自动生成结束标签的情况，例如输入 <h2>Show Subject*</h2> 后，VS Code 可能会自动生成 </h2>。如果光标位于 * 处，如何快速跳到 </h2> 标签之后，而不是使用方向键或鼠标呢？答案在于利用 VS Code 的强大功能，特别是 Emmet 插件和一些常用的键盘快捷键。

利用 Emmet 插件

Emmet 是一个强大的代码补全工具，VS Code 默认集成了它。它提供了许多方便的功能，可以极大地提高编码效率。

1. Emmet: Go to Matching Pair: 此命令可以快速跳转到匹配的标签的开始或结束位置。您可以通过 Ctrl+Shift+P 打开命令面板，然后输入 Emmet: Go to Matching Pair 来执行此命令。为了更方便地使用，建议将其绑定到一个自定义的快捷键。通过 Ctrl+K Ctrl+S 打开键盘快捷方式设置，搜索 Emmet: Go to Matching Pair，然后设置您喜欢的快捷键组合。

   立即学习“前端免费学习笔记（深入）”；

   例如，您可以将其绑定到 Ctrl+Shift+] 或其他未使用的组合键。设置完成后，当光标位于开始标签或结束标签内部时，按下快捷键即可快速跳转到匹配的标签的另一端。

   操作步骤:

   • Ctrl+K Ctrl+S 打开键盘快捷方式设置。
   • 搜索 Emmet: Go to Matching Pair。
   • 双击搜索结果，输入您想要的快捷键组合，例如 Ctrl+Shift+]。
   • 按下 Enter 键保存设置。

2. 探索 Emmet 命令: 通过 Ctrl+Shift+P 打开命令面板，然后输入 Emmet，可以查看所有可用的 Emmet 命令。花一些时间浏览这些命令，了解它们的功能，可以帮助您更高效地编写代码。

使用键盘快捷键

除了 Emmet 插件，VS Code 还提供了许多常用的键盘快捷键，可以帮助您快速移动光标。

快标书AI

10分钟生成投标方案

241

查看详情

1. End 键: End 键可以直接将光标移动到当前行的末尾。这在很多情况下可以快速跳过自动生成的结束标签。

2. Ctrl + Right Arrow / Ctrl + Left Arrow: 这两个快捷键可以分别将光标向右或向左移动一个单词。

3. Ctrl + Shift + Right Arrow / Ctrl + Shift + Left Arrow: 这两个快捷键可以分别选中光标右侧或左侧的一个单词。

示例：

假设您正在编写以下 HTML 代码：

<h2>Show Subject*</h2>

光标位于 * 处。您可以：

• 按下 End 键，光标直接跳到 </h2> 之后。
• 按下 Ctrl + Right Arrow 键，光标会移动到 Subject 和 </h2> 之间的空格处，再次按下 Ctrl + Right Arrow 键，光标就会跳到 </h2> 之后。

注意事项

• Emmet 插件需要启用才能正常工作。请确保在 VS Code 的设置中启用了 Emmet。
• 不同的键盘快捷键可能会因操作系统和 VS Code 的配置而有所不同。您可以在键盘快捷方式设置中查看和修改这些快捷键。

总结

通过学习和使用 Emmet 插件的功能以及常用的键盘快捷键，可以显著提高在 VS Code 中编写 HTML 和 XML 代码的效率。花一些时间熟悉这些工具和技巧，可以帮助您更高效地完成编码任务。熟练掌握 Emmet: Go to Matching Pair 命令和 End 键，可以让你轻松跳过自动生成的结束标签，提高编码速度。

以上就是VS Code 快速跳过自动生成的 HTML 标签的详细内容，更多请关注php中文网其它相关文章！