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

Question

Hopefully you have some experience with visual studio code snippet writing if you have opened this and you can help me.

I am trying to get better at writing visual studio code snippets.

This is one I have at the moment:

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

As you can see above I am using the filename base contant in my snippet and I am transforming the text to be downcase but I also need to transform it with another regex so replace the text '.styled' in the name with nothing ''.

Is it possible to add 2 transforms on the same element? I am struggling to find a way at the moment.

• Wiktor Stribiżew: Try ${TM_FILENAME_BASE/^(?:(.*?)(?:\.styled))?(.*)$/${1:/downcase}${2:/downcase}/}
• Talmacel Marian Silviu: amazing..it works! thanks a lot!!

Answer 1

You can use

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

See the regex demo

Pattern details

• ^ - start of string
• (?:(.*?)(?:\.styled))? - an optional occurrence of:
  • (.*?) - Group 1: any zero or more chars other than line break chars, as few as possible
  • (?:\.styled) - a .styled substring
• (.*) - Group 2: any zero or more chars other than line break chars, as many as possible
• $ - end of string.

So, in this case, the part before .styled is captured into Group 1 and the part after it is captured in Group 2. The replacement is a concatenation of these two groups (with /downcase applied to both).

• Talmacel Marian Silviu: gosh I wish I knew regex to at least this level, gotta spend more time learning it. Thanks a lot for this great response.
• Wiktor Stribiżew: @TalmacelMarianSilviu I explained it in brief at the bottom of the answer. The point here is to capture the text before and after .styled if this string is present. Then, the two captured substrings are concatenated in the replacement. Since the whole string is matched with the regex, and the replacement does not contain .styled, this substring is removed.
• Talmacel Marian Silviu: yes I've understand it after I asked the questions ha ha..thats why I deleted it. thanks again!