Visual studio code 代码段选项:显示一个值并用另一个值完成
我不知道这是否可能,但我想和所有阅读并回答这些问题的优秀人士核实一下 我为css/scss/sass制作了这个代码片段,以帮助导入字体语句。这是我目前拥有的代码,并希望以此为基础构建:Visual studio code 代码段选项:显示一个值并用另一个值完成,visual-studio-code,code-snippets,google-font-api,vscode-snippets,Visual Studio Code,Code Snippets,Google Font Api,Vscode Snippets,我不知道这是否可能,但我想和所有阅读并回答这些问题的优秀人士核实一下 我为css/scss/sass制作了这个代码片段,以帮助导入字体语句。这是我目前拥有的代码,并希望以此为基础构建: "Import font": { "scope": "css,scss,sass", "prefix": "@import, @im, @i", "body": "@import url('${1|https://fonts.googleapis.com/css2?family=,http
"Import font": {
"scope": "css,scss,sass",
"prefix": "@import, @im, @i",
"body": "@import url('${1|https://fonts.googleapis.com/css2?family=,https://|}');"
},
这个很好用。它允许我在谷歌字体url或空白https://
之间进行选择
我的问题是,在切换到代码段时,是否可以让选项显示不同的值。例如,让第一个选项显示谷歌字体
,另一个选项显示其他
(或类似的内容)
我的最终目标是让这段代码允许我从我经常使用的字体列表中进行选择,但我想让它可读
编辑:
@马克的回答让我得以继续我的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"
},
显然,在选择款式、重量等方面,这一概念存在漏洞,但想法就在那里 这是可能的,而且工作流程还不错。您需要以下代码段:
"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字体,url('Other |}');”
之所以这样写是因为触发完成代码段(Google字体和其他)需要在其前缀前面加一个空格,否则vscode将无法将其识别为代码段。因为它们将是一个空格(在url之前…
它看起来像另一个代码段,可以使用Ctrl+space完成
演示gif在包含击键方面不是很好,但是在选择触发完成代码段的选项后,您需要额外增加一个Ctrl+空格
演示:
如果可以直接在代码段选择/占位符上进行转换,这将更容易实现,但不支持:>{太棒了!!谢谢!太棒了!