Visual Studio Code snippet dynamic import path - visual-studio-code

Question

I'm trying to create a TypeScript snippet in Visual Studio Code which includes a bunch of import statements, but I want the path to be set dynamically depending on which directory you use the snippet.
For example, I have a snippet like this:
import { MyComponent } from "../../ui/components";
import { isString } from "../../../../utils/string";
export const Foo = (props) => {
const isStr = isString(props.foo);
/* ...More code... */
return <MyComponent></MyComponent>;
};
How can I make sure that the import paths are set relative to the direcotry I execute the snippet? If this is not possible, are there any other ways you would recommend for achieving this?

Answer 1

Yes, you could. VScode has provided some built-in variables to get relative and full path of your working file.
The structure of my demo project looks like this:
├── index.html
├── style.css
└── test
└── test.ts
And my import path snippet for typescript is:
{
// Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Import path": {
"prefix": "impo",
"body": [
"import { $1 } from \"${2:$RELATIVE_FILEPATH}\";",
],
"description": "Import path depending on relative file path"
}
}
When I type impo in test/test.ts, the snippet expands like this:
If $RELATIVE_FILEPATH is not what you want, you can feel free to change to other variables listed in the documentation.