Visual Studio代码为片段添加了相应的导入语句

Question

我尝试为vscode中的扩展名创建自定义片段。但是，要使用这些代码段，我还需要特定的import语句，我正在尝试找出如何从选项中选择一个代码段来添加相应的import语句。vscode是否提供执行此操作的方法？

Answer 1

如果您的编程语言支持“优化导入”命令，您可以利用它来接近您想要的行为。默认情况下它设置为shift+opt+Ovscode 中的键绑定。

在 JS/TS 中，“优化导入”命令会将 an 移动import到文件的顶部，无论它写在哪一行，只要它在语法上是有效的import，即不在函数内部等。

选项1

您可以通过以 importable 关键字结尾来使您的代码片段更加方便。例如，对于您可能需要导入的 React 组件片段，您可以$0在提供附加内容后用于返回到关键字。这将允许您立即键入cmd+.“快速修复”导入。

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

选项2

如果您的函数片段打算插入到文件的全局范围中，那么您可以将导入包含在片段本身中。然后，立即“优化导入”，它将将该import语句发送到文件的顶部。

例如，该代码片段可能如下所示。

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

选项3

如果您的代码片段旨在嵌入文件内的其他范围内使用，则创建导入的第二个代码片段。例如，对于 snippet blah，该 snippetiblah可以导入所有必需的依赖项。现在，您只需要一种“快速”方法即可到达导入的有效范围，然后返回到开始的位置，这两种方法都可以在 vscode 中实现。我将提到默认的键绑定，但是，为了记录，您可以将底层命令重新绑定到您想要的任何内容。

要获得导入片段的有效范围，您有多种选择。最好的选项可能是cmd+up，它会将您带到文件的顶部。其他选项包括shift+cmd+\，它会将您带到语句的右括号，以及cmd+enter，它将您带到新的一行。从有效范围内，您可以触发导入片段，然后使用shift+opt+O.

最后，要返回到原始函数，您可以在 vscode 中“返回”，默认为ctrl+-，这将返回到最后的光标位置。

这些选项可能不太理想，特别是如果您打算将它们作为扩展包的公共片段，但是它们仍然是可能提供有用的方便技巧的集合（并回答您问题的“精神”）。