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

How to do tag wrapping in VS code?

提问by hannes neukermans

I would like to wrap my selected html within a tag in VS code. How do I do that?

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

回答by Alex

Embedded Emmetcould do the trick:

嵌入式Emmet可以解决这个问题：

1. Select text (optional)
2. Open command palette (usually Ctrl+Shift+P)
3. Execute Emmet: Wrap with Abbreviation
4. Enter a tag div(or an abbreviation .wrapper>p)
5. Hit Enter

1. 选择文本（可选）
2. 打开命令面板（通常是Ctrl+ Shift+ P）
3. 执行 Emmet: Wrap with Abbreviation
4. 输入标签div（或缩写.wrapper>p）
5. 打 Enter

Command can be assigned to a keybinding.

命令可以分配给键绑定。

---

---

This thing even supports passing arguments:

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

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

Use it like this:

像这样使用它：

• span.myCssClass
• span#myCssId
• b
• b.myCssClass

• span.myCssClass
• span#myCssId
• b
• b.myCssClass

回答by hannes neukermans

A quick search on the VSCode marketplace: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap.

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

1. Launch VS Code Quick Open (Ctrl+P)

2. paste ext install htmltagwrapand enter

3. select HTML

4. press Alt+ W(Option+ Wfor Mac).

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

2. 粘贴ext install htmltagwrap并输入

3. 选择 HTML

4. 按Alt+ W（Mac 为Option+ W）。

回答by Andrew Lewis

As I can't comment, I'll expand on Alex's fantastic answer.

由于我无法发表评论，我将扩展亚历克斯的精彩答案。

If you want the Sublime-like experience with wrapping open up the Keymap Extensions (Preferences > Keymap Extensions [Cmd+KCmd+M]) and add the following object:

如果您想要类似 Sublime 的包装体验，请打开 Keymap Extensions (Preferences > Keymap Extensions [ Cmd+ KCmd+ M]) 并添加以下对象：

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

Which will bind the Emmet wrap command to Alt+Wwhen text is selected

Which will bind the Emmet wrap command to Alt+ Wwhen text is selected

(Sorry for OSX only instructions)

（抱歉仅提供 OSX 说明）

回答by Adam Gonzales

1. Open Keyboard Shortcuts by typing ? Command+k? Command+sor Code > Preferences > Keyboard Shortcuts
2. Type emmet wrap
3. Click the plus sign to the left of "Emmet: Wrap with Abbreviation"
4. Type ? Option+w
5. Press Enter

1. 通过键入? Command+ k? Command+s或打开键盘快捷键Code > Preferences > Keyboard Shortcuts
2. 类型 emmet wrap
3. 单击“Emmet：Wrap with Abbreviation”左侧的加号
4. 类型? Option+w
5. 按 Enter

回答by Unifex

imo there's a better answer for this using Snippets

imo 有一个更好的答案，使用 Snippets

Create a snippet with a definition like this:

创建一个定义如下的片段：

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

Then bind it to a key in keybindings.json E.g. like this:

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

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

I think this should give you exactly the same result as htmltagwrap but without having to install an extension.

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

It will insert tags around selected text, defaults to <b>tag & selects the tag so typing lets you change it.

它将在所选文本周围插入标签，默认为<b>tag & 选择标签，因此输入可以让您更改它。

If you want to use a different default tag just change the bin the bodyproperty of the snippet.

如果您想使用不同的默认标签，只需更改代码片段b的body属性即可。