如何在视觉工作室代码片段上应用更多的转换？答案

【问题标题】：How to apply more than on transform on visual studio code snippets?如何在视觉工作室代码片段上应用更多的转换？
【发布时间】：2021-01-06 04:31:11
【问题描述】：

如果你打开了这个，希望你对 Visual Studio 代码 sn-p 编写有一些经验，你可以帮助我。

我正在努力提高编写 Visual Studio 代码 sn-ps 的能力。

这是我目前拥有的：

"Styled Template": {
    "prefix": "sty",
    "body": [
      "import styled from \"styled-components\";",
      "",
      "const colors = (props) => props.theme.colors.${TM_FILENAME_BASE/(.*)/${1:/downcase}/};",
      "",
      "export const Container = styled.div`",
      "  display: flex;",
      "  width: 100%;",
      "  height:100%;",
      "`;",
      "$2"
    ],
    "description": "Styled Template"
  },

正如您在上面看到的，我在我的 sn-p 中使用文件名基本内容并将文本转换为小写，但我还需要用另一个正则表达式对其进行转换，因此替换名称中的文本“.styled”什么都没有。

是否可以在同一个元素上添加 2 个变换？我目前正在努力寻找方法。

【问题讨论】：

试试${TM_FILENAME_BASE/^(?:(.*?)(?:\.styled))?(.*)$/${1:/downcase}${2:/downcase}/}
太棒了..它有效！非常感谢！！

标签： regex visual-studio-code code-snippets vscode-snippets

【解决方案1】：

你可以使用

${TM_FILENAME_BASE/^(?:(.*?)(?:\.styled))?(.*)$/${1:/downcase}${2:/downcase}/}

见regex demo

模式详情

^ - 字符串开头
(?:(.*?)(?:\.styled))? - 可选出现：
- (.*?) - 第 1 组：除换行符之外的任何零个或多个字符，尽可能少
- (?:\.styled) - .styled 子字符串
(.*) - 第 2 组：除换行符之外的任何零个或多个字符，尽可能多
$ - 字符串结束。

因此，在这种情况下，.styled 之前的部分被捕获到组 1 中，之后的部分被捕获到组 2 中。替换是这两个组的串联（/downcase 应用于两者）。

【讨论】：

天哪，我希望我至少知道正则表达式到这个水平，得花更多时间学习它。非常感谢您的好评。
@TalmacelMarianSilviu 我在答案的底部简要解释了它。这里的重点是捕获.styled 之前和之后的文本（如果此字符串存在）。然后，在替换中连接两个捕获的子字符串。由于整个字符串与正则表达式匹配，并且替换不包含.styled，因此删除了此子字符串。
是的，我问了问题后就明白了哈哈..这就是我删除它的原因。再次感谢！