How do I wrap a selection with an HTML tag in 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:

  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!


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

Tags:

Visual Studio

Recent Posts