How do I wrap a selection with an HTML tag in Visual Studio?
Visual StudioVisual Studio Problem Overview
This seems like the most basic question in the world, but damned if I can find an answer.
Is there a keyboard shortcut, either native to Visual Studio or through Code Rush or other third-party plug-in, to wrap the current selection with an HTML tag? I'm tired of typing the opening tag, cutting the misplaced closing tag to the clipboard, moving the cursor, and pasting it at the end where it belongs.
Update: This is how TextMate handles surrounding a selection with a tag. Frankly, I'm stunned that Visual Studio doesn't seem to have a similar feature. Creating a macro or snippet for every conceivable tag I might want to use seems absurd.
Visual Studio Solutions
Solution 1 - Visual Studio
Visual Studio 2015 comes with a new shortcut, Shift+Alt+W, that wraps the current selection with a div. This shortcut leaves the text "div" selected, making it seamlessly changeable to any desired tag. This coupled with the automatic end tag replacement makes for a quick solution.
UPDATE
This shortcut is available in Visual Studio 2017 as well, but you must have the "ASP.NET and Web Development" workload installed.
Example
Shift+Alt+W > p > Enter
Solution 2 - Visual Studio
I know this is old and you have probably found the answer by now but I would just like to add for the sake of those who might not know it that this is possible in VS 2010:
- Select the code you would like to surround.
- Do
ctrl-k
ctrl-s
(or right-click and selectSurround with...
. - There are a variety of HTML snippets to choose from.
You can create your own SurroundsWith snippets if you do not find what you are looking for:
- Click
File
and then clickNew
, and choose a file type ofXML
. - On the
File
menu, clickSave
. - In the
Save as
box, selectAll Files (*.*)
. - In the
File name
box, enter a file name with the.snippet
file name extension. - Click
Save
.
Enter something like the following sample in the XML file:
<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<Header>
<Title>ul-div</Title>
<Author>Microsoft Corporation</Author>
<Shortcut>ul>li</Shortcut>
<Description>Wrap in a ul and then an li</Description>
<SnippetTypes>
<SnippetType>Expansion</SnippetType>
<SnippetType>SurroundsWith</SnippetType>
</SnippetTypes>
</Header>
<Snippet>
<Declarations>
<Literal>
<ID>selected</ID>
<ToolTip>content</ToolTip>
<Default>content</Default>
</Literal>
</Declarations>
<Code Language="html"><![CDATA[<ul><li>$selected$</li></ul>$end$]]></Code>
</Snippet>
</CodeSnippet>
- Open
Tools
>Code Snippets Manager
. - Click
Import
and browse to the snippet you just created. - Check
My HTML Snippets
and clickFinish
and thenOK
.
You will then have your shiny new HTML snippet available for wrapping stuff in!
Solution 3 - Visual Studio
Ctrl-X -> Type tags -> Ctrl-V is still the fastest solution I've seen as mentioned in this answer: https://stackoverflow.com/a/5109994/486325.
Solution 4 - Visual Studio
If you have Web Essentials installed, you can use Shift+Alt+W to surround a selection with a tag.
Solution 5 - Visual Studio
For those who use Visual Studio 2017: Right click on an html
/cshtml
area, or select some elements to wrap, there is a Wrap With <div>
button on the list.
Solution 6 - Visual Studio
I know this is an ancient thread but having come up against the issue I finally got round to making my own and as this is one of the first results in Google I figured people might find this useful.
Actually it was pretty easy, I just copied from an existing HTML snippet and moved around the literals. The following snippet will surround with a generic HTML tag, it prompts for the tag and will put it in both the opening and closing tags.
<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<!-- Generic HTML Snippet -->
<Header>
<Title>Html</Title>
<Author>Liam Slater</Author>
<Shortcut>h</Shortcut>
<Description>Markup snippet for HTML</Description>
<SnippetTypes>
<SnippetType>SurroundsWith</SnippetType>
</SnippetTypes>
</Header>
<Snippet>
<Declarations>
<Literal>
<ID>tag</ID>
<ToolTip>tag</ToolTip>
<Default></Default>
</Literal>
<Literal>
<ID>selected</ID>
<ToolTip>content</ToolTip>
<Default>content</Default>
</Literal>
</Declarations>
<Code Language="html"><![CDATA[<$tag$>$selected$</$tag$>$end$]]></Code>
</Snippet>
</CodeSnippet>
Solution 7 - Visual Studio
When faced with this situation, I often type the closing tag first, then the opening tag. This prevents the IDE from "helping" by inserting the closing tag where I don't want it. I'm also interested in a better solution, though.
Solution 8 - Visual Studio
Nothing I'm aware of, but writing a macro to wrap it in whatever tag you want shouldn't be hard. I have a similar one that will wrap my selection in a region block.
Solution 9 - Visual Studio
I know this is an old question but I was just struggling with the same thing. You can install the Emmet Keybindings extension by Andrés Gutiérrez. Once installed you can highlight text then use control + MW to wrap with any tag you'd like. To give each line an opening and closing tag include an * after the tag.