How to apply regular expression on user input in vscode snippets

Question

I am using react hooks. I using a global context with reducer. Instead of writing each case of reducer function inside function. I want to separate in in the files. Example of my file is below

export type SetDrawingDataAction = {"set-drawing-data": Data};
export function setDrawingData(state : IGlobalState, data: number) : IGlobalState{

}

In the above file you can that I am using the name SetDrawingData at three places but with different formats.

Currently my snippet looks like below but its not making setDrawingDataAction capital.

"Generate Action file": {
  "prefix": "actd",
  "body": [
     "export type ${1/(.*)/${1:/capitalize}/} = {\"\": Data}",
     "export function $1(state : IGlobalState, data: Data) : IGlobalState {",
     "  $2",
     "}"
  ],
  "description": "Generate action file witn data"
}

Kindly answer how can I change formats by using only single inputs. The first one is to capitalize the can second need is to change camelCase to camel-case

Mark · Accepted Answer · 2020-02-02 11:19:37Z

1

Assuming your input is setDrawingData try this snippet:

"Generate Action file": {
  "prefix": "actd",
  "body": [
     "export type ${1/(.*)/${1:/capitalize}/}Action = {\"${1/(.*)([A-Z][^[A-Z]*)([A-Z][^[A-Z]*)/$1-${2:/downcase}-${3:/downcase}/}\": Data}",
     "export function $1(state : IGlobalState, data: Data) : IGlobalState {",
     "  $2",
     "}"
  ],
  "description": "Generate action file witn data"
}

Here is the output of that snippet:

export type SetDrawingDataAction = {"set-drawing-data": Data}
export function setDrawingData(state : IGlobalState, data: Data) : IGlobalState {

}

edited Feb 2, 2020 at 11:19

answered Feb 2, 2020 at 10:19

Mark

191k32 gold badges556 silver badges579 bronze badges

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

5 Comments

Maheer Ali Over a year ago

Not working for me. Do you press any key after typing setDrawingData?

Mark Over a year ago

You have to press tab after setDrawingData to complete the transform.

Like a Variable-Transform, a transformation of a placeholder allows changing the inserted text for the placeholder when moving to the next tab stop.

from code.visualstudio.com/docs/editor/… What that mean is that the transform happens when you go to the next or last stop.

Mark Over a year ago

I added a gif that shows the final tab that is necessary. You can either type setDrawingData as I did in the gif or paste it in - it doesn't matter.

Maheer Ali Over a year ago

Well no. maybe I am missing something obvious

Mark Over a year ago

Hmm, are you on v1.41 of vscode? What doesn't work? You can trigger the snippet? Type your setDrawingData, hit tab - what do you get?

Collectives™ on Stack Overflow

How to apply regular expression on user input in vscode snippets

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related