Multiple Transforms for VSCode Snippet

Question

I've got a few snippets set up and working as I would like to, but I'm having a hard time getting one snippet to work where I believe I will need to have multiple transforms occur?

Essentially I have a TypeScript Interface defined for one of my components.

i.e. IRadioButtonListProps.ts which is inside of an Interfaces folder. The Interfaces folder has a sibling folder named Theme containing an interface named IRadioButtonListTheme.ts

Inside of IRadioButtonListProps I'm trying to stub out the entire interface. The snippet I currently have stubs out the interface like...

import * as React from 'react';
import IRadioButtonListPropsTheme from '../Theme/IRadioButtonListPropsTheme';

export interface IRadioButtonListPropsProps {
    ...props...
}

export default IRadioButtonListPropsProps;

The import line inside of the snippet is...

"import I${TM_FILENAME_BASE/(.*)\\..+$/$1/}Props from './Interfaces/I${TM_FILENAME_BASE/(.*)\\..+$/$1/}Props';"

What I'm trying to have happen and can't seem to figure out is how to also remove the word "Props". So instead of import IRadioButtonListPropsTheme... I would get import import IRadioButtonListTheme....

At the same time, I want to remove all extensions, including those of the form *.abc.abc ("two" extensions) and *.abc (one simple extension).

Is this possible?

code.visualstudio.com/docs/editor/… This removes the extension from the file name if there is one. — Jared
– Jared, Commented Oct 11, 2018 at 21:27
That didn't break like what I was attempting, but it also didn't change the output. — Jared
– Jared, Commented Oct 11, 2018 at 21:58

Mark · Accepted Answer · 2018-10-13 02:48:31Z

2

It isn't crystal clear what you what but try:

"import ${TM_FILENAME/((\\w*)Props)*?(\\..*)/$2/}Theme from './Interfaces/${TM_FILENAME/((\\w*)Props)*?(\\..*)/$2/}Theme';"

which results in:

import IRadioButtonListTheme from './Interfaces/IRadioButtonListTheme';

from IRadioButtonListProps.ts and

import CheckboxListTheme from './Interfaces/CheckboxListTheme';

from CheckboxListProps.test.tsx

[Edit] Here is a simpler version which I think also works:

 "import ${TM_FILENAME/(Props)*?(\\..*)//}Theme from './Interfaces/${TM_FILENAME/(Props)*?(\\..*)//}Theme';"

match any "Props", if any, replace with nothing.
match from first \. to end of filename, replace with nothing.

edited Oct 13, 2018 at 2:48

answered Oct 11, 2018 at 22:26

Mark

192k32 gold badges557 silver badges580 bronze badges

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

7 Comments

Jared Over a year ago

This did remove the word Props, but stopped ensuring that there wasn't an extension. Some of the snippets are used on test files named similar to CheckboxList.test.tsx. I was using the TM_FILENAME_BASE to remove the .tsx and then the existing transform to remove .test

Mark Over a year ago

So one of your intentions is to remove anything after and including the first . (dot)? What should running the snippet on CheckboxList.test.tsx produce for the import statement?

Jared Over a year ago

CheckboxList.test.tsx and CheckboxListProps.test.tsx should both produce CheckboxList (as far as the transform is concerned).

Mark Over a year ago

I edited the answer above to address your multiple extension cae scenarios as well.

Jared Over a year ago

Any chance you could include a transform to grab the last directory in a path produced by TM_DIRECTORY? i.e. c:\a\b\c\d\e would produce e

|

Collectives™ on Stack Overflow

Multiple Transforms for VSCode Snippet

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related