VSCode 用于复制片段行的片段语法

Question

假设我想为打字稿界面创建一个 VSCode 片段，如下所示：

interface MyInterface{ 
  prop1: string; 
  prop2: string;
  prop3: string
}

现在我可以创建以下片段：

"myinterface": {
  "prefix": "myinterface",
  "body": [
    "interface MyInterface{ ",
    "  prop1: string; ",
    "  prop2: string;",
    "  prop3: string",
    "}"
  ],
  "description": "not smart interface creator"
}

但是如果我想在我的界面中使用 prop4、prop5 或 prop6 怎么办？无论如何有条件地扩展代码段，以便通过点击 Tab 我会被提示向界面添加另一个道具字段，格式为 ${1:propX}: ${2:string};?

另一个用例是写出数组：

const myArray = [val1, val2, val3]

Answer 1

我认为没有任何方法可以直接做你想做的事。但是你可以通过下面的方法 2 来接近。

方法一

"PS3": {
  "prefix": "ps3",
  "body": [
    "interface MyInterface{",  
    "${1/([^,]+)([,\s]*|)/\t: string;${2:+\n}/g}",
    "}"
  ]
},

这类似于我在中使用的技术。这是上面的演示：

但是您不能select使用此方法轻松编辑变量或类型。

方法二

这比较棘手，但会导致键和类型 selected 以便于更改。您需要 2 个片段

"myinterface": {
  "prefix": "myinterface",
  "body": [
    "interface MyInterface{ ",

    // I jazzed it up by adding a choice transform
    "\t${1:propX}: ${0:${2|string,int,bool|}};",
    "}"
  ],
  "description": "sorta smart interface creator"
},

"addProps": {
  "prefix": "[int, bool, string]",  // note multiple prefixes
  "body": [
    "$TM_SELECTED_TEXT;",
    "${1:propX}: ${0:${2|string,int,bool|}}",
  ],
  "description": "add props to interface"
},

基本上，这使用第一个片段的末尾作为附加 key: type 对的前缀。演示：

在切换到 select 后，您再次选择 int/bool/string 选项卡以移动到末尾 - 这将自动 select 您从 int/bool/string 中选择的内容。

现在您可以使用 Ctrl+Space 触发第二个片段的建议以插入一个键：键入 pair一次。请注意，第二个代码段具有三个前缀以匹配您的类型选择，在行尾重新插入您的选择并添加另一个键：在下面键入行。

VSCode 用于复制片段行的片段语法

VSCode Snippet syntax for duplicating snippet lines

visual-studio-code

code-snippets

vscode-snippets

方法一

方法二