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

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://.

之间进行选择

我的问题是，是否可以在使用 Tab 键进入代码段时让选项显示不同的值。例如，第一个选项显示 Google Fonts，另一个选项显示 Other（或类似的内容）。

我的最终目标是让这个片段允许我从我经常使用的字体列表中进行选择，但我想让它可读。

编辑： @Mark 的回答让我可以继续我的 POC，我想与大家分享：

"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=${1|Open Sans,Other Font|}"
},
"Open Sans": {
    // "scope": "css,scss,sass",
    "prefix": "Open Sans",
    "body": "Open+Sans&display=swap"
},

很明显，在选择样式、权重等方面，这个概念是有漏洞的，但是思路是有的！

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字体和其他）需要space在它们的前缀之前，否则vscode 不会将它们识别为片段。因为它们将是 space（在 url.... 之前，它看起来像另一个片段，可以用 Ctrl+Space.

演示 gif 在包含击键方面效果不佳，但您可以在选择后额外执行一次 Ctrl+Space您选择触发完成片段。

演示：

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

Snippet choices: display one value and complete with another value

visual-studio-code

code-snippets

google-font-api

vscode-snippets