片段选择：显示一个值并用另一个值完成

Question

我不知道是否可能，但是我想与阅读并回答这些问题的所有优秀人士一起检查。

我有此代码段供CSS / SCSS / SASS使用，以帮助导入字体语句。这是我当前拥有的代码，并希望基于此代码：

"Import font": {
    "scope": "css,scss,sass",
    "prefix": "@import, @im, @i",
    "body": "@import url('${1|https://fonts.googleapis.com/css2?family=,https://|}');"
},

这很好。它允许我在google字体url或空白https://之间进行选择。

我的问题是，在进入摘要时，选项是否可能显示不同的值。例如，让第一个选项显示Google Fonts，另一个选择显示Other（或沿这些行显示的内容）。

我的最终目标是让此摘录允许我从我经常使用的字体列表中进行选择，但我想使其可读。

Answer 1

有可能而且工作流程还不错。您需要以下代码段：

 "Import font": {
      // "scope": "css,scss,sass",
      "prefix": "@import, @im, @i",

      // "body": "@import url('${1|https://fonts.googleapis.com/css2?family=,https://|}');"

      "body": "@import ${1|url('Google Fonts,url('Other|}');"  // explained below**
  },


  "Google Fonts": {
      // "scope": "css,scss,sass",  // just disabled for testing purposes
      "prefix": "url('Google Fonts",
      "body": "url('https://fonts.googleapis.com/css2?family="
  },

  "Other": {
      // "scope": "css,scss,sass",
      "prefix": "url('Other",
      "body": "url('https://"
  },

进行这些更改后，<<< [RELOAD WINDOW vscode。重要！

"body": "@import ${1|url('Google Fonts,url('Other|}');"

---

这是这样写的，因为触发补全代码段（Google字体和其他）

需要空格之前其前缀，否则vscode不会将其识别为代码段。由于它们将是一个空格（在url....之前，它将看起来像另一个代码段，并且可以使用

Ctrl + Space来完成。

演示gif不能很好地包含击键，但是在选择触发完成代码段的选项后，您需要额外做一个[[Ctrl + Space。

演示：