Как настроить снипетты в vsCode?

Question

[skuvaWeb]

Никак не могу понять, как мне добиться следующего поведения:
Я хочу чтобы я мог написать @mw500 и сниппет трансформировался в

@media (max-width: 500px){
  
}

Как передать в сниппет эту "переменную", в виде числа

Comments

[Алексей Ярков]

Хм, тоже стало интересно.
Почитайте про переменные, может натолкнет на мысль.
А я тоже подожду ответа ))

Пока могу предложить только такой вариант:

{
  "@media": {
    "prefix": "media",
    "body": ["@media (${1:max-width}: ${2:500}px){", "  ${0}", "}"],
    "description": "CSS media request"
  }
}

[skuvaWeb]

Алексей Ярков, Читал я о них, не дошло, я вот и спрашиваю)

Answer 1

[Николай]

Чтобы сделать сниппет, зайди в файл-настройки-новый сниппет.
Сохранить файл. Откроется файл сниппета, там есть пример закоменитрованный.
Все подробно описано. Имя сниппета, коротное имя по которому будет вызываться, в каких файлах будет работать, тело сниппета и описание.

У вас такой сниппет будет.
"@media500": {
"prefix": "@mw500",
"scope": "css",
"body": [
"@media (max-width: 500px){$1}",
],
"description": "Подключение @media"
},
Знак $ это где будет установлен курсор после разворота сниппета.

Comments

[skuvaWeb]

Я читал документацию. Не уж то вы предлагаете сделать мне 1920 снипетов для всех разрешений?

[Алексей Ярков]

skuvaWeb, тогда уж пишите генератор сниппетов ))

[lexlexa]

skuvaWeb, В чем проблема сделать тогда вот так? Первый таб ширина экрана, второй стили.

"@media": {
"prefix": "@mq",
"scope": "css",
"body": [
"@media (max-width: $1px){$2}",
],
"description": "Подключение @media"
},

[skuvaWeb]

lexlexa, у меня сейчас такой снипет, но интересует именно возможность вышеописанной реализации