CODEWITHSUNDEEP
regexvisual-studio-codecode-snippetsvscode-snippets
Talmacel Marian Silviu
Talmacel Marian Silviu

Reputation: 1736

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

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.

Upvotes: 3

Views: 320

Answers (1)

Wiktor Stribiżew
Wiktor Stribiżew

Reputation: 627103

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

Upvotes: 2

Related Questions