Emmet brackets: Brackets и Emmet — htmllab

Переключатель ответвления / метки

Скачать исходный код

• Клонировать с помощью SSH
• Клонировать с HTTPS

• Скопируйте URL-адрес клона SSH git@git.esi-bru.be: 45242 / extensions.git
• Скопируйте URL-адрес клона HTTPS https://git.esi-bru.be/45242/extensions.git

Ускоренный рабочий процесс: освоение Эммета, часть 1

Emmet — это бесплатный плагин для текстовых редакторов, позволяющий быстрее писать код HTML и CSS.В этой серии, состоящей из нескольких частей, я покажу вам, как писать код HTML и CSS быстрее, чем когда-либо, с помощью Emmet, профилируя все функции Emmet и как использовать синтаксис, сокращения и сочетания клавиш, чтобы сэкономить ваше время.

Emmet — обязательный набор инструментов веб-разработчика. С Emmet вы можете быстро создать свою разметку. Вы пишете простые сокращения и просто нажимаете Tab или Ctrl + E или любое другое поддерживаемое сочетание клавиш, и Эммет разворачивает простые сокращения в сложные фрагменты кода HTML и CSS.Эммет сделает ваш рабочий процесс HTML и CSS намного быстрее.

Если вы делаете много HTML-шаблонов с навигационными панелями, таблицами и / или многоколоночными макетами, вы найдете Эммета чрезвычайно полезным. Как только вы привыкнете к синтаксису Emmet, он изменит ваш способ создания веб-страниц. Уверяю вас, вы полюбите Эммета, когда будете использовать его в своем рабочем процессе. Эммет вполне может изменить ваш способ написания кода HTML и CSS.

Вы можете установить Emmet как плагин, доступный для многих популярных текстовых редакторов.Ниже я перечислил некоторые редакторы кода, поддерживающие Emmet. Документация по установке и использованию Emmet в каждом из этих текстовых редакторов доступна в Интернете.

Вы можете просмотреть полный список поддерживаемых текстовых редакторов на http://emmet. io/download/

Многие популярные онлайн-сервисы поддерживают Эммета. Это означает, что вы можете писать код быстрее, где бы вы ни находились. Вот несколько сервисов, которые поддерживают Эммет.

Зачем нужен Эммет?

Ответ прост: ускорить рабочий процесс кодирования.Emmet позволяет писать молниеносный код. Простые сокращения, подобные CSS, превращаются в сложный код. Вы можете легко сгенерировать текст lorem ipsum, использовать множество сочетаний клавиш и многое другое.

Как работает Эммет?

Emmet использует синтаксис селектора, подобный CSS. Вы пишете сокращения, подобные CSS, помещаете курсор в конец аббревиатуры и затем нажимаете Tab , Ctrl + E или любую другую клавишу клавиатуры, настроенную для преобразования сокращений в фактический код HTML.Эммет заменяет на на . Вы также можете указать значения, но если вы не укажете значения, создаст с позициями табуляции внутри каждого пустого атрибута. Вы можете вставить целевой URL и нажать Tab, чтобы перейти к следующей точке редактирования, где вы можете вставить следующее желаемое значение.

Давайте посмотрим на другой пример. Если вы напишете

  div # header> h2.logo> a {site Name}  

У вас будет следующий код:

  

 
 
 Название сайта   
  

Развернуть функцию сокращения

Вот список некоторых поддерживаемых операторов.

Элемент: ( Div , p , span )

Введите имя элемента и нажмите Tab, чтобы развернуть.

div будет расширен до

.

