How to wrap HTML tags in Visual Studio?

Question

This seems like the most important question in the world, but damn if I can find the answer.

Is there a keyboard shortcut, either native to Visual Studio, or using Code Rush or another third-party plugin to wrap the current selection with an HTML tag? I'm tired of typing the opening tag, cutting out the non-local closing tag to the clipboard, moving the cursor and pasting it at the end where it belongs.

Update: This is how TextMate handles the tagging environment . Honestly, I am stunned that Visual Studio does not seem to have a similar feature. Creating a macro or snippet for every conceivable tag that I can use seems absurd.

Answer 1

Visual Studio 2015 comes with a new Shift + Alt + W shortcut that completes the current selection with a div. This shortcut leaves the selected text "div", which makes it easy to change for any desired tag. This, combined with automatic end tag replacement, makes a quick solution.

UPDATE

This shortcut is also available in Visual Studio 2017, but you must have the ASP.NET and Web Development workload installed.

example

Shift+Alt+W > p > Enter 

Answer 2

I know this is a long time ago, and you probably found the answer, but I just wanted to add for the sake of those who may not know that this is possible in VS 2010:

• Choose the code you want to surround.
• Make ctrl-k ctrl-s (or right-click and select Surround with...
• There are many 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 click New and select an XML file type.
• From the File menu, click Save .
• In the Save as field, select All Files (*.*) .
• In the File name field, enter a file name with the .snippet file name extension.
• Click Save .

Enter something like the following example in an 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> 

• Go to Tools > Code Snippets Manager .
• Click Import and go to the fragment you just created.
• Check My HTML Snippets and click Finish and then OK .

After that, you will get your shiny new HTML snippet that you can wrap!

Answer 3

If you have Web Essentials installed, you can use Shift + Alt + W to surround the selection with the tag.

Answer 4

Ctrl-X -> Tag Type -> Ctrl-V is still the fastest solution I saw as mentioned in this answer: https://stackoverflow.com/a/360969/

Answer 5

I know this is an ancient topic, but I ran into a problem that I finally put together to make my own, and since this is one of the first results on Google, I decided that people might find this useful.

Actually it was quite simple, I just copied from an existing HTML fragment and navigated through literals. The next fragment will be surrounded by a common HTML tag, it will suggest a tag and place 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> 

Answer 6

When you encounter this situation, I often print a closing tag and then an opening tag. This prevents the IDE from “helping” by inserting a closing tag where I don't want it. I am also interested in a better solution.

Answer 7

For those who use Visual Studio 2017: right-click on the html / cshtml or select some elements to wrap, there is a Wrap With <div> button in the list.

Answer 8

I don’t know anything, but writing a macro to wrap it in any tag you want should not be difficult. I have a similar one that will cover my selection in the block area.