如何做标签包装在VS代码?

我想在VS代码的标签中包装我所选择的html。 我怎么做呢?< / p >

180058 次浏览

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

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

  2. 粘贴ext install htmltagwrap并进入

  3. 选择HTML

  4. 按< kbd > Alt < / kbd > + < kbd > W < / kbd > (< kbd >选择< / kbd > + < kbd > W < / kbd > Mac)。

嵌入式埃米特可以做到这一点:

  1. 选择文本(可选)
  2. 打开命令面板(通常是Ctrl+转变+P)
  3. 执行Emmet: Wrap with Abbreviation
  4. 输入标记div(或缩写.wrapper>p)
  5. 打击输入

命令可以分配给键绑定。

enter image description here


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

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

像这样使用它:

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

由于我不能评论,我将详述亚历克斯的精彩答案。

如果你想要类似于sublime的换行体验,打开键盘快捷键(命令⌘/Ctrl+转变+P >打开键盘快捷键(JSON)),并添加以下对象:

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

将Emmet wrap命令绑定到选项 当选择文本时,/Alt+W 你也可以使用用户界面来做到这一点,打开键盘快捷键菜单,搜索“emmet wrap with缩写”;添加快捷方式。 enter image description here < / p >

  1. 通过键入⌘命令+k ⌘命令+年代Code > Preferences > Keyboard Shortcuts打开键盘快捷键
  2. 类型emmet wrap
  3. 点击“Emmet: Wrap with缩写”左边的加号
  4. 类型⌥选项 + w
  5. 新闻输入

在我看来,使用snippet有一个更好的答案

用这样的定义创建一个代码片段:

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

然后在键绑定中将其绑定到一个键。例如:

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

我认为这应该给你完全相同的结果htmlltagwrap,但不需要安装扩展。

它将在所选文本周围插入标签,默认为<b> tag &选择标记,这样输入就可以更改它。

如果你想使用不同的默认标记,只需更改代码片段的body属性中的b

在VSCode 1.47+中,你可以简单地使用OPT-w。

利用内置功能来触发emmet,这是最简单的方法:

  1. 选择你的text/html。
  2. 转变 + 选项 + w
  3. 在命令面板中打开的emmet窗口中,输入所需的标记或包装代码。
  4. 输入

许多命令已经附加到简单的ctrl+(例子),你也可以进行和弦键绑定,如ctrl 一个+b

(如果这是你第一次阅读和弦键绑定:它们的工作原理是不放开ctrl键,并在第一个键后按第二个键。)

我有我Emmet: Wrap with Abbreviation绑定到((ctrl) (w + 一个))。

在windows中:文件>偏好比;键盘快捷键((ctrl) (k + 年代))比;搜索使用缩写>进行换行;双击祝辞加上你的组合。

我刚刚安装了htmltagwrap从扩展市场和使用ALT-W包装标签(Windows版本)。

有一个快速输入的解决方案。

  1. 打开命令面板(通常是Ctrl+Shift+ p)

  2. 首选项:打开键盘快捷键(JSON)

  3. 添加这个snap code

    {
    "key": "ctrl+`",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
    "snippet": "~~${TM_SELECTED_TEXT/^([\\t]*).*$/$1/}${TM_SELECTED_TEXT/^[\\t]*(.*)$/$1/}${TM_SELECTED_TEXT/^([\\t]*).*$/$1/}~~"
    },
    }
    
  4. 你选择任何文本并按ctrl+ '

结果:

~~YourText~~