Элемент с идентификатором ( div # header , E # id )

# используется для применения идентификаторов к любому элементу.

Элемент с классом (раздел. Контейнер, боковая панель)

. используется для применения классов к любому элементу.

Дочерний элемент div.header> div.main> .post

> используется для создания дочерних элементов.

Родственные элементы E + N (h2 + h3)

Знак + используется для создания родственных элементов.

Множество элементов li * 5

* символ создаст определенные множественные числа любого элемента., вы можете подняться на один уровень вверх по дереву и изменить контекст, в котором должны появиться следующие элементы:

Группировка: ()

{} Круглые скобки могут использоваться для группировки поддеревьев в сложные сокращения.

Добавление текста {}: E {text}

{} используется для добавления текста к элементу.

Эммет также предлагает еще несколько замечательных функций, о которых я подробно расскажу позже.

Сокращения CSS

Хотя сокращения Emmet хороши для создания HTML, XML или любой другой структурированной разметки, они также очень полезны для CSS.Эммет предоставляет вам сокращение для свойств CSS. Для синтаксиса CSS у Emmet есть много предопределенных фрагментов для свойств. вы можете расширить аббревиатуру bd , чтобы получить границу :; сниппет и br для border-right:; . Вы также можете указать значение для этого свойства. Просто введите bl: 10 для border-left: 10px; .

Если вы хотите указать несколько значений, используйте дефис для их разделения: m10-20 расширяется до margin: 10px 20px; . Чтобы указать отрицательные значения, поставьте перед первым значением дефис, а всем остальным — двойной дефис: m-10-20 расширяется до margin: -10px -20px;

Действия и сочетания клавиш

Emmet предлагает множество полезных и экономящих время действий и сочетаний клавиш. Emmet предлагает уникальные инструменты, которые могут значительно улучшить ваш опыт редактирования, и очень полезны, когда вам нужно отредактировать код HTML и CSS, чтобы исправить ошибки и добавить новые функции.Некоторые действия Эммета полезны для редактирования существующего HTML-кода, например, функция Перенос с аббревиатурой . С помощью этой функции вы можете заключить элементы навигации в меню навигации.

Некоторые другие доступные действия включают:

• Раскрыть сокращение
• Сопоставление пары тегов
• Перейти к соответствующей паре
• Перейти к точке редактирования
• Обновить размер изображения

Мы узнаем обо всех этих и многом другом в следующих частях 2, 3 и 4 этой серии.

Краткое знакомство с Эмметом. … Как сказано через 7 этапов Винса… | Автор: Итан Нам

… как рассказано через 7 этапов Винса Макмэна.

Вам нравится писать HTML? Возможно нет. Написание HTML не похоже на программирование. Кажется, меньше решения проблем и больше редактирования. Вы тратите большую часть своего времени на создание отступов, закрытие тегов, обертывание блоков HTML в div, создание отступов, отступов и многое другое.

Итак, что, если бы я сказал вам, что смогу вдвое сократить время, которое вы тратите на написание HTML? Потратьте половину времени, которое вы потратили бы на написание HTML с этого момента и до конца своей жизни, и верните его в свои руки, чтобы вы могли делать то, что хотите?

Знакомьтесь, Emmet — плагин, который значительно улучшает рабочий процесс HTML и CSS.

Давайте рассмотрим, что умеет Эммет:

Автозаполнение тегов: введите тег и нажмите вкладку

Вы, вероятно, не впечатлены этим моментом. Но подождите — это еще не все.

Вставьте имена идентификаторов с помощью оператора #. Вставьте имена классов, используя расширение. оператор.

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

Ваше внимание?

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

Вложите дочерние элементы с помощью оператора>.

Вставьте братьев и сестер с помощью оператора +.

А теперь поговорим, амирит?

Умножайте узлы с помощью оператора *.

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

Ага, верно.

Пронумеруйте элементы с помощью оператора $.

Вы можете проявить изобретательность с оператором $. Ниже я создаю теги h2, h3, h4 и h5, прикрепляю к каждому из них myclass1, myclass2, myclass3 и myclass4 и вставляю внутренний текст заголовка 1, заголовка 2, заголовка 3 и заголовка 4.

Oh Ага.

Наконец, оберните любой блок текста, нажав CTRL + W, подняв поле обтекания с аббревиатурой и введя любую комбинацию команд emmet, которую вы хотите.

Вы можете легко заключить блок HTML в такой блок div. Я добавляю идентификатор на всякий случай.

Зная, что вам больше никогда не придется делать отступ, чтобы обернуть HTML в div.

Собираем все вместе. Посмотрите на весь HTML, который я могу написать с помощью Эммета. Без отступов и без суеты.

Видеть значит верить.

Emmet — мощный инструмент, который может избавить вас от утомительной задачи редактирования HTML. Он может даже использовать CSS, который здесь не рассматривается.

Если вам интересно, посетите их официальный сайт ниже, где вы можете сделать пожертвование команде.Я также добавил ссылку на шпаргалку, где вы можете увидеть, что еще умеет Эммет.

Ссылки :

1. Официальный сайт Emmet
2. Официальный шпаргалка Emmet

Emmet в Visual Studio Code

Поддержка фрагментов и расширения Emmet встроена прямо в Visual Studio Code, расширение не требуется . Emmet 2.0 поддерживает большинство действий Emmet, включая расширение сокращений и фрагментов Emmet.

Как расширить аббревиатуры и фрагменты Эммета

Аббревиатура Emmet и расширения фрагментов включены по умолчанию в html , haml , pug , slim , jsx , xml , xsl , 9100ass6 css ssl ssl , за вычетом файлов и стилуса , а также любого языка, унаследованного от любого из вышеперечисленных, например, handlebars и php .

Когда вы начнете вводить аббревиатуру Emmet, вы увидите аббревиатуру, отображаемую в списке предложений. Если у вас открыто всплывающее окно с предложенной документацией, по мере ввода вы увидите предварительный просмотр расширения. Если вы находитесь в файле таблицы стилей, расширенное сокращение отображается в списке предложений, отсортированном среди других предложений CSS.

Использование вкладки для расширений Emmet

Если вы хотите использовать клавишу Tab для расширения сокращений Эммета, добавьте следующий параметр:

  "эммет.triggerExpansionOnTab ": true  

Этот параметр позволяет использовать клавишу Tab для отступа, когда текст не является сокращением Emmet.

Эммет, когда быстрые подсказки отключены

Если вы отключили параметр editor.quickSuggestions , вы не увидите предложений по мере ввода. Вы по-прежнему можете запускать предложения вручную, нажав ⌃ Пробел (Windows, Linux Ctrl + Пробел) и просмотрите предварительный просмотр.

Отключить Эммет в предложениях

Если вы вообще не хотите видеть аббревиатуры Эммета в предложениях, используйте следующий параметр:

  "эммет. showExpandedAbbreviation ":" never " 

Вы все еще можете использовать команду Emmet: Expand Abbreviation , чтобы расширить ваши сокращения. Вы также можете привязать любое сочетание клавиш к идентификатору команды editor.emmet.action.expandAbbreviation .

Предложение Эммета для заказа

Чтобы предложения Эммета всегда находились наверху в списке предложений, добавьте следующие настройки:

  "emmet.showSuggestionsAsSnippets": true,
"редактор.snippetSuggestions ":" top " 

Сокращения Эммета в других типах файлов

Чтобы включить расширение аббревиатуры Emmet в типах файлов, где оно недоступно по умолчанию, используйте параметр emmet.includeLanguages ​​. Обязательно используйте идентификаторы языка для обеих сторон сопоставления, при этом правая сторона является идентификатором языка, поддерживаемого Emmet (см. Список выше).

Например:

  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "бритва": "HTML",
    "открытый текст": "мопс"
}  

