Sublime Text 2 在标签中包装选择答案

【问题标题】：Sublime Text 2 wrapping selection in tagSublime Text 2 在标签中包装选择
【发布时间】：2013-06-23 15:58:55
【问题描述】：

在 ST2 中，突出显示某些文本并按 alt + shift + w（在 Windows 上）会将当前选择包含在 <p></p> 中标签。但是有没有办法指定要包装的 which 标签？因为也许我想换成一个跨度，或者一个 div。

【问题讨论】：

试试 emmet docs.emmet.io/actions/wrap-with-abbreviation
@Chef 谢谢，成功了。我在下面添加了这个作为答案。
@Chef 应该是添加答案的人。
Emmet 有效，但只是作为附加说明。我相信ctrl+shift+w 绑定只是插入了一个sn-p。然后它将光标放置在创建的标签内。您应该可以从那里为标签输入任意内容。
默认是Alt+Shift+w 来包装标签。您的快捷方式会关闭整个窗口以及 Windows 上的所有选项卡。我失去了尝试该操作的所有撤消功能。

标签： tags keyboard-shortcuts sublimetext2 word-wrap

【解决方案1】：

使用 Emmet，将光标放在要换行的标签上，然后按 ctrl + w（对于 MacOS）或 Alt+Shift+W（对于Windows），会弹出一个框来输入你想换行的标签类型。

【讨论】：

你在windows上吗？试试 Alt-Shift-W。在 windows 中， ctrl + w 是关闭选项卡的快捷方式。
如果你在安装了 Emmet 包的 windows 上使用 sublime text，你需要使用 Shift+Ctrl+G
在 Sublime Text 3 上，它与 CTRL + SHIFT + G 以及 ALT + SHIFT + W 一起使用
Emmet 不是必需的。
埃米特很棒。我喜欢它，但你不需要它来实现这个功能。请参阅此页面上 @janaspage 的回复。

【解决方案2】：

单行

如果你想转换这个

Lorem ipsum dolor sit amet.

到这里

<div>Lorem ipsum dolor sit amet.</div>

这样做：

选择文本，或按CTRL + L（将选择当前行）
按 ALT + SHIFT + W
键入所需的标签（它将覆盖默认的 p 标签）

多行

如果你想转换这个

Item 1
Item 2
Item 3

到这里

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

这样做：

选择文本，或按CTRL + L多次
按 CTRL + SHIFT + L（每行选择一个）
按 ALT + SHIFT + W
键入所需的标签（它将覆盖默认的 p 标签）

您也可以使用SHIFT + 鼠标右键选择文本，在这种情况下您可以跳过第二步。

使用 Emmet

如果你想转换这个

Item 1
Item 2
Item 3

到这里

<nav>
  <ul class="nav">
    <li class="nav-item1"><a href="">Item 1</a></li>
    <li class="nav-item2"><a href="">Item 2</a></li>
    <li class="nav-item3"><a href="">Item 3</a></li>
  </ul>
</nav>

这样做：

选择文字
按 SHIFT + CTRL + G (wrap with abbreviation)
键入 nav>ul.nav>li.nav-item$*>a

Mac 用户注意事项：

ALT + SHIFT + W = CTRL + SHIFT + W

CTRL + SHIFT + L = CMD + SHIFT + L

【讨论】：

哇。这是一个更好的答案:)

【解决方案3】：

答案都很好。这是用于自定义键绑定的地方：

在首选项：键绑定 - 默认：

{ 
  "keys": ["ctrl+shift+w"], "command": "insert_snippet", 
  "args": { "name": "Packages/XML/long-tag.sublime-snippet" } 
}

如果你有 Emmet，则 emmet 版本是

{ "keys": ["super+shift+w"], "command": "wrap_as_you_type"}

在 Preferences: Key Bindings - User 中根据自己的喜好编辑它们，

【讨论】：

【解决方案4】：

创建一个自定义的 sn-p，例如，插入一个 span 标签。进入应用菜单：Tools > New Snippet ...，将下面的sn-p复制到窗口：

<snippet>
    <content><![CDATA[
<span style="color:#0000FF">$SELECTION$1</span>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>span</tabTrigger>
    <description>HTML - span - color - blue</description>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.html</scope>
</snippet>

... 然后将 sn-p 保存到文件中，例如html-span--color 命名并将该 sn-p 绑定到 Preferences > Key Bindings-User 中的组合键，创建一个新的键条目，例如：

{ "keys": ["alt+shift+c"], "command": "insert_snippet", "args": { "name": "Packages/User/html-span--color.sublime-snippet" } }

假设sn-p的位置是Packages/User/目录。

现在选择需要在 span 标签中换行的任何文本，然后按 Alt+Shift+c 或输入“span”，按 Tab，光标将被设置到标签内所需的位置，只需输入您的文本。

我已经在 Ubuntu Linux 中成功测试了与 Sublime Text 3 的 sn-p 和键绑定。

【讨论】：

这似乎在 SublimeText3 中移动了：现在它落后于Tools > Developer > New Snippet...

【解决方案5】：

在 Sublime text3 中让您的生活更轻松：输入其中任何一个（p、h1、div、页眉、页脚、标题...）并点击Tab 例如，如果你想要 div 只需输入 div 并点击 Tab

【讨论】：

这在这种情况下并没有真正的帮助，因为 OP 正在谈论将 现有文本 包装在标签中，而不是从头开始。

【解决方案6】：

在 ST2 中键入不带括号的标签并点击 Tab。它会自动给你打开和关闭标签

【讨论】：

欢迎来到 SO 并感谢您回答问题。您能否为您的答案提供更多背景信息。此外，更多提示可以在Help Center 中找到。

【解决方案7】：

与 Dreamweaver 中提供的机制相比，这种插入 sn-ps 的系统非常繁琐。在这种情况下，您可以构建任何类型的 sn-p。它存储在 RAM 库中，并以目录样式的结构显示。您声明 sn-p 是 INSERT 类型（在光标位置）还是 SPAN 类型（跨越选定文本）。在第一种情况下，插入整个 sn-p。在第二种情况下，sn-p 是使用“之前”部分和“之后”部分创建的。通常，“之后”部分只是结束标记。要使用 INSERT HERE 模式，请定位光标，然后双击库中的 sn-p 并将其插入到光标位置。要使用 SPAN SELECTED TEXT 模式，请突出显示您想要的文本，然后双击库中的 sn-p。所选文本被 sn-p 的“之前”和“之后”部分包围。这非常直观，易于使用，并且使用户能够构建可以跨越选定文本的无限种类的 sn-ps。一些非常聪明的程序员会为 SUBLIME 3 构建这样的扩展吗？注意：相比之下，Bracket Highlighter 是一个带有包装功能的 Sublime 插件，似乎具有这样的功能，但仔细观察，如果您想即时构建高效的 sn-p 库，使用起来太麻烦了. 谢谢，彼得·罗斯蒂

【讨论】：