如何在带有find和replace的vscode中用kebab大小写字符串替换所有camel大小写字符串

Question

我有一个vue项目的大量html文件集合，这些文件当前具有不一致的道具使用

一些道具是v-bind:prop-name=""，一些是v-bind:propName=""，一些使用短手:prop-name=""或:propName=""。

并且我想将所有道具替换为：道具名称＝""语法按照vue文档。

我知道你可以在vscode(或类似的编辑器(中使用regex只选择camelCase格式的道具，但我有一些问题。

对于find regex，我不知道如何：

1. 选择v-bind:或:作为前缀，并将其从选择组中排除
2. 将基于camelBase的字符串拆分为选择组
3. 使用更多ThanTwoWords处理propName

对于替换语法，我很确定我有正确的语法我在其他编辑器上发现的:L$1-$2="替换了语法，但我也希望在这方面得到一些帮助。

完全可以，在最终更新之前，通过多次尝试以相同的格式获取所有内容。

我并不反对使用不同的编辑器或类似codemod的东西(尽管我使用windows(

Answer 1

要选择所有需要修改的字符串，请使用RegEx Find

Find: ((?:v-bind)?:)([a-zA-Z0-9]+)([A-Z][a-z0-9]+)
Options: .* (RegEx)  Aa (Match Case)

使用菜单选项Selection | Select All Occurrences。

当您已经选择了所有要更改的内容(包括v-bind和:(时，可以使用以下键绑定将变量名替换为kebab大小写

{
"key": "ctrl+shift+alt+f8", // or any other keybinding combo
"command": "editor.action.insertSnippet",
"args": {
"snippet": "${TM_SELECTED_TEXT/([A-Z][a-z0-9_]+)/-${1:/downcase}/g}"
},
"when": "editorHasMultipleSelections && textInputFocus"
}

---

用以下Regex查找替换也是可能的

Find: ((?:v-bind)?:)([a-zA-Z0-9]+)([A-Z][a-z0-9]+)
Replace: $1$2-L$3
Options: .* (RegEx)  Aa (Match Case)

它可以在"搜索文件"查找替换"中使用。

您必须多次应用此"查找替换"，只要变量中有大写字母最多的大写单词即可。Find Replace调整变量名称的最后一个大写单词。再次应用它，它将调整现在最后一个大写单词。您可以在"搜索文件"中看到是否仍需要转换。

但由于某种原因，VSC决定捕获组3是变量名称的最后2个字符。如果我在[regex101][1](PCRE风格以识别`\L`(上测试它，则组被正确捕获，如果您选择EcmaScript也是如此。`3美元"应该从一笔资本开始，VSC也发现了一笔成功"：道具`我为这个

提交了一个问题

感谢马克告诉我我被Match Case陷阱咬了。在编程中，默认值为Match Case，但在VSC中，默认为Ignore Case