Эммет не знает этих новых языков, поэтому предложения Эммета могут отображаться в контекстах, отличных от HTML / CSS.Чтобы избежать этого, вы можете использовать следующую настройку.

  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"  

Примечание: Если вы ранее использовали emmet.syntaxProfiles для сопоставления новых типов файлов, начиная с VS Code 1.15 и далее вам следует использовать параметр emmet.includeLanguages ​​. emmet.syntaxProfiles предназначен только для настройки окончательного вывода.

Emmet с мультикурсорами

Вы также можете использовать большинство действий Emmet с мультикурсорами:

Использование фильтров

Фильтры — это специальные постпроцессоры, которые изменяют расширенное сокращение перед его выводом в редактор. Есть 2 способа использования фильтров; либо глобально через параметр emmet.syntaxProfiles , либо непосредственно в текущем сокращении.

Ниже приведен пример первого подхода с использованием параметра emmet.syntaxProfiles для применения фильтра bem для всех сокращений в файлах HTML:

  "emmet.syntaxProfiles": {
    "html": {
        "фильтры": "бэм"
    }
}  

Чтобы предоставить фильтр только для текущего сокращения, добавьте фильтр к своему сокращению.Например, div # page | c применит фильтр comment к аббревиатуре div # page .

БЭМ фильтр (бем)

