1

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

我为 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（或类似的东西）。

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

编辑：@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"
},

显然，这个概念在选择样式、重量等方面存在漏洞，但想法就在那里！

4

1 回答 1

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

进行这些更改后重新加载窗口 vscode 。重要的！

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

之所以这样写，是因为触发完成片段（Google 字体和其他）需要在其前缀之前有一个空格，否则 vscode 不会将它们识别为片段。因为它们将是一个空格（之前url....它看起来像另一个片段，可以用Ctrl+完成Space。

演示 gif 在包含击键方面不是很好，但在选择触发完成片段的选项后，您需要额外执行一个Ctrl+ 。Space

演示：

字体片段选择

于 2020-04-07T18:07:12.990 回答