I would like to wrap my selected html within a tag in VS code. How do I do that?
-
1One of the reason I'm unable to completely move to VSCode and ditch Sublime.– budjiOct 5, 2018 at 17:30
-
4@budji Its a built in feature with emmet... Pretty much anything you could want is also an extension now and if it isn't you can always make your own.– James CoyleNov 7, 2018 at 10:03
-
I like this question and I know and extension call (Emmet Wrap with Abbrevation), but anyone would know how to do the inverse actions. For example: write first <p>...</p> and include inside <u>**</u> with this result <p>...<u>**</u>...</p>– JmainolApr 13, 2019 at 13:36
8 Answers
Embedded Emmet could do the trick:
- Select text (optional)
- Open command palette (usually Ctrl+Shift+P)
- Execute
Emmet: Wrap with Abbreviation
- Enter a tag
div
(or an abbreviation.wrapper>p
) - 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
-
3
-
7
-
21
-
2For JSX, had to add this extra step: github.com/Microsoft/vscode/issues/4962#issuecomment-323880988– GezimSep 17, 2018 at 21:21
-
1With VSCode 1.35.0 (and possibly earlier) this works out the box with JSX - no need for any extra config Jun 18, 2019 at 17:45
A quick search on the VSCode marketplace: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap.
Launch VS Code Quick Open (Ctrl+P)
paste
ext install htmltagwrap
and enterselect HTML
press Alt + W (Option + W for Mac).
-
-
2"To use, select a chunk of code and press "Alt + W" ("Option + W" for Mac)." Simple enough! Except it's not working. I tried version 0.0.3 with VS Code 1.16.1. It almost works. It tries to wrap the selection in
<p></p>
tags, instead of the generic<div></div>
which would seem more sane thing to do. What's worse is that it fails. It produces output like<p><p>My selected text.</p>
– SamirSep 19, 2017 at 12:36 -
1I tried other extensions like that. But so far I am not having any luck finding one that works. This one was closest to a working solution. I tried wrap 0.0.1 by David Taylor, and the Ctrl+i didn't work at all.– SamirSep 19, 2017 at 12:49
-
2UPDATE: the extension now works correctly and addresses the above issues. No more duplicate tag, and you can now customize the tag you want to be inserted via a setting. So if you want the tag to be a
<div>
you add the following setting,"htmltagwrap.tag": "div"
. Oct 27, 2017 at 17:58 -
that is pretty poor implementation - works for single tag, it would be nice to have something similar to notepad++ html plugin where you can wrap selection by tag from your configurable tag selection Aug 3, 2018 at 20:14
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.
-
10This is how I have added shortcut: Preferences > Keyamp Shortcuts;... then search emmet wrap;... click + to add your shortcut;... :) Apr 19, 2018 at 10:22
-
2additionally I added && resourceLangId == 'html' to work only for web pages– surpavanDec 19, 2019 at 20:03
-
2@surpavan, nice but It can also be handy to have in other file types e.g. html template files Dec 28, 2019 at 3:05
-
3@AndrewLewis - yes, that is why I kept it to language id and not file extension (files.associations).– surpavanDec 28, 2019 at 11:31
-
1In command I had to write: editor.emmet.action.wrapWithAbbreviation instead of editor.emmet.action.wrapIndividualLinesWithAbbreviation to make it work.– MorfidonMay 19, 2021 at 11:53
- Open Keyboard Shortcuts by typing ⌘ Command+k ⌘ Command+s or
Code > Preferences > Keyboard Shortcuts
- Type
emmet wrap
- Click the plus sign to the left of "Emmet: Wrap with Abbreviation"
- Type ⌥ Option+w
- Press Enter
-
1This one should be the accepted answer as of 2022, straight to the point and you get the shortcut added, thanks! Jan 20 at 15:45
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.
-
1This is fine but Emmet can do this and much more, such as generating nested HTML, attributes and lists. Emmet comes out of the box with VS code. Dec 28, 2019 at 3:01
-
1I don't understand the downvotes. Of course, Emmet is more complex and I can do a lot of things but for wrapping a text selection with a tag this solution is great! When you wrap, you don't have to move your eyes to the upper part of your screen/window. It happens right there, where you already were because you selected the text! It's a pretty common use case and quick solution with a low run time!– Andrei VMay 7, 2020 at 9:09
-
-
The snippet written to file php.json has 'scope' word underlines, and tooltip is saying that 'property scope is not allowed'. Codium, version 1.60– piotaoSep 29, 2021 at 20:52
With VSCode 1.47+ you can simply use OPT-w for this.
Utilizing built-in functionality to trigger emmet, this is the easiest way:
- Select your text/html.
- Shift+Option+w
- In the
emmet
window opened in the command palette, type in the tag or wrapping code you need. - Enter
- Voila
-
6I've not found this to be the case for 1.47.3 on Mac OS. I had to add the keybinding for Opt+w as suggested by the other answers. Aug 6, 2020 at 11:40
-
Worked for me out of the box. Not sure why yours wouldn't. Perhaps you installed a plug-in that overwrote the shortcut? Aug 6, 2020 at 17:17
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).