How do I wrap a selection with an HTML tag in Visual Studio?

Question

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.

Decrescent

You can write the macro in such a way it will prompt you for the tag to wrap the selection with. I can dig my macro out if you'd like? – Glossa

Anyone found a way to do this yet? – Outbid

Answer 1

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

Darbydarce

Still applicable in VS2017. – Haematite

doesn't work for me in VS 2017. I think this only works if you have web essentials. – Whomp

@Whomp just tried on a fresh install of vs community, desktop workload, and the command isn't available for shortcut binding. However, modifying the install and selecting the "ASP.NET and Web Development" workload brings the command and default shortcut binding in. This is not the same as web essentials, and does not require 3rd party extension. That being said i'm not sure how you'd see an html editor without installing that workload to begin with. – Darbydarce

Kudos @RayLoveless, I've updated my answer with some clarification! – Darbydarce

@D-Jones Does ctrl-k ctrl-s work for you? It works for me. – Whomp

@Whomp ctrl-k ctrl-s does work for me to surround with a snippet. However your choice must come from the snippet list (no div), and the snippets supply additional fields to be edited that break the workflow detailed above. One could argue for custom snippets but i prefer out of the box solutions! – Darbydarce

I can't get this to work. Even installed web essentials. Option just isn't there. – Alda

@Alda if you go to Tools > Options, and select Environment > Keyboard, then in the "Show commands containing" textbox type "WrapWithDiv", the dropdown labeled "Shortcuts for selected command:" should list your shortcut. – Darbydarce

@D-Jones yeah, tried that. It's in there. Keybind was already there. I removed it and re-added it. Still nothing. Tried different keybinds. Still nothing. This is a fresh install too. Odd thing is it works on my PC at work. – Alda

@Alda what kind of file do you have open? if it's an xml or xaml file by chance, i'm not sure this will work, as I believe this only works for HTML editors. – Darbydarce

@D-Jones aspx older project that predates razor. Maybe it only works on cshtml/razor? I'll try it on a newer project tonight. – Alda

@D-Jones yup, that was it. It works fine on razor cshtml, but not on old aspx files. Any way to tell vs that aspx is an html type? – Alda

@Alda see here https://mcmap.net/q/182481/-can-i-tell-visual-studio-how-treat-a-file-with-a-custom-file-extension and here https://mcmap.net/q/182482/-how-does-visual-studio-choose-which-editor-to-use-for-a-file Warning, you might end up with a degraded experience – Darbydarce

how do I do the opposite, take a selection and remove it's outermost div – Singlehearted

Answer 2

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:

1. Select the code you would like to surround.
2. Do ctrl-k ctrl-s (or right-click and select Surround with....
3. 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:

1. Click File and then click New, and choose a file type of XML.
2. On the File menu, click Save .
3. In the Save as box, select All Files (*.*).
4. In the File name box, enter a file name with the .snippet file name extension.
5. 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>

1. Open Tools > Code Snippets Manager.
2. Click Import and browse to the snippet you just created.
3. Check My HTML Snippets and click Finish and then OK.

You will then have your shiny new HTML snippet available for wrapping stuff in!

Rathskeller

When you say "Click XML File and then click Open." What do you mean? click what xml file? – Jeaz

That's a great tip! Do you know the reverse? How can you remove surrounding tags? – Dwanadwane

@Jeaz ... I am fixing it now. It should not say "Click XML File...", just "Click File...". – Intervention

this works but it's not exactly a shortcut, more of a longcut – Nondescript

@AlanSutherland The first time you set it up, yes. Once it is set up then it is a simple matter of ctrl-k ctrl-s and select template. – Rathskeller

To generalize this answer for other types of code (e.g. XML), make sure to change the Language attribute in the <Code> element to "xml" (or one of the other supported languages). Note that the language specified determines which file type this snippet will be available for in Visual Studio. – Workingwoman

...(For example, I used this approach to extend the XML Documentation Comments feature in C#, by wrapping selected words with the <code>tags</code>. But I had to specify Language="csharp") – Workingwoman

Awesome! Is there a way that 'My HTML Snippets' can be made the top snippet suggestion? – Ashok

@RuneJeppesen That I don't know. – Rathskeller

This doesn't work really well with attributes. Right after I warap it into a div and type some attributes it generate the closing tag plus the attributes, like </ div class="row"> I tried type something or click outside the div to get rid of selection and prevent it but didn't worked either. – Masaccio

Answer 3

Ctrl-X -> Type tags -> Ctrl-V is still the fastest solution I've seen as mentioned in this answer: https://mcmap.net/q/182483/-how-to-quickly-surround-text-with-html-markup-in-vs-2008.

Angus

Answer 4

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

Eyetooth

The great thing to mention about this, is that you just need the tag highlighted, or even just having the cursor inside the tag. No need to select the text explicitly. – Courtund

Answer 5

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.

Cashbook

This is a duplicate of the currently chosen answer (using shift+alt+w). – Haematite

What should I do then? By the way, Visual Studio 2015 had no such UI element as I showed in my answer when I was writing, I just wanted to show that there is a UI element to do the same thing via mouse clicks in Visual Studio 2017. – Perrotta

Answer 6

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>

Culler

Answer 7

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.

Cortege

+1. Truly amazing how complicated this is for such a simple feature. – Orgel

Almost 8 years later I'm still use the same – Masaccio

Answer 8

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.

Glossa

Answer 9

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.

Titer