如何在 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%;",
      "`;",
      ""
    ],
    "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 适用于两者）。

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

How to apply more than on transform on visual studio code snippets?

regex

code-snippets

visual-studio-code

vscode-snippets