How to do tag wrapping in VS code?

I would like to wrap my selected html within a tag in VS code. How do I do that?

Embedded Emmet could do the trick:

1. Select text (optional)
2. Open command palette (usually Ctrl+Shift+P)
3. Execute Emmet: Wrap with Abbreviation
4. Enter a tag div (or an abbreviation .wrapper>p)
5. Hit Enter

Command can be assigned to a keybinding.

---

This thing even supports passing arguments:

{
	"key": "ctrl+shift+9",
	"command": "editor.emmet.action.wrapWithAbbreviation",
	"when": "editorHasSelection",
	"args": {
		"abbreviation": "span",
	},
},

Use it like this:

• span.myCssClass

• span#myCssId

• b

• b.myCssClass

A quick search on the VSCode marketplace: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap.

1. Launch VS Code Quick Open (Ctrl+P)

2. paste ext install htmltagwrap and enter

3. select HTML

4. press Alt + W (Option + W for Mac).

As I can't comment, I'll expand on Alex's fantastic answer.

If you want the Sublime-like experience with wrapping, open up the Keyboard Shortcuts (command ⌘/Ctrl+shift+P > Preferences: Open Keyboard Shortcuts (JSON)) and add the following object:

{
	"key": "alt+w",
	"command": "editor.emmet.action.wrapWithAbbreviation",
	"when": "editorHasSelection && editorTextFocus"
}

Which will bind the Emmet wrap command to option ⌥/Alt+W when text is selected.

You can also use the UI to do this, open the Keyboard Shortcuts menu and search for "emmet wrap with abbreviation" to add the shortcut.

1. Open Keyboard Shortcuts by typing ⌘ Command+k ⌘ Command+s or Code > Preferences > Keyboard Shortcuts
2. Type emmet wrap
3. Click the plus sign to the left of "Emmet: Wrap with Abbreviation"
4. Type ⌥ Option+w
5. Press Enter

imo there's a better answer for this using Snippets

Create a snippet with a definition like this:

"name_of_your_snippet": {
    "scope": "javascript,html",
    "prefix": "name_of_your_snippet",
    "body": "<${0:b}>$TM_SELECTED_TEXT</${0:b}>"
}

Then bind it to a key in keybindings.json E.g. like this:

{ 
    "key": "alt+w",
    "command": "editor.action.insertSnippet",
    "args": { "name": "name_of_your_snippet" }
}

I think this should give you exactly the same result as htmltagwrap but without having to install an extension.

It will insert tags around selected text, defaults to <b> tag & selects the tag so typing lets you change it.

If you want to use a different default tag just change the b in the body property of the snippet.

With VSCode 1.47+ you can simply use OPT-w for this.

Utilizing built-in functionality to trigger emmet, this is the easiest way:

1. Select your text/html.
2. Shift+Option+w
3. In the emmet window opened in the command palette, type in the tag or wrapping code you need.
4. Enter
5. Voila

Many commands are already attached to simple ctrl+[key], you can also do chorded keybinding like ctrl a+b.

(In case this is your first time reading about chorded keybindings: They work by not letting go of the ctrl key and pressing a second key after the first.)

I have my Emmet: Wrap with Abbreviation bound to ((ctrl) (w+a)).

In windows: File > Preferences > Keyboard Shortcuts ((ctrl) (k+s))> search for Wrap with Abbreviation > double-click > add your combonation.

I just installed htmltagwrap from extension marketplace and used ALT-W to wrap the tags (Windows Version).