Как сделать свой снипет в Visual Studio Code чтобы он работал подобно emmet?

Question

[Роман Матвеев]

например в emmet мы пишем
mt10 и получаем по табу при разворачивании margin-top: 10px;
и мне подобно этому нужно сделать свой сниппет.
Пишу
md768
получаю
@media all and (max-width:768px) { }
========

т.е. суть ясна, чтоб сразу после md цифры попадали в развернутом виде на места размера брекпоинта media запроса.

Я нашел в документации по создании сниппетов что-то подобное, но именно такой вариант не смог сделать.
Может кто в сталкивался с таким.
Поделитесь пожалуйста.

Comments

[Дмитрий Беляев]

emmet не на сниппетах сделан
Насколько знаю, в prefix сниппета нельзя сделать чтоб матчил произвольный текст, такой как 768 в примере.

А вообще, изучайте:
https://code.visualstudio.com/api
Свой плагин написать не сложно, а из него можно любую дичь творить

[Дмитрий Беляев]

хотя никто не мешает сделать сниппет, который реагирует на md и вбивает @media all and (max-width: px) { } и ставит курсор перед px, а по табу внутрь фигурных скобок

[Роман Матвеев]

Дмитрий Беляев, я так и сделал и даже дальше пошел
вот три снипета что я сделал

"media mixin": {
		"scope": "scss,css",
		"prefix": "md",
		"body": [
			"@include max-s($1px)  {",
			"	$0",
			"}"
		],
		"description": "insert media mixin"
	},

	"media mixin3": {
		"scope": "scss,css",
		"prefix": "mk",
		"body": [
			"@include max-s(${1|1024,992,768,576,420,380|}px)  {",
			"	$0",
			"}"
			// "$CLIPBOARD"
		],
		"description": "insert media mixin3"
	},
	"media mixin2": {
		"prefix": "media",
		"body": [
			
			"@include max-s(${TM_SELECTED_TEXT}px)  {",
			"	$0",
			"}"
			// "$CLIPBOARD"
		],
		"description": "insert media mixin2"
	}
}

последний сниппет повешал на хоткей и получилось так что - пишу я например брекпоинт 768 выделаю его и потом нажимаю хот кей.
но все же привычней когда сразу пишешь md768 и разварачиваешь как нужно - этого хочу добиться.
Может так можно сделать в emmet ?
может покапать там в эту сторону.

[Дмитрий Беляев]

Роман Матвеев, насколько знаю в emmet есть только сниппет для @media screen {}
А то что Вы хотите можно лишь кастомным плагином сделать, тут вариант или поискать на маркетплейсе или написать самому. Если знакомы с JS/TS то написать самому не так уж и сложно на самом деле.

Answer 1

[Роман Матвеев]

Вопрос решен
Пошел другим путем , использовал сам Emmet а вернее его настройки.
https://code.visualstudio.com/docs/editor/emmet#_u...
в фале сниппетов для emmet сделал свой и все сработfло:

"css": {
	  "snippets": {
		"md": "@include max-s(${1}px)  {\n  ${0} \n}"
	  }
	}