Если для написания HTML вы используете модификатор блочного элемента (БЭМ), то фильтры bem вам очень пригодятся. Чтобы узнать больше о том, как использовать фильтры bem , прочтите БЭМ-фильтр в Emmet.

Вы можете настроить этот фильтр с помощью параметров bem.elementSeparator и bem.modifierSeparator , как описано в настройках Emmet.

Этот фильтр добавляет комментарии вокруг важных тегов. По умолчанию «важные теги» — это теги с идентификатором и / или атрибутом класса.

Например, div> div # page> p.title + p | c будет расширен до:

Вы можете настроить этот фильтр, используя фильтр .commentTrigger , filter.comment После и filter.commentBefore предпочтений, как описано в настройках Emmet.

Формат для фильтра . Комментарий После предпочтения отличается в VS Code Emmet 2.0.

Например, вместо:

  "emmet.preferences": {
    "filter.commentAfter": "\ n  <% = attr ('class', '. ')%> ->"
}  

в VS Code, вы бы использовали более простой:

  "эммет.предпочтения ": {
    "filter.commentAfter": "\ n "
}  

Обрезной фильтр (t)

Этот фильтр применим только при предоставлении сокращений для команды Emmet: Обернуть отдельные строки сокращением . Он удаляет маркеры строки из обернутых строк.

Использование пользовательских фрагментов кода Emmet

Пользовательские фрагменты кода Emmet необходимо определить в файле json с именем snippets.json . В параметре emmet.extensionsPath должен быть указан путь к каталогу, содержащему этот файл.

Ниже приведен пример содержимого файла snippets.json .

  {
  "html": {
    "snippets": {
      "ull": "ul> li [id = $ {1} class = $ {2}] * 2 {Будет работать с html, pug, haml и slim}",
      "oll": "
 
 Будет работать только в html 
",
      "ran": "{заключать обычный текст в фигурные скобки}"
    }
  },
  "css": {
    "snippets": {
      "cb": "цвет: черный",
      "bsd": "border: 1px solid $ {1: red}",
      "ls": "list-style: $ {1}"
    }
  }
}  

Создание пользовательских сниппетов в Emmet 2.0 через файл snippets.json отличается от старого способа сделать то же самое в нескольких отношениях:

Тема	Старый Эммет	Эммет 2,0
Фрагменты и сокращения	Поддерживает оба в двух отдельных свойствах, называемых фрагментами , и , аббревиатуры	Эти 2 были объединены в одно свойство, называемое сниппетами. См. Фрагменты HTML по умолчанию и фрагменты CSS
Имена фрагментов CSS	Может содержать :	Не используйте : при определении имен фрагментов. Он используется для разделения имени свойства и значения, когда Эммет пытается нечетко сопоставить данное сокращение с одним из фрагментов.
Значения фрагмента CSS	Может заканчиваться на ;	Не складывать ; в конце значения фрагмента. Эммет добавит в конце ; на основе типа файла (css / less / scss vs sass / stylus) или предпочтения emmet, установленного для css.propertyEnd , sass.propertyEnd , stylus.propertyEnd
Расположение курсора	$ {cursor} или | можно использовать	Используйте только синтаксис сопряжения с текстом, например $ {1} , для позиций табуляции и местоположения курсора.

HTML-фрагменты Эммета

применимы ко всем другим разновидностям разметки, таким как haml или pug . Если значение фрагмента представляет собой аббревиатуру, а не фактический HTML, соответствующие преобразования могут быть применены для получения правильного вывода в соответствии с типом языка.

