片段选择:显示一个值并用另一个值完成 [英] Snippet choices: display one value and complete with another value

问题描述

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

I don't know if it's possible, but I want to check with all the awesome people who read and answer these questions.

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

I have this snippet I'm making for css/scss/sass to help with import font statements. This is the code I currently have and would like to build on:

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

这很好用.它可以让我在google字体网址或空白的 https://之间进行选择.

This works just fine. It allows me to choose between the google fonts url or just a blank https://.

我的问题是，在进入摘要时，选项是否可能显示不同的值.例如，让第一个选项显示 Google字体，另一个选择显示 Other (或类似的内容).

My question is, is it possible to have the choices show a different value when tabbing into the snippet. For example, have the first option show Google Fonts and the other choice to show Other (or something along those lines).

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

My end goal for this would be to have this snippet allow me to choose from a list of fonts I often use, but I want to make it readable.

@Mark的回答使我可以继续我的POC，并且我想与大家分享:

@Mark's answer allowed me to continue with my POC and I'd like to share that with you all:

"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"
},

很显然，在选择样式，粗细等方面，这个概念存在漏洞，但是这个想法就存在了！

Obviously, there are holes in this concept when it comes to choosing styles, weights, etc., but the idea is there!

推荐答案

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

It is possible and the workflow isn't too bad. You need the following snippets:

 "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://"
  },

进行这些更改后，

重新加载窗口vscode .重要！

RELOAD WINDOW vscode after making these changes. Important!

正文":"@import $ {1 | url('Google Fonts，url('Other |}');"

之所以这样写，是因为触发补全代码段(Google字体和其他代码)在其前缀之前需要一个空格，否则vscode不会将其识别为代码段.由于它们将是一个空格(在 url .... 之前，因此它将看起来像另一个片段，并且可以使用 Ctrl + Space 来完成.

This is written like this because triggering the completion snippets (Google Fonts and Other) need a space preceding their prefixes otherwise vscode will not recognize them as snippets. Since their will be a space (prior to url.... it will look like another snippet and can be completed with Ctrl+Space.

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

The demo gif isn't great on including the keystrokes but you do one extra Ctrl+Space after selecting your option to trigger the completion snippet.

演示:

这篇关于片段选择:显示一个值并用另一个值完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！