Изменеие сниппета для Emmet

Изменение сниппета для Emmet

Инструкция по настройке существующих сниппетов под себя.

Главная » Emmet » Изменение сниппета для Emmet

Добавление ссылки на таблицу стилей

При создании нового документа, используя Emmet и аббревиатуру ! (восклицательный знак), нужно дописывать ссылку на файл со стилями. Ведь она не добавляется автоматически.

Сниппет без ссылки на стили

По умолчанию ссылка на стили не добавляется

автоматическая замена синтаксисаEmmet: автоматическая замена синтаксиса.

Чтобы исправить это положение, откроем файл с настройками пользователя. Вы уже вносили правки в этот файл, если меняли синтаксис.

Preferences → Package Settings → Emmet → Settings — User

Путь к настройке в MacOS

Путь к настройке в MacOS

Путь к настройке в Windows

Путь к настройке в Windows

Нужно изменить аббревиатуру doc.

Между фигурными скобками, что уже есть в файле, вписываем следующие строки:

"snippets": {
  "html": {
    "abbreviations": {
      "doc": "html>(head>meta[charset=${charset}]+title{${1:Document}}+link:css)+body"
    }
  }
}

Сниппет, который добавляет ссылку на стили

Финальный код, который добавляет ссылку на стили при создании нового документа

Теперь, введя ! и нажав TAB, создастся базовый документ с ссылкой на таблицу стилей.
Ссылка на стили добавляется автоматически

Ссылка на стили добавляется автоматически

Создание собственных сниппетов

Таким же образом вы можете создавать собственные сниппеты и править существующие.

Прежде, чем что-то менять, посмотрите на существующие сниппеты и аббревиатуры.

Мой файл настроек

{
  "syntaxProfiles": {
    "html": "xhtml"
  },

  "snippets": {
    "html": {
      "abbreviations": {
        "meta:vp": "",
			
        "doc": "html>(head>meta[charset=${charset}]+title{${1:Document}}+meta:vp+link:css)+body"
      }
    },
    "css": {
      "snippets": {
        "!": "html {ntbox-sizing: border-box;nt-moz-osx-font-smoothing: grayscale;n    -webkit-font-smoothing: antialiased;n}nn*, ::before, ::after {ntbox-sizing: inherit;n}nnbody {ntmargin: 0;n}nnimg {ntmax-width: 100%;ntheight: auto;ntvertical-align: middle;n}nn"
      }
    }
  }
}

Если вы уже создавали собственные сниппеты, поделитесь ими в комментариях. И расскажите, какие задачи они помогают вам решать.

Спасибо
Екатерине Небесной за помощь в написании заметки.