【问题标题】：How do I wrap a selection with an HTML tag in Visual Studio?如何在 Visual Studio 中使用 HTML 标记包装选择？
【发布时间】：2010-09-16 12:41:09
【问题描述】：

这似乎是世界上最基本的问题，但该死的，如果我能找到答案。

是否有一个键盘快捷键，无论是 Visual Studio 自带的还是通过 Code Rush 或其他第三方插件，都可以用 HTML 标记包装当前选择？我厌倦了输入开始标签，将放错位置的结束标签剪切到剪贴板，移动光标并将其粘贴到它所属的末尾。

更新： This is how TextMate handles surrounding a selection with a tag。坦率地说，我很惊讶 Visual Studio 似乎没有类似的功能。为我可能想使用的每个可能的标签创建一个宏或 sn-p 似乎很荒谬。

【问题讨论】：

您可以编写宏，它会提示您使用标签来包装选择。如果你愿意，我可以把我的宏挖出来？
有人找到方法了吗？

标签： visual-studio

【解决方案1】：

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

【讨论】：

+1。对于这样一个简单的功能来说，这是多么复杂，真是令人惊讶。
差不多 8 年后我还在用同样的东西

【解决方案2】：

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

【讨论】：

【解决方案3】：

我知道这已经过时了，您现在可能已经找到了答案，但我想补充一下，为了那些可能不知道的人，这在 VS 2010 中是可能的：

选择要包围的代码。
执行ctrl-kctrl-s（或右键单击并选择Surround with...。
有多种 HTML sn-ps 可供选择。

如果您没有找到所需的内容，您可以使用 sn-ps 创建自己的 Surrounds：

点击File再点击New，选择文件类型XML。
在File 菜单上，单击Save。
在Save as 框中，选择All Files (*.*)。
在File name 框中，输入带有.snippet 文件扩展名的文件名。
点击Save。

在 XML 文件中输入类似于以下示例的内容：

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

打开Tools > Code Snippets Manager。
单击Import 并浏览到您刚刚创建的sn-p。
勾选My HTML Snippets，点击Finish，然后点击OK。

然后，您将拥有闪亮的新 HTML sn-p 用于包装内容！

【讨论】：

当您说“单击 XML 文件，然后单击打开”时。你的意思是？点击什么xml文件？
这是一个很棒的提示！你知道反过来吗？如何删除周围的标签？
@User ...我现在正在修复它。它不应该说“单击 XML 文件...”，而只是“单击文件...”。
这行得通，但它并不完全是一条捷径，更像是一条捷径
@AlanSutherland 第一次设置时，是的。设置好后，只需 ctrl-k ctrl-s 并选择模板即可。

【解决方案4】：

我知道这是一个古老的话题，但是遇到了这个问题，我终于找到了自己的想法，因为这是谷歌的首批结果之一，我认为人们可能会觉得这很有用。

实际上这很简单，我只是从现有的 HTML sn-p 复制并移动文字。下面的 sn-p 将用一个通用的 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>

【讨论】：

【解决方案5】：

Ctrl-X -> 键入标签 -> Ctrl-V 仍然是我见过的最快的解决方案，如此答案中提到的：https://stackoverflow.com/a/5109994/486325。

【讨论】：

【解决方案6】：

如果你安装了Web Essentials，你可以use Shift+Alt+W用标签包围一个选择。

【讨论】：

关于这一点值得一提的是，您只需要突出显示标签，甚至只需将光标放在标签内即可。无需明确选择文本。

【解决方案7】：

Visual Studio 2015 带有一个新的快捷键 Shift+Alt+W，它用 div 包裹当前选择。此快捷方式使文本“div”处于选中状态，使其可以无缝更改为任何所需的标签。这与自动结束标签替换相结合，是一种快速的解决方案。

更新

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

示例

Shift+Alt+W > p > Enter

【讨论】：

在 VS2017 中仍然适用。
在 VS 2017 中对我不起作用。我认为这只有在你有网络必需品的情况下才有效。
@RayLoveless ctrl-k ctrl-s 确实可以让我用 sn-p 包围。但是，您的选择必须来自 sn-p 列表（无 div），并且 sn-ps 提供要编辑的附加字段，这些字段会破坏上面详述的工作流程。人们可能会主张自定义 sn-ps，但我更喜欢开箱即用的解决方案！
@WildJoe 你打开了什么样的文件？如果它是一个 xml 或 xaml 文件，我不确定这是否有效，因为我相信这仅适用于 HTML 编辑器。
@WildJoe 请参阅此处stackoverflow.com/a/34799783/1647159 和此处stackoverflow.com/a/22274313/1647159 警告，您最终可能会遇到降级的体验

【解决方案8】：

对于使用 Visual Studio 2017 的用户：右键单击 html/cshtml 区域，或选择一些要包装的元素，列表中有一个 Wrap With <div> 按钮。

【讨论】：

这是当前选择的答案的副本（使用shift+alt+w）。
那我该怎么办？顺便说一句，Visual Studio 2015 没有我在写作时在回答中显示的 UI 元素，我只是想表明在 Visual Studio 2017 中有一个 UI 元素可以通过鼠标单击来做同样的事情。

【解决方案9】：

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

【讨论】：