visual-studio 如何在 Visual Studio 中用 HTML 标记包装选择？

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

提问by dansays

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.

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

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.

更新：这是 TextMate 处理带有标签的选择的方式。坦率地说，我很惊讶 Visual Studio 似乎没有类似的功能。为我可能想要使用的每个可能的标签创建一个宏或片段似乎很荒谬。

回答by D-Jones

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.

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

UPDATE

更新

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

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

Example

例子

Shift+Alt+W > p > Enter

回答by Bradley Mountford

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:

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

1. Select the code you would like to surround.
2. Do ctrl-kctrl-s(or right-click and select Surround with....
3. There are a variety of HTML snippets to choose from.

1. 选择您想要包围的代码。
2. 执行ctrl-kctrl-s（或右键单击并选择Surround with....
3. 有多种 HTML 片段可供选择。

You can create your own SurroundsWith snippets if you do not find what you are looking for:

如果您没有找到您要找的内容，您可以创建自己的 SurroundsWith 片段：

1. Click Fileand then click New, and choose a file type of XML.
2. On the Filemenu, click Save.
3. In the Save asbox, select All Files (*.*).
4. In the File namebox, enter a file name with the .snippetfile name extension.
5. Click Save.

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:

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

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

1. 打开Tools> Code Snippets Manager。
2. 单击Import并浏览到您刚刚创建的代码段。
3. 检查My HTML Snippets并单击Finish，然后单击OK。

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

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

回答by Janspeed

Ctrl-X -> Type tags -> Ctrl-V is still the fastest solution I've seen as mentioned in this answer: https://stackoverflow.com/a/5109994/486325.

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

回答by zhech

If you have Web Essentialsinstalled, you can use Shift+Alt+Wto surround a selection with a tag.

如果您安装了Web Essentials，您可以使用 Shift+Alt+W用标签包围选择。

回答by Chao

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.

我知道这是一个古老的线程，但遇到这个问题后，我终于开始自己制作，因为这是 Google 中的第一个结果，我认为人们可能会觉得这很有用。

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.

实际上这很容易，我只是从现有的 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>

回答by tvanfosson

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.

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

回答by Burak Karaku?

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

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

回答by Ian Jacobs

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.

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