How to apply multiple transforms to snippet variable

Question

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.

rioV8 · Accepted Answer · 2021-09-28 19:41:22Z

2

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

answered Sep 28, 2021 at 19:41

rioV8

29.7k4 gold badges48 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark · Accepted Answer · 2021-09-28 22:04:40Z

"${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!

Collectives™ on Stack Overflow

How to apply multiple transforms to snippet variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related