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

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.

51001 次浏览
小开

面对这种情况，我通常先键入结束标记，然后键入开始标记。这样可以防止 IDE 通过在我不想要的地方插入结束标记来“帮助”我。不过我也对更好的解决方案感兴趣。

小开

据我所知没有，但是编写一个宏来将它包装到您想要的任何标记中应该不难。我有一个类似的，将包装在一个区域块我的选择。

小开

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. 选择要包围的代码。
  2. 执行 ctrl-k ctrl-s(或右键单击并选择 Surround with...)。
  3. 有各种各样的 HTML 片段可供选择。

如果你没有找到你想要的，你可以用片段创建你自己的环境:

  1. 单击 File，然后单击 New，并选择 XML的文件类型。
  2. 在 File菜单上，单击 Save。
  3. 在 Save as框中，选择 All Files (*.*)。
  4. 在 File name框中，输入扩展名为 .snippet的文件名。
  5. 按 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. 打开 Tools > Code Snippets Manager。
  2. 单击 Import并浏览到刚刚创建的代码段。
  3. 选中 My HTML Snippets，然后单击 Finish，然后单击 OK。

然后，您将拥有可用于包装内容的闪亮的新 HTML 代码片段！

小开

我知道这是一个古老的线程，但遇到了这个问题，我终于抽出时间来做我自己的，因为这是在谷歌的第一个结果之一，我认为人们可能会发现这个有用的。

实际上这很简单，我只是从现有的 HTML 代码片段中复制，然后在文本间移动。下面的代码片段将围绕着一个通用的 HTML 标记，它提示输入标记，并将其放在开始和结束标记中。

<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>
小开

Ctrl-X-> Type tag-> Ctrl-V 仍然是我在答案中提到的最快的解决方案: https://stackoverflow.com/a/5109994/486325。

小开

如果您已经安装了 网页基本资料，您可以使用 使用 Shift + Alt + W来用标签围绕选定内容。

小开
最佳答案

VisualStudio2015提供了一个新的快捷方式 Shift + Alt + W，该快捷方式用 div 包装当前选定内容。这个快捷方式使文本“ div”保持选中状态，使其可以无缝地更改为任何所需的标记。再加上自动更换结束标记，这是一个快速的解决方案。

UPDATE

此快捷方式在 VisualStudio2017中也可用，但您必须安装“ ASP.NET 和 Web 开发”工作负载。

例子

Shift+Alt+W > p > Enter
小开

对于那些使用 Visual Studio 2017: 右键单击 html/cshtml区域，或者选择一些要换行的元素，列表中有一个 Wrap With <div>按钮。 enter image description here

小开

我知道这是一个老问题，但我只是挣扎在同样的事情。您可以安装 Andrés Gutiérrez 的 Emmet Keybindings 扩展。一旦安装，您可以突出显示文本，然后使用控制 + MW 包装与任何标签，您想要的。为了给每一行一个开始和结束标记，在标记后面包括一个 * 。


提交答案