如何在 vscode emmet 键建议中添加 space？

Question

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

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

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

我尝试过的和我期望的效果：

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

Answer 1

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

Answer 2

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

要添加片段打开 文件 > 首选项 > 用户片段 然后选择你想要添加片段的语言，在这种情况下我选择 css.

根据文件本身的文档添加代码。根据我的要求，代码如下所示。

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

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

结果：

如何在 vscode emmet 键建议中添加 space？

How to add space in vscode emmet key suggestions?

visual-studio-code

emmet