Emmet in Visual Studio Code
Support for Emmet snippets and expansion is built right into Visual Studio Code, no extension required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.
How to expand Emmet abbreviations and snippets
Emmet abbreviation and snippet expansions are enabled by default in html , haml , pug , slim , jsx , xml , xsl , css , scss , sass , less and stylus files, as well as any language that inherits from any of the above like handlebars and php .
When you start typing an Emmet abbreviation, you will see the abbreviation displayed in the suggestion list. If you have the suggestion documentation fly-out open, you will see a preview of the expansion as you type. If you are in a stylesheet file, the expanded abbreviation shows up in the suggestion list sorted among the other CSS suggestions.
Using Tab for Emmet expansions
If you want to use the Tab key for expanding the Emmet abbreviations, add the following setting:
"emmet.triggerExpansionOnTab": true This setting allows using the Tab key for indentation when text is not an Emmet abbreviation.
Emmet when quickSuggestions are disabled
If you have disabled the editor.quickSuggestions setting, you won’t see suggestions as you type. You can still trigger suggestions manually by pressing ⌃Space (Windows, Linux Ctrl+Space ) and see the preview.
Disable Emmet in suggestions
If you don’t want to see Emmet abbreviations in suggestions at all, then use the following setting:
"emmet.showExpandedAbbreviation": "never" You can still use the command Emmet: Expand Abbreviation to expand your abbreviations. You can also bind any keyboard shortcut to the command id editor.emmet.action.expandAbbreviation as well.
Emmet suggestion ordering
To ensure Emmet suggestions are always on top in the suggestion list, add the following settings:
"emmet.showSuggestionsAsSnippets": true, "editor.snippetSuggestions": "top" Emmet abbreviations in other file types
To enable the Emmet abbreviation expansion in file types where it is not available by default, use the emmet.includeLanguages setting. Make sure to use language identifiers for both sides of the mapping, with the right side being the language identifier of an Emmet supported language (see the list above).
"emmet.includeLanguages": "javascript": "javascriptreact", "razor": "html", "plaintext": "pug" > Emmet has no knowledge of these new languages, and so there might be Emmet suggestions showing up in non HTML/CSS contexts. To avoid this, you can use the following setting.
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly" Note: If you used emmet.syntaxProfiles previously to map new file types, from VS Code 1.15 onwards you should use the setting emmet.includeLanguages instead. emmet.syntaxProfiles is meant for customizing the final output only.
Emmet with multi-cursors
You can use most of the Emmet actions with multi-cursors as well:
Using filters
Filters are special post-processors that modify the expanded abbreviation before it is output to the editor. There are 2 ways to use filters; either globally through the emmet.syntaxProfiles setting or directly in the current abbreviation.
Below is an example of the first approach using the emmet.syntaxProfiles setting to apply the bem filter for all the abbreviations in HTML files:
"emmet.syntaxProfiles": "html": "filters": "bem" > > To provide a filter for just the current abbreviation, append the filter to your abbreviation. For example, div#page|c will apply the comment filter to the div#page abbreviation.
BEM filter (bem)
If you use the Block Element Modifier (BEM) way of writing HTML, then bem filters are very handy for you to use. To learn more about how to use bem filters, read BEM filter in Emmet.
You can customize this filter by using the bem.elementSeparator and bem.modifierSeparator preferences as documented in Emmet Preferences.
Comment filter (c)
This filter adds comments around important tags. By default, «important tags» are those tags with id and/or class attribute.
For example div>div#page>p.title+p|c will be expanded to:
id="page"> class="title"> You can customize this filter by using the filter.commentTrigger , filter.commentAfter and filter.commentBefore preferences as documented in Emmet Preferences.
The format for the filter.commentAfter preference is different in VS Code Emmet 2.0.
For example, instead of:
"emmet.preferences": "filter.commentAfter": "\n -->" > in VS Code, you would use a simpler:
"emmet.preferences": "filter.commentAfter": "\n" > Trim filter (t)
This filter is applicable only when providing abbreviations for the Emmet: Wrap with Abbreviation command. It removes line markers from wrapped lines.
Using custom Emmet snippets
Custom Emmet snippets need to be defined in a json file named snippets.json . The emmet.extensionsPath setting should have the path to the directory containing this file.
Below is an example for the contents of this snippets.json file.
Authoring of Custom Snippets in Emmet 2.0 via the snippets.json file differs from the old way of doing the same in a few ways:
| Topic | Old Emmet | Emmet 2.0 |
|---|---|---|
| Snippets vs Abbreviations | Supports both in 2 separate properties called snippets and abbreviations | The 2 have been combined into a single property called snippets. See default HTML snippets and CSS snippets |
| CSS snippet names | Can contain : | Do not use : when defining snippet names. It is used to separate property name and value when Emmet tries to fuzzy match the given abbreviation to one of the snippets. |
| CSS snippet values | Can end with ; | Do not add ; at end of snippet value. Emmet will add the trailing ; based on the file type (css/less/scss vs sass/stylus) or the emmet preference set for css.propertyEnd , sass.propertyEnd , stylus.propertyEnd |
| Cursor location | $ or ` | ` can be used |
HTML Emmet snippets
HTML custom snippets are applicable to all other markup flavors like haml or pug . When snippet value is an abbreviation and not actual HTML, the appropriate transformations can be applied to get the right output as per the language type.
For example, for an unordered list with a list item, if your snippet value is ul>li , you can use the same snippet in html , haml , pug or slim , but if your snippet value is , then it will work only in html files.
If you want a snippet for plain text, then surround the text with <> .
CSS Emmet snippets
Values for CSS Emmet snippets should be a complete property name and value pair.
CSS custom snippets are applicable to all other stylesheet flavors like scss , less or sass . Therefore, don’t include a trailing ; at the end of the snippet value. Emmet will add it as needed based on whether the language requires it.
Do not use : in the snippet name. : is used to separate property name and value when Emmet tries to fuzzy match the abbreviation to one of the snippets.
Tab stops and cursors in custom snippets
The syntax for tab stops in custom Emmet snippets follows the Textmate snippets syntax.
- Use $ , $ for tab stops and $ for tab stops with placeholders.
- Previously, | or $ was used to denote the cursor location in the custom Emmet snippet. This is no longer supported. Use $ instead.
Emmet configuration
Below are Emmet settings that you can use to customize your Emmet experience in VS Code.
-
emmet.includeLanguages Use this setting to add mapping between the language of your choice and one of the Emmet supported languages to enable Emmet in the former using the syntax of the latter. Make sure to use language IDs for both sides of the mapping. For example:
"emmet.includeLanguages": "javascript": "javascriptreact", "plaintext": "pug" > "emmet.syntaxProfiles": "html": "attr_quotes": "single" >, "jsx": "self_closing_tag": true > > "emmet.variables": "lang": "de", "charset": "UTF-16" > - css.propertyEnd
- css.valueSeparator
- sass.propertyEnd
- sass.valueSeparator
- stylus.propertyEnd
- stylus.valueSeparator
- css.unitAliases
- css.intUnit
- css.floatUnit
- bem.elementSeparator
- bem.modifierSeparator
- filter.commentBefore
- filter.commentTrigger
- filter.commentAfter
- format.noIndentTags
- format.forceIndentationForTags
- profile.allowCompactBoolean
- css.fuzzySearchMinScore
The format for the filter.commentAfter preference is different and simpler in Emmet 2.0.
For example, instead of the older format
"emmet.preferences": "filter.commentAfter": "\n -->" > "emmet.preferences": "filter.commentAfter": "\n" > If you want support for any of the other preferences as documented in Emmet Preferences, please log a feature request.
Next steps
Emmet is just one of the great web developer features in VS Code. Read on to find out about:
- HTML — VS Code supports HTML with IntelliSense, closing tags, and formatting.
- CSS — We offer rich support for CSS, SCSS and Less.
Troubleshooting
Custom tags do not get expanded in the suggestion list
Custom tags when used in an expression like MyTag>YourTag or MyTag.someclass do show up in the suggestion list. But when these are used on their own like MyTag , they do not appear in the suggestion list. This is designed so to avoid noise in the suggestion list as every word is a potential custom tag.
Add the following setting to enable expanding of Emmet abbreviations using tab which will expand custom tags in all cases.
"emmet.triggerExpansionOnTab": true My HTML snippets ending with + do not work
HTML snippets ending with + like select+ and ul+ from the Emmet cheatsheet are not supported. This is a known issue in Emmet 2.0 Issue: emmetio/html-matcher#1. A workaround is to create your own custom Emmet snippets for such scenarios.
Abbreviations are failing to expand
First, check if you’re using custom snippets (if there is a snippets.json file being picked up by the emmet.extensionsPath setting). The format of custom snippets changed in VS Code release 1.53. Instead of using | to indicate where the cursor position is, use tokens such as $ , $ , etc. instead. The default CSS snippets file from the emmetio/emmet repository shows examples of the new cursor position format.
If abbreviations are still failing to expand:
- Check the builtin extensions to see if Emmet has been disabled.
- Try restarting the extension host by running the Developer: Restart Extension Host ( workbench.action.restartExtensionHost ) command in the Command Palette.
Where can I set all the preferences as documented in Emmet preferences?
You can set the preferences using the setting emmet.preferences . Only a subset of the preferences that are documented in Emmet preferences can be customized. Please read the preferences section under Emmet configuration.
Any tips and tricks?
- In CSS abbreviations, when you use : , the left part is used to fuzzy match with the CSS property name and the right part is used to match with CSS property value. Take full advantage of this by using abbreviations like pos:f , trf:rx , fw:b , etc.
- Explore all other Emmet features as documented in Emmet Actions.
- Don’t hesitate to create your own custom Emmet snippets.
Как установить плагин emmet в vs code?
Как установить 5.3 в code blocks?
Вышел новый gcc 5.3. Хочу заменить им 4.9.2. в Компиляторе есть много файлов и папок. Собственно.
Как установить плагин jPicker ?
Доброго времени суток, уважаемые форумчане ! Проблема следующая: хочу поставить на свой сайт.
Как установить OpenGL в Code::Blocks 10.05
Дайте, пожалуйста, подробное описание установки OpenGL в Code::Blocks. :help: Добавлено через 18.
Как установить Regex в Code::Block
Подскажите как проверить установлена ли библиотека Regex в моём c::b(10.05). Если нет то как.
Повышение скорости написания кода: Emmet и его использование в VSCode
Emmet — это утилита для текстовых редакторов, которая упрощает и повышают скорость написания кода. Первоначально слово «Emmet» означало муравей — маленькое насекомое, которое может нести в 50 раз больше своего веса. Чтобы использовать Emmet, нужно скачать и установить плагин для используемого текстового редактора. Список всех плагинов доступен на официальном сайте. Если вы используете Visual Studio Code, то устанавливать плагин не нужно, он уже встроен.
Аббревиатуры
Аббревиатуры — это специальные выражения, которые преобразуются в структурированный блок кода. Во многих редакторах также создаются метки табуляции, по которым вы можете быстро перемещаться между важными местами сгенерированного кода с помощью клавиши Tab.
У Emmet нет предопределенного набора имен тегов, вы можете написать любое слово и преобразовать его в тег: div → , foo → и так далее. Преобразование происходит по нажатию клавиши. Обычно это клавиша Tab. В VSCode, чтобы выполнять преобразование по нажатию клавиши Tab, добавьте следующую настройку:
Создание базовой структуры html
Для создания базовой структуры html напишите символ ! и нажмите клавишу Tab. В результате файл заполнится следующим содержимым:
Document Операторы вложенности
Операторы вложенности используются для позиционирования элементов внутри сгенерированного дерева.
Дочерний элемент
Оператор > позволяет вкладывать один элемент в другой:
Соседний элемент
Оператор + позволяет разместить элементы рядом друг с другом на одном уровне:
Повторение
Оператор * позволяет определить, сколько раз должен выводиться элемент:
Группировка
Круглые скобки позволяют выделить в аббревиатуре отдельные поддеревья:
Вы можете вкладывать группы друг в друга и повторять их с помощью оператора умножения:
Атрибуты операторов
Вы можете указать атрибуты для выводимых элементов.
Указание класса и id
Оператор . позволяет указать класс. Оператор # предназначен для указания id:
Произвольные атрибуты
Квадратные скобки позволяют задавать элементу произвольные атрибуты:
td[title=»Hello world!» colspan=3] →
Произвольные атрибуты имеют следующие особенности:
- Для разделения атрибутов используется пробел.
- Если не указано значение атрибута, то его значением станет пустая строка с меткой для табуляции (если ваш редактор поддерживает метки табуляции).
- Можно использовать одинарные и двойные кавычки для указания значений атрибутов.
- Если значение атрибута не содержит пробелов, то его не обязательно заключать в кавычки.
Нумерация
Оператор $ позволяет создавать нумерацию. Для этого поместите данный оператор после имени элемента, имени атрибута или значения атрибута:
Оператор $ можно поместить в любом месте имени:
Вы можете использовать несколько операторов $ подряд, чтобы дополнить номер нулями:
Начальное значение и направление нумерации
Модификатор @ позволяет изменить начальное значение и направление нумерации (по возрастанию или убыванию). Чтобы изменить направление нумерации, добавьте модификатор @- после оператора $ :
Чтобы изменить начальное значение счетчика, добавьте модификатор @N к оператору $ :
Вы можете изменить начальное значение счетчика и направление нумерации одновременно:
Добавление текста
Фигурные скобки позволяют добавить текст в элемент:
Неявные имена тегов
Во многих случаях можно не писать имя тега. Например, вместо div.content вы можете написать .content , что преобразуется в . Emmet смотрит на родительский тег каждый раз, когда вы расширяете аббревиатуру без имени тега. Если родительcкий элемент является блочным, то будет выбрать тег div , в противном случае — span . При этом есть несколько исключений:
- li для ul и ol .
- tr для table , tbody , thead и tfoot .
- td для tr .
- option для select и optgroup .
Генератор «Lorem Ipsum»
Аббревиатуры «lorem» и «lipsum» генерируют случайный текст. Каждый раз, когда вы выполняете преобразование данных аббревиатур, генерируется текст из 30 слов, разбитый на несколько предложений.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et hic incidunt repellat, quos veritatis a tenetur deserunt accusantium ab ad adipisci ex rerum distinctio corrupti omnis asperiores, numquam exercitationem sapiente.Вы можете указать количество генерируемых слов. Например, lorem10 сгенерирует текст из 10 слов. Также, вы можете использовать оператор повторения * , чтобы создать несколько элементов со случайным текстом:
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, temporibus.
- Earum totam eius repudiandae sit optio, consectetur ipsum officiis enim?
- Ex, molestias. Minima ducimus quaerat et earum commodi natus autem?
Добавление аббревиатур и фрагментов
Некоторые аббревиатуры преобразуются в элементы с предустановленными атрибутами. Список таких аббревиатур для различных языков вы можете посмотреть в официальном репозитории в каталоге snippets. Например, аббревиатуры для html находятся в файле html.json.
Способ добавления аббревиатур вы можете узнать в документации плагина, который используете в текстовом редакторе. Если используется Visual Studio Code, то вам нужно создать файл snippets.json . Таких файлов может быть несколько, например, один с глобальными настройками, а другой с локальными на уровне проекта. Затем, в файле настроек VSCode, добавьте параметр emmet.extensionsPath , содержащий массив путей к каталогам, содержащим файл snippets.json . Рассмотрим на примере: создайте каталог .vscode в текущем проекте. В каталоге .vscode создайте файлы settings.json и snippets.json . Вот как это сделать через терминал:
- mkdir .vscode && cd .vscode
- touch settings.json && touch snippets.json
В файл settings.json добавьте следующую настройку:
В файле snippets.json для каждого языка записываются его псевдонимы и фрагменты. На данный момент в VSCode используется Emmet 2.0. В данной версии аббревиатуры и фрагменты задаются через один параметр snippets . Создадим несколько аббревиатур для html и css :
< "html": < "snippets": < "abbr1": "ul>li*3", "abbr2": "ol>li*3" > >, "css": < "snippets": < "clw": "color: white", "clb": "color: black" >> >Подробности создания аббревиатур и фрагментов в VSCode можно найти в официальной документации.
Emmet — Основы современной верстки
Если вы работаете с редактором Visual Studio Code, то плагин Emmet уже установлен в редакторе. В прошлом уроке вы также могли увидеть его работу при создании базовой структуры HTML-документа. Если вы пользуетесь другим редактором, то можете установить Emmet с помощью любой доступной инструкции. Этот плагин настолько популярен, что при желании, наверное, можно найти инструкцию по его установке на кофемолку.
Что же такое Emmet и зачем он нужен? Попробуем разметить воображаемую карточку товара интернет-магазина. Что нам может понадобиться? Обрамляющий блок, название товара, его картинка, блок с ценой, кнопка «Заказать». Вроде не так много. Добавим карточку и расположим ее внутри секции с классом cards . Попробуем это преобразовать в HTML. Мы получим примерно следующую структуру:
class="cards"> class="card"> class="card-title">Название товара src="/images/card-item-1.png" alt="Товар-1"> class="card-price"> class="price-sum">24 000 class="price-cur">руб. Заказать Не самая сложная разметка, при этом в ней достаточно много разных элементов. Попробуйте повторить эту разметку сами, и вы увидите, что это отнимает достаточно много времени, хотя мы заранее знали, какие элементы будут нужны, и представляли это в голове. В итоге получается, что вместо верстки других элементов мы просто вводили корректные символы и старались следить за тем, что все блочные элементы будут закрыты.
На самом деле этот пример был сверcтан всего одной строкой. Изначально она вас может напугать, но к концу урока вы поймете каждый символ, который в ней есть. Строка выглядит следующим образом:
Вот здесь и вступает в игру плагин Emmet. Он берет эту строку и преобразует ее в HTML, который вы видели выше. Чтобы плагин преобразовал строку в HTML, можно пойти одним из двух путей:
- В самом конце набора строки Visual Studio Code сам вам предложит ее преобразовать. Вам нужно только нажать Enter, когда на экране есть всплывающая подсказка.
- Выделить всю строку и нажать комбинацию клавиш Ctrl + Shift + P . В всплывающем окне начать набирать >Emmet: Expand Abbreviation и выбрать этот пункт.
189 символов против 335. Серьезный результат. И это различие будет только расти по мере того, насколько большую верстку вы хотите сделать. Вполне нормально, если полтысячи символов, с помощью Emmet, создадут вам структуру целой страницы. Emmet — мощный инструмент, который позволяет ускорить разметку HTML-кода. Плагин позволяет снять бóльшую часть рутинных действий, от которых хочется спать. Пройдемся с самого начала строки и разберем все, что здесь происходит:
- section.cards — очень похоже на CSS-селектор, и именно так и стоит на него смотреть. Мы хотим создать элемент с классом cards .
- > — символ, как и в CSS, указывает на вложенность. В текущем значении запись section.cards> означает, что все, что указано далее, будет располагаться внутри секции с классом cards .
- article.card — создаем элемент с классом card .
- div.card-title — создаем блочный элемент с классом card-title . Здесь есть хитрость: чтобы создать элемент , не обязательно его указывать напрямую. Если не указан тег перед классом, то Emmet по умолчанию создаст элемент . То есть вместо div.card-title можно было указать .card-title .
- — в фигурных скобках указывается простой текст, который будет помещен внутрь блока.
- + — символ сложения означает, что правую часть необходимо расположить рядом с левой, а не внутри нее, как в случае с символом > . Мы хотим расположить картинку рядом с блоком card-title , а не внутри.
- img[src=»https://ru.hexlet.io/images/card-item-1.png»][alt=»Товар-1″] — создаем элемент
. В квадратных скобках указываются атрибуты, которые мы хотим добавить. В данном случае это атрибут src , значением которого является путь до изображения, а второй атрибут alt отвечает за мета-информацию о нашей картинке. Атрибуты можно записывать как по отдельности, так и вместе. Если мы укажем вот такую запись img[src=»https://ru.hexlet.io/images/card-item-1.png» alt=»Товар-1″] , то результат останется тем же.
- () — скобки позволяют группировать информацию. В данном случае мы хотим, чтобы все, что внутри скобок, располагалось рядом с картинкой, созданной в прошлом пункте.
Все, что происходит дальше, вы уже знаете благодаря предыдущим пунктам. Как видите, Emmet достаточно интересный инструмент. И не настолько сложный, как может показаться с самого начала. Вот еще несколько примеров разных строк и результатов преобразования с помощью Emmet:
class="logo">