visual studio code add corresponding import statements for snippets

Question

I tried to create custom snippets for my extension in vscode. But to use those snippets I also need specific imports statements, I'm trying out to figure out how to add corresponding import statements while a snippet is selected from choices.? Does vscode provide a way to do this?

Answer 1

If your programming language supports the "Optimize Imports" command, you can take advantage of it to get close to your desired behavior. By default it is set to the shift+opt+O keybinding in vscode.

In JS/TS the "Optimize Imports" command will move an import to the top of a file no matter what line it's written on, as long as it's a syntactically valid import, i.e., not inside a function, etc.

Option 1

You could make your snippet more convenient by ending it on the importable keyword. For example, with a React component snippet that you might need to import, you can use $0 to return to the keyword after supplying the additional content. This would allow you to immediately type cmd+. to "Quick Fix" the import.

{
  "AuthorCard": {
    "prefix": "ac",
    "body": [
        "<AuthorCard$0>",
        "  $1",
        "</AuthorCard>"
    ]
  },
}

Option 2

If your function snippet is intended to be inserted into the global scope of the file, then you can include the import in the snippet itself. Then, immediately "Optimize Imports" and it will send the import statement to the top of the file.

For example, the snippet could look like the following.

"blah": {
  "prefix": "blah",
  "body": [
    "import blah from 'blah'",
    "export function myBlah() {",
    "  return blah.doBlah()",
    "}"
  ]
},

Option 3

If you snippet is intended to be used embedded within other scopes within the file, then create a second snippet of the just the import. E.g., for a snippet blah, the snippet iblah could import all the required dependencies. Now, you only need a "quick" way to get to a valid scope for the imports and then back to the place you started, both of which are possible in vscode. I will mention the default keybindings, but, for the record, you can rebind the underlying commands to whatever you'd like.

To get to a valid scope for your import snippet, you have multiple options. The best options is probably cmd+up, which will take you to the top of the file. Other options are shift+cmd+\, which takes you to the closing bracket of a statement, and cmd+enter, which takes you to a new line. From a valid scope you can trigger your import snippet and then "Optimize Imports" with shift+opt+O.

Lastly, to return to your original function, you can "Go Back" in vscode which defaults to ctrl+-, which returns your to your last cursor position.

These options might be less than ideal, especially if you are intending these to be public snippets for an extension package, but, still, they are a collection of convenient tricks that might provide useful (and answer the "spirit" of your question).