Visual Studio - 如何在HTML标记中快速包装文本?

时间:2014-03-04 11:50:27

标签: html visual-studio visual-studio-2013

VS 2013中的新HTML编辑器删除了WYSIWYG模式,并禁用了格式工具栏。这通常是为了好,但它也做了简单的编辑,比如使一些文字变粗或斜体更难。

我目前要做的一些文字是:

  1. 输入<b>
  2. VS自动填充</b>
  3. 我选择结束标记并按Ctrl + X
  4. 我转到应该是粗体的文本的末尾,然后按Ctrl + V
  5. 这比按Ctrl + B或类似的东西要方便得多。我知道在Visual Studio中有“Surround with”命令,有可自定义的键盘快捷键等。所以我希望在Visual Studio中以某种方式实现Ctrl + B功能。有一些聪明的伎俩,还是我可能错过了其他的东西,相当简单?

6 个答案:

答案 0 :(得分:37)

Web Essentials 2013有一个 Surround with tag ... 功能(Alt + Shift + W),它比内置 Surround with 更流畅。我可能只是坚持使用它,因为我正在使用Web Essentials。

答案 1 :(得分:5)

您还可以添加自定义代码段(我不知道为什么Visual Studio默认情况下不为强标记提供代码段)。

要创建代码段:

1)在C:\ Users \ USERNAME \ Documents \ Visual Studio 2013 \ Code Snippets \ Visual Web Developer \ My HTML Snippets中创建一个名为strong.snippet的文本文件

2)将以下文本放在文本文件中:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>strong</Title>
    <Author>YOUR NAME</Author>
    <Shortcut>strong</Shortcut>
    <Description>Markup snippet for a strong text</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Code Language="html"><![CDATA[<strong>$selected$$end$</strong>]]></Code>
  </Snippet>
</CodeSnippet>

使用代码段:

1)选择你的文字

2)右键单击文本并选择“Surround With ...”,或按Ctrl-K,Ctrl-S

3)在弹出菜单中打开“我的HTML Snippets”文件夹,然后选择您的强力代码段

答案 2 :(得分:2)

来自How to quickly surround text with html markup in vs 2008?的好建议是:

  1. 选择文字
  2. 按Ctrl-X将其剪切为剪贴板
  3. 键入您的<strong>标记,当您的光标保留在开始和结束标记的中间时,Visual Studio将自动关闭该标记
  4. 按Ctrl-V在标记之间重新插入文本

答案 3 :(得分:1)

在Visual Studio中创建HTML自定义代码段

1。创建一个新的.xml文件

2。使用以下代码段模板:

 <CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- HTML Anchor Snippet -->
  <Header>
    <Title>P</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>P</Shortcut>
    <Description>Markup snippet for a Paragraph</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>Paragraph</ID>
        <ToolTip>Paragraph</ToolTip>
        <Default>p</Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<p>$selected$</p>$end$]]></Code>

  </Snippet>
</CodeSnippet>

3。为您的代码段命名,并使用 YourFileName.snippet 延伸另存为

将代码段添加到Visual Studio

1。使用代码片段管理器:转到:工具/代码片段管理器/

2。 DropDown 列表中选择HTML,然后在 DoubleClick 上打开 HTML 文件夹。

4。点击导入按钮,然后浏览到新的 .snippet 文件


使用自定义代码段

1。文本编辑器中选择一些文字。

2。使用 CTRL + K CTRL + X 的组合打开插入代码段对话框窗口

3。从您之前保存 .snipped文件的DropDown列表中选择 HTML

4 从列表中选择自定义代码段。它现在应该用&lt; p&gt;&lt; / p&gt; 标记包装您的文本,例如


★再次按照上述步骤创建新的片段。

Read More about custom snippets



☕提示(就像Sublime文本编辑器内置功能一样)
您可以在几秒钟内创建一个Lorem Ipsum自定义代码段:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- HTML Anchor Snippet -->
  <Header>
    <Title>LoremIpsum</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>Lorem</Shortcut>
    <Description>Markup snippet for a Lorem Ipsum</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>Lorem</ID>
        <ToolTip>LoremIpsum</ToolTip>
        <Default>Lorem</Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[$selected$Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit nunc eget consectetur aliquet. Vivamus feugiat ipsum ex, eget egestas erat condimentum eget. Suspendisse luctus velit ac purus venenatis imperdiet sed vel mauris. Ut tempus risus elit, eget molestie purus hendrerit a. Curabitur ac urna posuere, lacinia neque quis, facilisis libero. Cras viverra tellus eu lacus hendrerit, in auctor neque sodales. Pellentesque et finibus lectus. Vestibulum pulvinar, lorem in dignissim fermentum, nunc ipsum luctus arcu, non malesuada nisi sem nec libero. Integer eget arcu interdum, elementum lacus et, ornare arcu. Phasellus quis nulla non enim porta ornare non eget ex. Mauris at purus sed ipsum congue facilisis. Donec tempor, eros ac posuere tempus, velit sapien faucibus augue, vitae convallis augue nulla ut felis. Nunc sapien libero, dictum non finibus nec, rutrum at odio. Nulla facilisi. $end$]]></Code>
  </Snippet>
</CodeSnippet>



☕HINT
您可以通过提供 language =“”属性,并在&lt; code&gt;中设置正确的说明,创建您想要的几乎任何代码段。部分
以下是JavaScript Alert()函数代码段

的示例
<Code Language="JavaScript"><![CDATA[alert($selected$);$end$]]></Code>

答案 4 :(得分:0)

单击要包装的标签,然后按 Ctrl + Alt + W

答案 5 :(得分:0)

在Visual Studio代码中,您可以按名称​​ htmltagwrap

使用扩展名

链接

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

安装选项

选项1。在“ VS代码扩展”标签中搜索htmltagwrap并安装它。

选项2。转到上面提到的市场链接,然后单击“安装”,它将提示您使用VS Code打开它,一旦安装,它将被安装。

用法

  • 选择一个或多个文本块或文本字符串。
  • 对于Mac,请按Alt + W或Option + W。
  • 键入所需的标签名称。