如何在Visual Studio Code代码片段中应用多组转换？

当然可以实现对同一个变量应用多组转换！你只需要在正则替换中嵌套处理逻辑，先完成.styled的移除，再对剩余部分做小写转换。

修改后的代码片段 #

这里是调整后的代码片段，重点修改了colors变量那一行：

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

关键部分拆解 #

我们来分析这行修改后的代码：
${TM_FILENAME_BASE/(.*)\.styled/${1:/downcase}/}

• 正则匹配：(.*)\.styled 会捕获文件名基中所有在.styled之前的内容（比如如果你的文件名是Header.styled.js，TM_FILENAME_BASE是Header.styled，那么捕获组$1就是Header）
• 小写转换：${1:/downcase} 对捕获到的内容（也就是移除.styled后的部分）应用小写转换，最终得到header

更灵活的情况（可选） #

如果你的文件名中.styled的位置不固定（比如偶尔会出现styled.Header.js这种命名），可以用更通用的正则来全局替换.styled：

"const colors = (props) => props.theme.colors.${TM_FILENAME_BASE/(.*?)\\.?styled(.*)/${1:/downcase}${2:/downcase}/};"

不过这种场景比较少见，前面的方案已经能覆盖绝大多数xxx.styled.js这类规范命名的情况。

内容的提问来源于stack exchange，提问作者Talmacel Marian Silviu