How to do tag wrapping in VS code?

Question

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

Answer 1

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

Answer 2

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).

Answer 3

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.

Answer 4

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

Answer 5

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 Eg 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.

Answer 6

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

Answer 7

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.

Answer 8

我刚刚从扩展市场安装了 htmltagwrap 并使用 ALT-W 来包装标签（Windows 版本）。

Answer 9

There is a fast typing of the solution.

1. Open the command palette (usually Ctrl+Shift+P)

2. Preferences: Open Keyboard Shortcuts (JSON)

3. Add this snap code

   { "key": "ctrl+`", "command": "editor.action.insertSnippet", "when": "editorTextFocus", "args": { "snippet": "~~${TM_SELECTED_TEXT/^([\\t]*).*$/$1/}${TM_SELECTED_TEXT/^[\\t]*(.*)$/$1/}${TM_SELECTED_TEXT/^([\\t]*).*$/$1/}~~" }, }

4. You select any text and press ctrl+`

result:

~~YourText~~