如何将多个转换应用于片段变量答案

【问题标题】：How to apply multiple transforms to snippet variable如何将多个转换应用于片段变量
【发布时间】：2021-09-28 18:51:00
【问题描述】：

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

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

export default EventList;

到目前为止，在 typescriptreact.json 中，我编写了以下 sn-p 设置，这导致代码看起来很尴尬（它输出的是 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};",
      ""
    ]
  },

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

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

【问题讨论】：

标签： visual-studio-code vscode-snippets

【解决方案1】：

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

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

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

【讨论】：

【解决方案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;",
    ""
  ]
},

注意

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

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

【讨论】：