【问题标题】:Visual Studio - how to quickly wrap text in HTML tags?Visual Studio - 如何在 HTML 标签中快速换行?
【发布时间】:2014-04-05 22:33:01
【问题描述】:

VS 2013 中新的 HTML 编辑器移除了所见即所得模式,并且禁用了格式化工具栏。一般来说,这是好的,但它也使简单的编辑变得更加困难,例如使某些文本变得粗体或斜体更难。

我目前将一些文本加粗的做法是:

  1. 输入<b>
  2. VS 自动完成</b>
  3. 我选择结束标签并按Ctrl+X
  4. 我转到应该加粗的文本的末尾,然后按 Ctrl+V

这比按 Ctrl+B 或类似的东西要方便得多。我知道 Visual Studio 中有“Surround with”命令,有可自定义的键盘快捷键等,所以我希望 Ctrl+B 功能可以在 Visual Studio 中以某种方式实现。有什么聪明的把戏,还是我可能遗漏了其他一些相当简单的东西?

【问题讨论】:

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


【解决方案1】:

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

【讨论】:

  • 这似乎不适用于 .aspx 文件。你找到其他解决方案了吗?我仍然坚持使用您在原始问题中描述的复制/粘贴方法。
  • 你从哪里得知这个 - 我找不到快捷方式概览
  • 谢谢。这是非常有用的快捷方式。
  • 这改变了我的生活
【解决方案2】:

How to quickly surround text with HTML markup in VS 2008? 的一个好建议是:

  1. 选择您的文字
  2. Ctrl+X 将其剪切到剪贴板
  3. 键入您的<strong> 标记,Visual Studio 将自动关闭该标记,而您的光标仍位于开始和结束标记的中间
  4. Ctrl+V 在标签之间重新插入文本

【讨论】:

  • 我真的不同意标准的剪切/粘贴操作是一个有用的答案。
  • 我知道它可能看起来不太优雅,但原始发帖人询问如何快速环绕文本,对我来说,这比发帖人使用的方法更快,而且它是我找到的最快的方法安装 Web Essentials。
  • 简单实用。谢谢你。 ??
【解决方案3】:

你还可以添加一个自定义的 sn-p(我不知道为什么 Visual Studio 默认没有为强标签提供一个 sn-p)。

创建sn-p:

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

  2. 将以下文本放入文本文件中:

    强的 你的名字 强的 用于强文本的标记 sn-p 扩张 环绕声 $selected$$end$]]>

使用sn-p:

  1. 选择你的文字

  2. 右键单击文本并选择“环绕...”,或按 Ctrl-K、Ctrl-S

  3. 在弹出菜单中打开“My HTML Snippets”文件夹并选择你的强sn-p

也可以将 Surround With 命令(在 Edit 类别中)放在工具栏中。

【讨论】:

  • 在 VS 2015 中,HTML 编辑器有一个“使用 div 包装”选项,但是带有设计视图的 HTML(Web 表单)编辑器没有该选项。我刚刚使用了您的 sn-p 解决方案来重新启用该缺失的部分。谢谢!
【解决方案4】:

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

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

2. 使用以下 sn-p 模板:

 <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. 为您的 sn-p 命名,然后使用 (YourFileName.sn-p) 扩展名save-it-as

将 sn-p 添加到 Visual Studio

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

2.DropDown 列表中选择 HTML,然后通过 DoubleClick 打开 HTML 文件夹

4.点击导入按钮,浏览到你的新.sn-p 文件


使用您的自定义片段

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

2. 使用 CTRL+K   CTRL+X 的组合打开 Insert Snippet 对话窗口

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

4. 从列表中选择您的自定义 sn-p。例如,它现在应该使用

标记来包装您的文本


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

Read More about custom snippets



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

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



☕提示
您可以通过提供 language="" 属性并在 部分
中设置正确的描述来创建几乎任何您想要的代码 sn-p 以下是 JavaScript Alert() 函数 代码 sn-p

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

【讨论】:

  • 在 XML 文件中,我们可以使用 Ctrl+K、Ctrl+X 插入类似于此答案中的 sn-p 模板(至少 VS 2017)。
【解决方案5】:

点击你想换行的标签,然后点击Ctrl+Alt+W

【讨论】:

【解决方案6】:

在 Visual Studio 代码中,您可以按名称使用扩展名htmltagwrap

链接

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

安装选项

选项 1. 在 VS Code 扩展选项卡中搜索 htmltagwrap 并安装它。

选项 2。 转到上面提到的市场链接并单击安装,它会提示你使用 VS Code 打开它,一旦你这样做,它就会被安装。

用法

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2010-09-12
    • 2021-08-18
    • 2014-09-12
    • 2014-08-03
    • 2012-07-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多