求Visual Studio Code中类似Brackets IDE Quick Markup的扩展
If you loved the fast, shortcut-driven HTML tag wrapping from Brackets' Quick Markup, you’ve got solid options in VS Code—both built-in and via extensions. Here’s what works best for replicating that workflow:
1. Use VS Code’s Built-in Emmet (No Extra Extensions Needed)
VS Code comes with Emmet pre-installed, and you can tweak it to match Quick Markup’s "select text + shortcut to wrap" behavior perfectly.
To set up custom shortcuts for specific tags:
- Open the keyboard shortcuts editor (
Ctrl+K Ctrl+S), then click the icon to openkeybindings.json. - Add entries like these for your preferred tags and shortcuts:
{ "key": "ctrl+b", "command": "editor.emmet.action.wrapWithAbbreviation", "args": "<b>", "when": "editorTextFocus && !editorReadonly" }, { "key": "ctrl+i", "command": "editor.emmet.action.wrapWithAbbreviation", "args": "<i>", "when": "editorTextFocus && !editorReadonly" }, { "key": "ctrl+u", "command": "editor.emmet.action.wrapWithAbbreviation", "args": "<u>", "when": "editorTextFocus && !editorReadonly" }
Now, select any text and hit your chosen shortcut to instantly wrap it in the corresponding tag—just like you did in Brackets.
2. Wrap It! Extension
This extension is built specifically for quick tag wrapping, with robust customization that mirrors Quick Markup’s flexibility:
- Select text and use default shortcuts (like
Ctrl+Shift+Wto open a tag picker), or set up direct one-key shortcuts for your most-used tags. - You can define custom tag mappings in the extension settings, including nested tags and attributes. For example, bind
Ctrl+Alt+Cto wrap text in<div class="container"></div>if that’s a common pattern for you.
3. HTML Wrap Extension
If you want a workflow nearly identical to Quick Markup, this extension is your best bet:
- Activate it with a master shortcut (you can set this to
Ctrl+Alt+Mto match Brackets), then use secondary shortcuts to pick your tag (e.g., pressBfor<b>,Ifor<i>). - It supports customizing both the master trigger and individual tag shortcuts, so you can replicate your exact Quick Markup setup down to every keybind.
All these options let you skip manual tag typing and keep your HTML workflow fast—just like you had in Brackets.
内容的提问来源于stack exchange,提问作者Vishnu M Aiea

