regex - 如何在 visual studio 代码片段上应用 more than on transform？

Question

如果你打开了这个，希望你有一些编写 visual studio 代码片段的经验，你可以帮助我。

我正在努力提高编写 Visual Studio 代码片段的能力。

这是我目前拥有的:

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

正如您在上面看到的，我在我的代码片段中使用了文件名基本内容，我正在将文本转换为小写，但我还需要使用另一个正则表达式对其进行转换，因此将名称中的文本“.styled”替换为空''.

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

Answer 1

你可以使用

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

参见 regex demo

图案细节

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

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