How to add space in vscode emmet key suggestions? - visual-studio-code

Question

There is inbuilt emmet suggestion of #media like in the image below and I wanted to add my custom snippets for max-width and min-width. Which I successfully did with below codes.
{
"css": {
"snippets": {
"#mediaMaxWidth": "#media(max-width: ${1:768}px) {\n\t${2}\n}",
"#mediaMinWidth": "#media(min-width: ${1:768}px) {\n\t${2}\n}"
}
}
}
Problem: : Like in inbuilt emmet there is space between #media screen , I want to create same for my custom one to looks like it so it become #media max-width and #media min-width which I can't seems to achieve.
What I tried and what I expected it to work:
{
"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}"
}
}
}

Answer 1

There’s no way to add space in abbreviation shortcut. What you see in screenshot is a preview of expanded result, not actual snippet

Answer 2

As #Mark had mentioned in the comment, we can put snippets in snippets/css.json (less.json) if you use less. BUT snippet structure looks different.
To add snippets open File > Preferences > User Snippets then choose the language you want to add snippets to, in this case i choose css.
Add codes based on the documentation in the file it self. Based on my requirement codes look like this.
"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"
}
Result: