有没有在Visual Studio代码中快速添加htmlclass标签的快捷方式？

Question

我在 Visual Studio 代码中学到了很多快捷方式，一些是原生的，一些是从扩展中学到的，但我没有成功找到 HTML 的任何“addClass”扩展。我知道我们可以使用 Emmet 在 div 创建中添加一个，但是如果 div 已经写入，有没有办法快速添加 class 标签？

Answer 1

如果您想在 div 标签或 Visual Studio 代码中的任何元素中添加 class，只需键入“div.className”，然后按输入 div 标签将出现与 class 对应的 div 标签。这 ”。”功能适用于 HTML

的任何元素

Answer 2

在 2 个扩展的帮助下：multi-command and Select By

定义此键绑定：（选择您自己的组合键）

{
  "key": "alt+x", // any other key combo
  "command": "extension.multiCommand.execute",
  "args": {
    "sequence": [
      { "command": "moveby.regex",
        "args": { "regex": ">", "properties": ["next", "start"]}},
      { "command": "editor.action.insertSnippet",
        "args": { "snippet": " class=\"\"[=10=]" } }
    ]
  }
}

将光标放在开始标记中（不是在>之前）并按下组合键。

我将向 moveby.regex 命令添加一个选项以允许光标位于正确的位置，这样您也可以将光标放在 >.

之前

编辑

使用 Select By v1.5.0，您可以将光标放在开始标记中的任何位置。

修改快捷键为(checkCurrent 属性)

{
  "key": "alt+x", // any other key combo
  "command": "extension.multiCommand.execute",
  "args": {
    "sequence": [
      { "command": "moveby.regex",
        "args": { "regex": ">", "properties": ["next", "start"]},
                  "checkCurrent": true },
      { "command": "editor.action.insertSnippet",
        "args": { "snippet": " class=\"\"[=11=]" } }
    ]
  }
}

它也适用于多光标。

Answer 3

我修改了我写的一个扩展 Find and Transform 来简单地做你想做的事（以及更多）。

在你的keybindings.json中：

{
  "key": "alt+r",
  "command": "findInCurrentFile",
  "args": {
    "find": ">",
    "replace": " class=\"@\">",
    "restrictFind": "once",
    "cursorMoveSelect": "@"
  }
}

此命令将搜索 > 字符，将其替换为 " class=\"@\">"，然后将光标移动到 select @ 字符（已添加到替换只是为了有一个简单的地方 select).

cursorMoveSelect 值可以是任何文本，而不仅仅是单个字符。

正如您在演示中看到的那样，您只需将光标放在要搜索的字符之前的某个位置即可。

替换字段可以采用大小写修饰符，例如 \U 和正则表达式捕获组。

可以将查找限制为第一次出现、一行中的所有出现、select离子或整个文档。

该扩展程序还可以使用所有常用 vscode 选项跨文件进行搜索。

与简单地自己做 find/replace 相比，扩展的一个好处是这些 find/replace 内容可以存储起来供以后在设置中使用或简单地在键绑定中使用。

有没有在Visual Studio代码中快速添加htmlclass标签的快捷方式？

Is there a shortcut to quickly add an html class tag in Visual Studio Code?

html

keyboard-shortcuts

visual-studio-code