Например, для неупорядоченного списка с элементом списка, если значение вашего фрагмента — ul> li , вы можете использовать тот же фрагмент в html , haml , pug или slim , но если ваш значение фрагмента —

Если вам нужен фрагмент простого текста, заключите его в рамку {} .

Фрагменты CSS Emmet

Значения для сниппетов CSS Emmet должны быть полной парой имени свойства и значения.

применимы ко всем другим разновидностям таблиц стилей, таким как scss , без или sass . Поэтому не включайте завершающий ; в конце значения фрагмента. Эммет будет добавлять его по мере необходимости, в зависимости от того, требует ли это язык.

Не используйте : в имени фрагмента. : используется для разделения имени свойства и значения, когда Эммет пытается нечетко сопоставить сокращение с одним из фрагментов.

Позиции табуляции и курсоры в пользовательских фрагментах

Синтаксис позиций табуляции в настраиваемых фрагментах Emmet соответствует синтаксису фрагментов Textmate.

• Используйте $ {1} , $ {2} для позиций табуляции и $ {1: placeholder} для позиций табуляции с заполнителями.
• Ранее | или $ {cursor} использовалось для обозначения положения курсора в пользовательском фрагменте кода Emmet. Это больше не поддерживается. Вместо этого используйте $ {1} .

Конфигурация Emmet

Ниже приведены настройки Emmet, которые вы можете использовать для настройки своего опыта работы с Emmet в VS Code.

• эммет.includeLanguages ​​

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

  Например:

    "emmet.includeLanguages": {
      "javascript": "javascriptreact",
      "открытый текст": "мопс"
  }  

• эммет.excludeLanguages ​​

  Если есть язык, на котором вы не хотите видеть расширения Emmet, добавьте его в этот параметр, который принимает массив строк идентификаторов языков.

• emmet.syntaxProfiles

  См. Эммет «Настройка выходного профиля», чтобы узнать, как настроить выходные данные сокращений HTML.

  Например:

    "emmet.syntaxProfiles": {
      "html": {
          "attr_quotes": "одиночный"
      },
      "jsx": {
          "self_closing_tag": true
      }
  }  

• эммет.переменные

  Настроить переменные, используемые фрагментами Emmet.

  Например:

    "emmet.variables": {
      "язык": "де",
      "charset": "UTF-16"
  }  

• emmet.showExpandedAbbreviation

  Управляет предложениями Emmet, отображаемыми в списке предложений / дополнений.

  Значение настройки	Описание
  никогда	Никогда не показывайте сокращения Эммета в списке предложений для любого языка.
  inMarkupAndStylesheetFilesOnly	Показывать предложения Emmet только для языков, основанных исключительно на разметке и таблицах стилей (‘html’, ‘pug’, ‘slim’, ‘haml’, ‘xml’, ‘xsl’, ‘css’, ‘scss’, ‘sass’ , «меньше», «стилус»).
  всегда	Показывать предложения Emmet во всех режимах, поддерживаемых Emmet, а также на языках, для которых есть сопоставление в настройке emmet.includeLanguages ​​.

  Примечание: В режиме всегда новая реализация Emmet не учитывает контекст.Например, если вы редактируете файл JavaScript React, вы получите предложения Emmet не только при написании разметки, но и при написании JavaScript.

• emmet.showАббревиатураПредложения

  Показывает возможные сокращения emmet в качестве предложений. По умолчанию это , правда .

  Например, когда вы набираете li , вы получаете предложения для всех фрагментов emmet, начинающихся с li , например, link , link: css , link: favicon и т. Д.Это полезно при изучении фрагментов кода Эммета, о существовании которых вы даже не подозревали, если не знали шпаргалку Эммета наизусть.

  Неприменимо в таблицах стилей или когда emmet.showExpandedAbbreviation установлено на , никогда .

• emmet.extensionsPath

  Укажите расположение каталога, в котором находится файл snippets.json , который, в свою очередь, содержит ваши пользовательские фрагменты.

• эммет.triggerExpansionOnTab

  Установите значение true, чтобы включить расширение сокращений Emmet с помощью клавиши Tab. Мы используем этот параметр, чтобы обеспечить соответствующий запасной вариант, чтобы обеспечить отступ, когда нет сокращений для расширения.

