如何在 VS 代码中进行标签包装？

Posted 2023-02-22

【中文标题】如何在 VS 代码中进行标签包装？

【英文标题】：How to do tag wrapping in VS code?

【发布时间】：2017-03-02 12:56:10

【问题描述】：

我想将我选择的 html 包装在 VS 代码的标签中。 我怎么做？

【问题讨论】：

我无法完全迁移到 VSCode 并放弃 Sublime 的原因之一。

@budji 它是 emmet 的内置功能...您想要的几乎任何东西现在也是一个扩展，如果不是，您可以随时制作自己的。

我喜欢这个问题，而且我知道和扩展电话（Emmet Wrap with Abrevation），但任何人都知道如何做相反的动作。例如：先写

【参考方案1】：

我刚刚从扩展市场安装了 htmltagwrap 并使用 ALT-W 来包装标签（Windows 版本）。

【参考方案2】：

由于我无法发表评论，我将扩展 Alex 的精彩回答。

如果您想要类似 Sublime 的环绕体验，请打开键盘快捷键（command ⌘/Ctrl+shift+P > Preferences: Open Keyboard Shortcuts (JSON)) 并添加以下对象：

    "key": "alt+w",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorHasSelection && editorTextFocus"

这会将 Emmet wrap 命令绑定到 选项 ⌥/Alt+W 选择文本时。

您也可以使用 UI 来执行此操作，打开键盘快捷方式菜单并搜索“emmet wrap with abbreviation”以添加快捷方式。

【讨论】：

这就是我添加快捷方式的方式：Preferences > Keyamp Shortcuts;... 然后搜索 emmet wrap;... 点击 + 添加您的快捷方式；... :)

另外我添加了 && resourceLangId == 'html' 仅适用于网页

@surpavan，很好，但在其他文件类型中也可以很方便，例如html模板文件

@AndrewLewis - 是的，这就是为什么我将其保留为语言 ID 而不是文件扩展名 (files.associations)。

在命令中我必须写：editor.emmet.action.wrapWithAbbreviation 而不是 editor.emmet.action.wrapIndividualLinesWithAbbreviation 以使其工作。

【参考方案3】：

嵌入式Emmet 可以解决问题：

选择文本（可选） 打开命令面板（通常是Ctrl+Shift+P） 执行Emmet: Wrap with Abbreviation 输入标签div（或缩写.wrapper>p） 点击回车

可以将命令分配给键绑定。

---

这个东西甚至支持传递参数：

    "key": "ctrl+shift+9",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorHasSelection",
    "args": 
        "abbreviation": "span",
    ,
,

像这样使用它：

span.myCssClass span#myCssId b b.myCssClass

【讨论】：

marketplace.visualstudio.com/…

这应该是答案，emmet已经安装在vscode中了

Ctrl+p 是 goToFile。命令面板是Ctrl+Shift+P。

对于 JSX，必须添加这个额外的步骤：github.com/Microsoft/vscode/issues/4962#issuecomment-323880988

使用 VSCode 1.35.0（可能更早），这适用于 JSX - 无需任何额外配置

【参考方案4】：

使用 VSCode 1.47+，您只需使用 OPT-w 即可。

利用内置功能触发emmet，这是最简单的方法：

选择您的文本/html。 Shift+选项+w 在命令面板中打开的emmet 窗口中，输入您需要的标记或包装代码。 输入 瞧

【讨论】：

我没有发现 Mac OS 上的 1.47.3 是这种情况。我必须按照其他答案的建议添加 Opt+w 的键绑定。

开箱即用为我工作。不知道为什么你的不会。也许您安装了覆盖快捷方式的插件？

【参考方案5】：

许多命令已经附加到简单的ctrl+[key]，你也可以像ctrl a+b.

（如果这是您第一次阅读和弦键绑定：它们的工作原理是不松开 ctrl 键并在第一个键之后按第二个键。）

我的Emmet: Wrap with Abbreviation 绑定到 ((ctrl) (w+a))。

在 windows 中：文件 > 首选项 > 键盘快捷键 ((ctrl) (k+s))> 搜索 Wrap with Abbreviation >双击 > 添加您的组合。

【参考方案6】：

imo 使用 Snippets 有更好的答案

使用如下定义创建一个 sn-p：

"name_of_your_snippet": 
    "scope": "javascript,html",
    "prefix": "name_of_your_snippet",
    "body": "<$0:b>$TM_SELECTED_TEXT</$0:b>"

然后将其绑定到 keybindings.json 中的一个键，例如像这样：

 
    "key": "alt+w",
    "command": "editor.action.insertSnippet",
    "args":  "name": "name_of_your_snippet" 

我认为这应该会给您与 htmltagwrap 完全相同的结果，但无需安装扩展。

它将在所选文本周围插入标签，默认为<b> 标签并选择标签，因此您可以通过键入来更改它。

如果您想使用不同的默认标记，只需更改 sn-p 的 body 属性中的 b。

【讨论】：

这很好，但 Emmet 可以做到这一点以及更多，例如生成嵌套的 HTML、属性和列表。 Emmet 使用 VS 代码开箱即用。

我不明白反对意见。当然，Emmet 更复杂，我可以做很多事情，但是对于用标签包装文本选择，这个解决方案很棒！换行时，您不必将眼睛移到屏幕/窗口的上部。它发生在那里，因为你选择了文本，你已经在那里！这是一个非常常见的用例和快速解决方案，运行时间短！

我对此感到非常兴奋，但我无法让它发挥作用：/

写入文件 php.json 的 sn-p 有“范围”字下划线，并且工具提示说“不允许属性范围”。 Codium，1.60 版

【参考方案7】：

通过键入 ⌘ 命令+k ⌘ 命令+s 或Code > Preferences > Keyboard Shortcuts 打开键盘快捷键 输入emmet wrap 点击“Emmet: Wrap with Abbreviation”左侧的加号 键入 ⌥ 选项+w 按 Enter

【参考方案8】：

在 VSCode 市场上快速搜索：https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap。

启动 VS Code 快速打开 (Ctrl+P)

粘贴ext install htmltagwrap并输入

选择 HTML

按 Alt + W（Option + W for Mac）。

【讨论】：

您的意思可能是在第 3 步选择安装。

“要使用，请选择一段代码并按“Alt + W”（Mac 为“Option + W”）。够简单！除了它不工作。我用 VS Code 1.16.1 尝试了 0.0.3 版。它几乎有效。它试图将选择包装在<p></p> 标签中，而不是通用的<div></div>，这似乎更明智。更糟糕的是它失败了。它产生像<p><p>My selected text.</p>

这样的输出

我尝试过其他类似的扩展。但到目前为止，我还没有找到一个有效的方法。这是最接近可行的解决方案。我尝试了 David Taylor 的 wrap 0.0.1，但 Ctrl+i 根本不起作用。

更新：该扩展现在可以正常工作并解决上述问题。不再有重复标签，您现在可以通过设置自定义要插入的标签。因此，如果您希望标签为 <div>，则添加以下设置，"htmltagwrap.tag": "div"。

这是一个非常糟糕的实现 - 适用于单个标签，如果有类似于 notepad++ html 插件的东西，您可以从可配置标签选择中按标签包装选择