VS Code中跳至下一个HTML属性及空HTML属性的快捷键咨询

Hey there! Let's break down your questions about VS Code shortcuts for HTML attributes:

1. Jump to the Next HTML Attribute #

By default, VS Code offers a couple of intuitive ways to hop between attributes in an HTML tag, tailored to your operating system:

• Windows/Linux: Use Ctrl+→ (hold the Ctrl key and press the right arrow) to jump directly to the start of the next attribute. Alternatively, pressing Tab will cycle through existing attribute names, values, and even land you at the next attribute position if you’re at the end of a value.
• macOS: Swap out Ctrl for Cmd, so use Cmd+→ for the same navigation behavior.

This works smoothly in standard HTML files, as VS Code automatically recognizes the structure of tags and attributes.

2. Jump to the Next Empty HTML Attribute #

Unfortunately, VS Code doesn’t have a built-in shortcut for this specific action out of the box. But you’ve got two solid options to add this functionality:

Option 1: Use a Dedicated Extension #

Extensions like HTML Attributes Helper add specialized navigation features for empty attributes. Once installed, head to the extension’s documentation to set up a custom shortcut (most extensions let you map keys directly in VS Code’s keyboard shortcuts settings).

Option 2: Customize with Find & Keybindings #

You can leverage VS Code’s find tool with a regex to target empty attributes, then bind a shortcut to jump between matches:

1. Open the find panel with Ctrl+F (Windows/Linux) or Cmd+F (macOS).
2. Enter this regex pattern to match empty attributes: \w+\s*=\s*""
3. To make jumping faster, add a custom shortcut in your keybindings.json (open it by pressing Ctrl+K Ctrl+S then clicking the pencil icon):

{
  "key": "ctrl+alt+]",
  "command": "editor.action.nextMatchFindAction",
  "when": "editorLangId == html && editorFocus"
}

Once the find panel is active with the regex, you can use your custom key combo to jump straight to the next empty attribute.

内容的提问来源于stack exchange，提问作者Davide De Maestri