• emmet.showSuggestionsAsSnippets

  Если установлено значение true , то предложения Emmet будут сгруппированы вместе с другими фрагментами, что позволит вам упорядочить их в соответствии с настройкой editor.snippetSuggestions .Установите значение true и editor.snippetSuggestions от до наверху , чтобы предложения Эммета всегда отображались наверху среди других предложений.

• emmet.preferences

  Вы можете использовать этот параметр для настройки Emmet, как описано в настройках Emmet. В настоящее время поддерживаются следующие настройки:

  • css.propertyEnd
  • css.valueSeparator
  • sass.propertyEnd
  • sass.valueSeparator
  • щуп. Свойство Конец
  • щуп. Значение Разделитель
  • css.unitAliases
  • css.intUnit
  • css.floatUnit
  • bem.elementSeparator
  • bem. modifier Разделитель
  • Комментарий фильтра До
  • фильтр.commentTrigger
  • фильтр Комментарий После
  • формат . NoIndentTags
  • format.forceIndentationForTags
  • profile.allowCompactBoolean
  • css.fuzzySearchMinScore

  Формат для фильтра . Комментарий После предпочтение отличается и проще в Emmet 2.0.

  Например, вместо старого формата

    "эммет.предпочтения ": {
      "filter.commentAfter": "\ n  <% = attr ('class', '.')%> ->"
  }  

  , вы бы использовали

    "emmet.preferences": {
      "filter.commentAfter": "\ n "
  }  

  Если вам нужна поддержка каких-либо других предпочтений, задокументированных в предпочтениях Emmet, пожалуйста, зарегистрируйте запрос функции.

Следующие шаги

Emmet — лишь одна из замечательных функций веб-разработчика в VS Code.Читайте дальше, чтобы узнать о:

• HTML — VS Code поддерживает HTML с IntelliSense, закрывающими тегами и форматированием.
• CSS — Мы предлагаем обширную поддержку CSS, SCSS и Less.

Общие вопросы

Пользовательские теги не раскрываются в списке предложений

Пользовательские теги при использовании в таких выражениях, как MyTag> YourTag или MyTag.someclass , отображаются в списке предложений. Но когда они используются сами по себе, например, MyTag , они не отображаются в списке предложений.Это сделано для того, чтобы избежать шума в списке предложений, поскольку каждое слово является потенциальным настраиваемым тегом.

Добавьте следующий параметр, чтобы разрешить раскрытие сокращений Emmet с помощью вкладки, которая будет раскрывать настраиваемые теги во всех случаях.

  "emmet.triggerExpansionOnTab": true  

Мои фрагменты HTML, заканчивающиеся на

, заканчивающиеся на + , такие как select + и ul + из шпаргалки Emmet, не поддерживаются.Это известная проблема в Emmet 2.0. Проблема: emmetio / html-matcher # 1. Обходной путь — создать свои собственные пользовательские фрагменты кода Emmet для таких сценариев.

Где я могу установить все предпочтения, как описано в предпочтениях Emmet

Вы можете установить предпочтения с помощью параметра emmet.preferences . Только часть предпочтений, задокументированных в предпочтениях Emmet, может быть изменена. Пожалуйста, прочтите раздел настроек в разделе «Конфигурация Emmet».

Есть советы и рекомендации?

Конечно!

• В сокращениях CSS, когда вы используете : , левая часть используется для нечеткого совпадения с именем свойства CSS, а правая часть используется для сопоставления со значением свойства CSS.Воспользуйтесь этим в полной мере, используя такие сокращения, как pos: f , trf: rx , fw: b и т. Д.
• Используйте новую команду Emmet: обернуть отдельные строки аббревиатурой вместо Emmet: перенести с аббревиатурой , если вы хотите, чтобы каждая выбранная строка была обернута повторителем в данном сокращении. Например, используйте ul> li * , чтобы заключить выбранные строки в неупорядоченный список с каждой строкой в ​​качестве элемента списка.

  No related posts.