在 Visual Studio Code 中是否有快速添加 html class 标签的快捷方式？

Question

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

Answer 1

如果你想在 div 标签或 Visual Studio Code 中的任何元素中添加一个类，你可以简单地输入“div.className”，当你按下回车键时，div 标签将出现一个与 div 标签相对应的类.这 ”。”功能适用于 HTML 的任何元素

Answer 2

借助 2 个扩展：multi-command 和 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=\"$1\"$0" } }
    ]
  }
}

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

我将向 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=\"$1\"$0" } }
    ]
  }
}

它也适用于多光标。

Answer 3

我重新编写了一个我编写的扩展程序 Find and Transform 来简单地做你想做的事（以及更多）。

在您的 keybindings.json 中：

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

此命令将搜索 > 字符，将其替换为 " class=\"@\">"，然后将光标移至并选择 @ 字符（在替换中添加该字符只是为了有一个容易选择的地方）。

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

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

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

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

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

---

与简单地自己进行查找/替换相比，扩展程序的一个好处是可以存储这些查找/替换内容以供以后在设置中或仅在键绑定中使用。