如何将多个转换应用于代码段变量

Question

我在一个名为 event-list.tsx 的文件中，我正在尝试创建一个代码段来编写以下代码：

const EventList: FC = () => {
  return <div>
    
  </div>;
};

export default EventList;

到目前为止，在 typescriptreact.json 中，我编写了以下片段设置，这导致代码看起来很尴尬（它输出 const event-list 而不是 const EventList

"react arrow func component": {
    "prefix": "rafce",
    "body": [
      "const ${TM_FILENAME_BASE}: FC = () => {",
      "  return <div>",
      "    ",
      "  </div>;",
      "};",
      "",
      "export default ${TM_FILENAME_BASE};",
      ""
    ]
  },

我知道如何从代码段中删除连字符： ${TM_FILENAME_BASE/-//} 我还想出了如何将第一个字符大写： ${TM_FILENAME_BASE/(^.)/${1:/upcase}/}

但我不知道如何应用我想要的所有三个更改。我知道正则表达式需要将连字符后的每个字符大写（正后视），但我不知道如何在此处应用它。 documentation chapter 中没有任何内容暗示可以将多个转换相互链接。

Answer 1

试试下面的全局正则表达式

${TM_FILENAME_BASE/(.)([^-]*)-?/${1:/upcase}/g}

查找 - 之前的部分并将第一个字母大写，对整个字符串重复

Answer 2

"${TM_FILENAME_BASE/(\w+)-?/${1:/capitalize}/g}",

(\w+)-? ：如果使用 /capitalize.

则只需要一个捕获组

连字符通过匹配 (-?) 被删除，但不包括在输出中。

g 标志是保持匹配每个 (\w+)-? 实例并为每个实例执行转换所必需的。

并且由于您正在重用早期的转换，您可以像这样简化整个事情：

"react arrow func component": {
  "prefix": "rafce",
  "body": [
    "const ${1:${TM_FILENAME_BASE/(\w*)-?/${1:/capitalize}/g}}: FC = () => {",
    "  return <div>",
    "    ",
    "  </div>;",
    "};",
    "",
    "export default ;",
    ""
  ]
},

注意

${1:${TM_FILENAME_BASE/(\w*)-?/${1:/capitalize}/g}}

将该转换的结果存储在变量中 - 可以稍后（或更早）单独使用它来输出相同的结果！

如何将多个转换应用于代码段变量

How to apply multiple transforms to snippet variable

visual-studio-code

vscode-snippets