How to apply multiple transforms to snippet variable-CodePudding

I'm in a file called event-list.tsx, and I'm trying to create a snippet that writes the following code:

const EventList: FC = () => {
  return <div>
    
  </div>;
};

export default EventList;

Thus far, in typescriptreact.json I've written the following snippet setting, which results in awkward-looking code (it puts out const event-list rather than const EventList

"react arrow func component": {
    "prefix": "rafce",
    "body": [
      "const ${TM_FILENAME_BASE}: FC = () => {",
      "  return <div>",
      "    ",
      "  </div>;",
      "};",
      "",
      "export default ${TM_FILENAME_BASE};",
      ""
    ]
  },

I know how to remove the hyphen from the snippet: ${TM_FILENAME_BASE/-//} I also figured out how to capitalize the first character: ${TM_FILENAME_BASE/(^.)/${1:/upcase}/}

But I can't figure out how to apply all three of the changes I want. I know the regular expression needed to capitalize every character that comes after a hyphen (a positive lookbehind), but I don't know how to apply it here. There is nothing in the documentation chapter implying the possibility to chain multiple transforms onto each other.

CodePudding user response：

Try the following global regex

${TM_FILENAME_BASE/(.)([^-]*)-?/${1:/upcase}${2}/g}

Find a part before a - and Upcase the first letter, repeat for the whole string

CodePudding user response：

"${TM_FILENAME_BASE/(\\w )-?/${1:/capitalize}/g}",

(\\w )-? : You only need one capture group if you use /capitalize.

The hyphens are removed by virtue of matching them (-?) but not including them in the output.

The g flag is necessary to keep matching every (\\w )-? instance and perform a transform for each.

And since you are reusing an earlier transform you can simplify the whole thing like this:

"react arrow func component": {
  "prefix": "rafce",
  "body": [
    "const ${1:${TM_FILENAME_BASE/(\\w*)-?/${1:/capitalize}/g}}: FC = () => {",
    "  return <div>",
    "    ",
    "  </div>;",
    "};",
    "",
    "export default $1;",
    ""
  ]
},

Note that

${1:${TM_FILENAME_BASE/(\\w*)-?/${1:/capitalize}/g}}

stores the result of that transform in variable $1 - which can simply be used later (or earlier) by itself to output the same result!