3

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.

Talmacel Marian Silviu
  • 1,596
  • 2
  • 6
  • 14

1 Answers1

2

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).

Wiktor Stribiżew
  • 607,720
  • 39
  • 448
  • 563
  • gosh I wish I knew regex to at least this level, gotta spend more time learning it. Thanks a lot for this great response. – Talmacel Marian Silviu Sep 19 '20 at 13:26
  • @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. – Wiktor Stribiżew Sep 19 '20 at 13:49
  • 1
    yes I've understand it after I asked the questions ha ha..thats why I deleted it. thanks again! – Talmacel Marian Silviu Sep 19 '20 at 13:51