我在 Visual Studio Code 中学到了很多快捷方式，一些是原生的，还有一些是从扩展中学到的，但是我没有成功找到任何 HTML 的“addClass”扩展。我知道我们可以在创建 div 时使用 Emmet 添加一个，但是如果 div 已经写入，有没有办法快速添加一个类标签？
【问题讨论】：
class 中，在某个时候按TAB
>之前并输入`class`（注意空格）
标签： html visual-studio-code keyboard-shortcuts
借助 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" } }
]
}
}
它也适用于多光标。
【讨论】：
如果你想在 div 标签或 Visual Studio Code 中的任何元素中添加一个类，你可以简单地输入“div.className”，当你按下回车时，div 标签会出现一个与 div 标签对应的类.这 ”。”该功能适用于 HTML 的任何元素
【讨论】：
我重新编写了一个我写的扩展 Find and Transform 来简单地做你想做的事（以及更多）。
在你的keybindings.json:
{
"key": "alt+r",
"command": "findInCurrentFile",
"args": {
"find": ">",
"replace": " class=\"@\">",
"restrictFind": "once",
"cursorMoveSelect": "@"
}
}
此命令将搜索> 字符，将其替换为" class=\"@\">"，然后将光标移动到并选择@ 字符（添加到替换中只是为了便于选择）。
cursorMoveSelect 值可以是任何文本，而不仅仅是单个字符。
正如您在演示中看到的那样，您只需将光标放在您要搜索的字符之前的某个位置。
替换字段可以使用大小写修饰符，例如\U 和正则表达式捕获组。
可以将查找限制在第一次出现、一行上的所有出现、选择中或整个文档中。
该扩展还可以使用所有常用的 vscode 选项对文件进行搜索。
与简单地自己进行查找/替换相比，扩展的一个好处是这些查找/替换可以存储起来供以后在设置中使用，或者只是在键绑定中使用。
【讨论】：