如何在 vscode emmet key 建议中添加空格？答案

【问题标题】：How to add space in vscode emmet key suggestions?如何在 vscode emmet key 建议中添加空格？
【发布时间】：2018-04-10 09:00:34
【问题描述】：

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

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

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

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

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

【问题讨论】：

这里是默认的sn-p：github.com/emmetio/snippets/blob/master/css.json
@Alex 我知道，但是看着它并没有给出任何线索：S
您是否尝试在 sn-ps/css.json 文件中创建您的 sn-p？它显示出你想要的样子。

标签： visual-studio-code emmet

【解决方案1】：

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

【讨论】：

所以你也意味着它不会显示自定义 sn-p 扩展结果的预览。我编写的自定义 sn-p 几乎与内置的实际 sn-p 完全相同？有没有强制它显示预览？我们对预览有任何控制吗？谢谢
在新的 Emmet 概念中，缩写扩展为自动完成。第一个自动完成条目是扩展缩写，其余都是插入缩写的快捷方式。您可以尝试在 HTML 文件中输入 link：第一个条目将用展开的结果替换快捷方式，下一个条目只需插入快捷方式，以便您可以在稍后展开时添加属性
在大多数情况下，您应该使用 Ctrl-Space 强制自动完成弹出窗口，但 VS Code 的实现可能会有所不同（插件由 VS Code 开发，而不是我）
感谢您的解释:)

【解决方案2】：

正如@Mark 在评论中提到的，如果你使用less，我们可以将sn-ps 放在sn-ps/css.json (less.json) 中。但是 sn-p 结构看起来不同。

要添加 sn-ps 打开 File > Preferences > User Snippets 然后选择要添加 sn-ps 的语言，在这种情况下我选择 css。

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

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

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

结果：

【讨论】：