如何在Visual Studio中用HTML标记包装选择?


110

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

是否存在键盘快捷键(无论是Visual Studio本身还是通过Code Rush或其他第三方插件提供),可以用HTML标记包装当前选择内容?我已经厌倦了键入开始标记,将放错位置的结束标记剪切到剪贴板,移动光标并将其粘贴到其所属的末尾。

更新: 这是TextMate处理带有tag的选择的方式。坦白说,我很惊讶Visual Studio似乎没有类似的功能。为我可能想使用的每个可能的标签创建宏或代码段似乎很荒谬。


您可以用这样的方式编写宏,它会提示您输入用于包装所选内容的标签。如果您愿意,我可以挖出我的宏?
伊恩·雅各布斯

有人找到一种方法了吗?
SamWM

Answers:


132

Visual Studio 2015附带了一个新的快捷键Shift + Alt + W,该快捷键将当前选择内容包装为div。该快捷方式使文本“ div”保持选中状态,从而可以无缝更改为任何所需的标签。结合自动结束标签更换,可以快速解决问题。

更新

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

Shift+Alt+W > p > Enter

在VS2017中仍然适用。
Zze

在VS 2017中对我不起作用。我认为这仅在您具有Web基本知识的情况下有效。
RayLoveless

1
@RayLoveless ctrl-k ctrl-s确实对我有用,并带有一个片段。但是,您的选择必须来自摘录列表(no div),摘录还提供了其他要编辑的字段,这些字段破坏了上面详细介绍的工作流程。一个人可以主张定制片段,但我更喜欢开箱即用的解决方案!
D-Jones

1
@WildJoe您打开了什么样的文件?如果是偶然的xml或xaml文件,我不确定这是否会起作用,因为我相信这仅适用于HTML编辑器。
D-琼斯

1
@WildJoe请参阅此处stackoverflow.com/a/34799783/1647159和此处stackoverflow.com/a/22274313/1647159警告,您可能会最终获得降级的体验
D-Jones

65

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

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

如果找不到所需的内容,则可以创建自己的SurroundsWith代码片段:

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

然后,您将可以使用闪亮的新HTML代码段来打包内容!


2
当您说“单击XML文件,然后单击打开”。你什么意思?单击什么xml文件?
用户

这是一个很好的提示!你知道反面吗?如何删除周围的标签?
三重奏张

@User ...我正在修复它。它不应显示“单击XML文件...”,而应显示“单击文件...”。
2013年

3
这行得通,但它并不完全是捷径,更像是捷径
Pixelomo

@AlanSutherland第一次设置,是的。设置好之后,只需按ctrl-k ctrl-s并选择模板即可。
Bradley Mountford 2014年



8

我知道这是一个古老的话题,但是遇到这个问题后,我终于开始自己动手做了,因为这是Google的第一批成果之一,我认为人们可能会发现这很有用。

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

7

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


3
+1。如此惊人的功能真是太复杂了。
约翰·哈格罗夫

差不多8年后,我仍然使用相同的广告
杰克

7

对于使用Visual Studio 2017的用户:右键单击html/ cshtml区域,或选择一些要包装的元素,Wrap With <div>列表上会有一个按钮。 在此处输入图片说明


1
这是当前选择的答案(使用shift+alt+w)的副本。
Zze

那我该怎么办?顺便说下,Visual Studio 2015年没有这样的UI元素,因为我在当我在写我的回答表明,我只是想表明,有做通过鼠标点击同样的事情在Visual Studio 2017的UI元素
布拉克Karakuş

2

我什么都不知道,但是编写一个宏将其包装在所需的任何标签中都不难。我有一个类似的选择,可以将我的选择包装在一个区域块中。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.