如何在vscode emmet密钥建议中添加空间？

Posted 2021-05-03

有@media的内置emmet建议，如下图所示，我想为max-width和min-width添加我的自定义片段。我用以下代码成功做了哪些。

{
    "css": {
        "snippets": {
            "@mediaMaxWidth": "@media(max-width: ${1:768}px) {
	${2}
}",
            "@mediaMinWidth": "@media(min-width: ${1:768}px) {
	${2}
}"
        }
    }
}

问题：就像在内置的emmet中，@media screen之间有空间，我想为我的自定义创建相同的它看起来像它所以它变成@media max-width和@media min-width，我似乎无法实现。

我尝试了什么以及我期望它起作用：

{
    "css": {
        "snippets": {
            "@media max-width": "@media(max-width: ${1:768}px) {
	${2}
}",
            "@media min-width": "@media(min-width: ${1:768}px) {
	${2}
}"
        }
    }
}

答案

没有办法在缩写快捷方式中添加空格。您在屏幕截图中看到的是扩展结果的预览，而不是实际的片段

另一答案

正如@Mark在评论中提到的，如果使用less，我们可以将片段放在片段/ css.json（less.json）中。但片段结构看起来不同。

要添加片段，请打开文件>首选项>用户片段，然后选择要添加片段的语言，在本例中我选择css。

根据自己的文件中的文档添加代码。根据我的要求代码看起来像这样。

    "media min width 768px": {
        "prefix": "@media min-width",
        "body": [
            "@media(min-width: ${1:768}px) {
	${2}
}",
            "$3"
        ],
        "description": "Media min width"
    },

    "media max width 768px": {
        "prefix": "@media max-width",
        "body": [
            "@media(max-width: ${1:768}px) {
	${2}
}",
            "$3"
        ],
        "description": "Media max width"
    }

结果：