Key binding to wrap a selection with an html tag in VSCode [duplicate]

Question

Is there a default key binding in VSCode to wrap a selection in an HTML tag like the keyboard shortcut Shift+alt+W in Visual studio 2015? I could not find anything similar in documentation or in the default keyboard shortcuts that indicates its availability out of the box.

Chrysostom

Answer 1

To automate this go to.

File > Preferences > Keyboard Shortcuts

and add this into your keybindings.json (right hand side window)

{
    "key": "ctrl+shift+enter",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorTextFocus && !editorReadonly"
}

You can replace ctrl+shift+enter with your own key combination.

Indore

That's true! You can also use the command palette (ctrl+shift+p) and write "emmet wrap" and then autocompletion will show you the command. I am using the command palette quite a lot lately when I don't want to bind any key to a command – Rectangular

Is it possible to specify the tag in the keybinding? e.g., <code>...</code>? – Kussell

Answer 2

you can use this extension: https://github.com/Microsoft/vscode-htmltagwrap

or you can:

1. open the Command Palette: Command/Control+Shift+P (⇧⌘P)
2. type "wrap", then select "Wrap with abbreviation"
3. type the tag you want and press enter

Escalator

This extension allows redefining the default tag (saves some key strokes for me), e.g., for <code>...</code> use "htmltagwrap.tag": "code" – Kussell

As of 2021/1/25, the vscode-htmltagwrap extension was last updated in 2016. I think you'll have better luck with Emmet which is built in to VS Code. See this sibling answer. – Bradski

Answer 3

Or simply search for the HTMLtagwrap extension in VScode, Make selection. Then use Alt + W. Then enter the new tag.

Opprobrious

As of 2021/1/25, the vscode-htmltagwrap extension was last updated in 2016. I think you'll have better luck with Emmet which is built in to VS Code. See this sibling answer. – Bradski