Question

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

Answer 1

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

在 JS/TS 中，“优化导入”命令会将 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

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

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

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

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

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

1 个答案:

选项 1

选项 2

选项 3