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

Question

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

Answer 1

嵌入式Emmet可以做到这一点:

1. 选择文字(可选)
2. 打开命令调色板(通常为Ctrl+ Shift+ P)
3. 执行 Emmet: Wrap with Abbreviation
4. 输入标签div(或缩写.wrapper>p)
5. 击中 Enter

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

Answer 2

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

1. 启动VS Code Quick Open(Ctrl+ P)

2. 粘贴ext install htmltagwrap并输入

3. 选择HTML

4. 按Alt+ W(Option+ W对于Mac).

Answer 3

由于我无法评论,我将扩展Alex的精彩答案.

如果你想要像Sublime一样的经验包装打开Keymap Extensions(Preferences> Keymap Extensions [ Cmd+ K Cmd+ M])并添加以下对象:

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

当选择文本时,将Emmet包装命令绑定到Alt+W

(对不起OSX指令)

Answer 4

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

Answer 5

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

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

"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>tag & 选择标签，因此输入可以让您更改它。

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

Answer 6

使用 VSCode 1.47+，您可以简单地使用 OPT-w。

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

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