时间戳

首页 > 解决方案 > 如何在vscode中用查找和替换的kebab case字符串替换所有camel case字符串

regex - 如何在vscode中用查找和替换的kebab case字符串替换所有camel case字符串

问题描述

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

有些道具v-bind:prop-name=""有些是v-bind:propName=""，有些使用简写:prop-name=""或:propName=""。

我想根据vue docs用 :prop-name="" 语法替换所有道具。

我知道您可以在 vscode（或类似的编辑器）中使用正则表达式来仅选择具有 camelCase 格式的道具，但我遇到了一些问题。

对于查找正则表达式，我不知道如何：

  1. 选择v-bind:或:作为前缀并从选择组中排除它
  2. 将 camelCased 字符串拆分为选择组
  3. 处理 propNameWithMoreThanTwoWords

对于替换语法，我很确定我 :\L$1-$2="在其他编辑器上找到的语法是正确的替换语法，但我也想在这方面提供一些帮助。

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

我不反对使用其他编辑器或类似 codemod 之类的东西（尽管我使用 Windows）

标签： regexvue.jsvisual-studio-codevue-component

解决方案

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

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

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

当您选择了所有要更改的内容（包括v-bindand :）后，您可以使用以下键绑定将变量名称替换为 kebab case

  {
    "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"
  }

也可以使用以下正则表达式进行查找替换

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

它可用于搜索文件查找-替换。

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

但出于某种原因，VSC 决定捕获组 3 是变量名称的最后 2 个字符。如果我在 [regex101][1]（PCRE 风格以识别 `\L`）上对其进行测试，则组被正确捕获，如果您选择 EcmaScript 也是如此。`$3` 应该以大写字母开头，VSC 也会在 `:prop` 上找到匹配项

我为此提交了一个问题

感谢马克指出我被Match Case陷阱咬了。在编程中默认是Match Case，但在 VSC 中，默认是Ignore Case

推荐阅读