Почему не работает emmet в vs code

Configure Emmet for JSX in VSCode

I use CSS like this:

I don’t see any reference to class or className in emmet’s config file.

Also looked into preferences.json and didn’t find a solution.

It seems very simple to do.

What am I missing here?

My code editor is vscode.

2 Answers 2

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

For the current vs code new version, you’ll see a menu called Included Languages. similar to this:

After enter javascript in the item box and after type javascriptreact in the value field and finally press Add item. Your final output must look like the image below:

Emment configuration or enabling is editor specific. In VSCode, You need to enable it for current work space. Follow theses steps. (If you are busy, follow bold letters.)

You’ll see following content by default (my version is 1.35.0) for the new version please see Kevin’s comment

Change the content to below

Currently, obtaining instead of «myClass» is a pending feature request. But you can go to to /resources/app/extensions/emmet and apply the patch. (using npm i )

Не работает emmet в Visual Studio Code

Хочу настроить Visual Studio Code для Web`a, но понял что у меня не работает плагин emmet. Перепробовал множество вариантов с Интернета, но мне ничего не помогло.

3 ответа 3

а ничего так у Вас одновременно

file.association помог мне

В setting > emmet > найти » Trigger Expansion On Tab» > поставь галочку

Всё ещё ищете ответ? Посмотрите другие вопросы с метками json visual-studio-code или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Проблема с Emmet. #154618

Comments

vynnykpff commented Jul 9, 2022

В файле с расширением html, когда нажимаешь символ «!», Emmet не подтягивает быструю команду для создания разметки html5

VS Code version: Code 1.69.0 (92d25e3, 2022-07-07T05:28:36.503Z)
OS version: Windows_NT x64 10.0.19044
Restricted Mode: No

The text was updated successfully, but these errors were encountered:

VSCodeTriageBot commented Jul 9, 2022

Спасибо за создание этого выпуска!

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

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

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

Thanks for creating this issue!

Unfortunately, as the description is not in English, it’s hard for us to work on. If possible, please edit the original issue to be in English.

In our experience, automatic translation services are not able to handle the technical language needed to effectively communicate about software issues, so we recommend finding a human translator who is familiar with our technology to help.

Otherwise, we have marked this as needing translation and a community member may be able to help out.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Как настроить emmet в vscode, чтобы работало создание быстрой структуры?

Доброго времени суток!
Не работает создание следующей структуры:

Т.е. при клике на tab список не создается. Подскажите, что делаю не так? Может нужны спец настройки?

PS:
При применении ul.section__list>li.section__item список создается

Простой 6 комментариев

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

Если нажать Tab, то добавляется просто отступ. Хотя в команде Emmet: расшифровать аббревиатуру стоит Tab

Можете ещё попробовать вместо этого нажимать ctrl+пробел

Эммет иногда подглючивает.
Нужно убедиться что в настройках vscode в Emmet стоит галочка «разворачивать аббревиатуры по Tab»

Можно попробовать развернуть с помощью:
F1 и в открывшемся окне ввести: Emmet: расшифровать аббревиатуру

Или с помощью:
ctrl+пробел, и там должно всплыть окошко автокомплита, один из вариантов которого должен быть эммет с функцией развернуть аббревиатуру

Emmet is not working with nunjucks files #7

Comments

jitendravyas commented Sep 30, 2016

No description provided.

The text was updated successfully, but these errors were encountered:

ronnidc commented Sep 30, 2016

No generally there are issues with intellisense
issue#3

jitendravyas commented Sep 30, 2016

I wanted to say that Emmet is working with nunjucks files

chenyuncai commented Aug 29, 2017 •

VSC update the emmet to v2.0. U can check it in

it works fine now

afalchi82 commented Mar 20, 2018

Hi, not working for me. Have I got to install something to make it work?

wangguohao commented Apr 8, 2018 •

rbfonbuena commented Sep 26, 2018

will this work regardless of file extension? i.e. *.njk

emmiep commented Oct 30, 2018

will this work regardless of file extension? i.e. *.njk

It seems to me that the value html refers to the language emmet will autocomplete (HTML as opposed to CSS), not the extension of the file itself.

jonta94dev commented Nov 22, 2018

It worked for me, thank you!

ZJL-CFPL commented May 21, 2019

// settings.json
«emmet.includeLanguages»: <
«nunjucks»: «html»
>

It worked for me,thanks

ChristianBetts commented May 23, 2019

Any tips on getting this to work in Atom?

MrLechu commented Jun 3, 2019

haikyuu commented Jul 23, 2020

Tip: open the command palette CMD+P and search for Emmet expand to see the associated keys

perhenrikgithub commented Sep 9, 2021 •

I tried both «nunjucks»: «html» and «njk»: «html» and neither worked.

But in in the bottom right corner of vs code (blue menu) there is an option change ‘language mode’ from «plain text» to «HTML» this seemed to do the trick.

(you could also do this in the normal setting (not the actual JSON file) if you search for «emmet»)

hybridx commented Oct 11, 2021

If you are using UI just add it in the list or if you are using json #7 (comment) would be useful

murtuzaalisurti commented Feb 18, 2022

I tried both «nunjucks»: «html» and «njk»: «html» and neither worked.

But in in the bottom right corner of vs code (blue menu) there is an option change ‘language mode’ from «plain text» to «HTML» this seemed to do the trick.

(you could also do this in the normal setting (not the actual JSON file) if you search for «emmet»)

Thanks! This worked for me!!

deiondsouza commented Apr 29, 2022

Thank you lad! Worked like a champ!

Footer

© 2022 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Как плагин Emmet помогает ускорить работу с программным кодом

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

Что такое Emmet

Emmet — ранее известный как Zen Coding — набор плагинов для текстовых редакторов, которые помогают ускорить написание кода HTML и CSS. Проект начал Вадим Макеев в 2008 году, а с 2009 года и по настоящее время его активно разрабатывает Сергей Чикуёнок и сообщество пользователей Zen Coding.

Писать HTML-код и вводить множество тегов, кавычек и скобок — долго и утомительно. С плагином Emmet эта работа становится гораздо проще — он преобразует простые аббревиатуры в полноценные блоки кода. То есть, вместо того, чтобы набирать руками HTML- и CSS-код полностью, прописываете сокращенные аббревиатуры, нажимаете TAB и код целиком разворачивается.

Работа Emmet похожа на функцию автозамены — того самого Т9 в смартфоне — только более функциональную, за счет использования специального синтаксиса для сокращений. Просто вводите сокращение, псевдоним или несколько первых символов названия тега или свойства, нажимаете TAB и Emmet самостоятельно дописывает остальное.

В статье покажем основные фишки и аббревиатуры этого плагина, которые чаще всего использую при написании программного кода. Материал будет полезен разработчикам, которые пишут много кода, но пока не используют в работе Emmet.

Как установить Emmet

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

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

Создаем «скелет» HTML-документа в два клика

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

Набрали знак «!» и нажали TAB — получили «скелет» для стартовой страницы. Подсвеченные значения можно менять под задачи своего проекта.

Синтаксис сокращений

В этом и есть принцип работы Emmet — пишем простые сокращения, нажимаем TAB и они разворачиваются в сложные фрагменты кода. Покажем на примере тега div: чтобы его развернуть, пишем div, нажимаем TAB и разворачивается тег

Можно использовать имена элементов, такие как div для создания HTML-тегов.

У Emmet нет предопределенного набора имен тегов, можно написать любое слово и преобразовать его в тег, например test :

Простые сокращения разворачиваются в сложные фрагменты кода. Любое слово можно преобразовать в тег.

Операторы вложенности

Задать положение элементов внутри генерируемого дерева — должны ли они быть внутри или рядом с элементом контекста — помогают операторы вложенности. Их четыре: «дочерние элементы», «соседние элементы», «группировка» и «поместить выше».

Дочерние элементы

Для вложения элементов друг в друга используют дочерние элементы, которые обозначают оператором «>» — знак «больше». Для примера, возьмем такое сокращение: div>ul>li, то есть — div, в который вложен список ul и элементы списка li. Нажимаем TAB и разворачиваем большой кусок кода.

Используется оператор > для вложения элементов друг в друга:

Оператор «>» используют для обозначения вложенности элементов друг в друга. Пишем в несколько раз меньше текста и получаем полноценный кусок кода.

Соседние элементы

Элементы, которые находятся друг под другом называют соседними и обозначают оператором «+» — знак «плюс». Допустим, требуется написать типовой макет страницы, где есть:

header — «шапка» сайта;

main — основной контент;

sidebar — боковая панель сайта;

footer — «подвал» сайта.

Пишем: header+main+sidebar+footer, нажимаем TAB и получаем каждый тег друг под другом.

Для размещения элементов рядом друг с другом, на одном уровне, используется оператор + :

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

Группировка

С помощью круглых скобок «()» можем группировать элементы с разным уровнем вложенности. Допустим, хотим создать страницу с header и footer, а между ними поместить основной контент и боковую панель сайта с соседними операторами вложенности. Тогда прописываем: header+(div>main+aside)+footer — и разворачиваем полноценный кусок кода.

Для группировки элементов используются круглые скобки

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

Поместить выше

Этот оператор обозначается знаком «^» — «карет» и помещает тег не выше над элементом, а выше в дереве кода, выводит этот тег из вложенности. На примере: у нас есть тег div, в него вложен main и sidebar. По идее, footer будет на одном уровне с ними, но с помощью оператора «поместить выше» он не будет обернут в div, а выйдет за его пределы и встанет ниже.

Позволяет подняться на один уровень вверх по дереву.

Оператор «^» — поднимает элемент в дереве кода, выводит его из вложенности. Элемент footer выходит из «обертки» тега div и встает выше в дереве кода.

Другой пример: есть div, в него вложен ul и li, а «карет» поднимает p на один уровень — выше ul, но внутри div.

Оператор «^» поднял p на один уровень — выше ul, но внутри div.

Этот оператор можно комбинировать — ставить столько раз, сколько требуется. И каждый раз элемент кода будет подниматься выше по дереву. Допустим, если в том же примере поставить два «карета», то p встанет на одном уровне с div.

Два «^» поднимают p на один уровень с div.

По правде говоря, мы не используем в работе с кодом операторы «группировка» и «поднять вверх» и даже не видим для себя вариантов их применения — они слишком сложные в понимании и использовании. Будет проще и быстрее прописать несколько раз понемногу — ввести название тега, нажать TAB — и он развернётся, а внутри этого куска кода написать еще сколько нужно тегов. Но возможно кто-то найдет применение этим операторам в своих проектах.

Умножение

Более функциональный оператор — «умножение», который обозначается звездочкой «*». Он помогает задать, сколько раз должен выводиться элемент. Например, если нужно развернуть список ul и сделать в нем несколько элементов li — прописываем оператор «умножение», указываем сколько штук нам надо и Emmet автоматически прописывает нам этот код. Будет столько элементов li, сколько указали.

С помощью оператора можно задать, сколько раз должен выводиться элемент:

Оператор «*» разворачивает код и прописывает три элемента li.

Комбинирование

Можно комбинировать разных операторов — использовать одновременно вложенные и соседние элементы. Допустим, нужно обернуть разметку страницы из предыдущего примера в какой-то wrapper, который будет ограничивать ширину экрана. Тогда добавляем div и вкладываем в него элементы из предыдущего примера: div>header+main+sidebar+footer. Жмем TAB и получаем разметку с разными операторами.

Emmet помогает комбинировать вложенные и соседние элементы.

Операторы атрибутов

Быстро добавить к сгенерированному элементу атрибут помогут специальные операторы:

настраиваемые атрибуты — [attr];

ID и Class

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

Синтаксис Emmet для описания элементов похож на CSS-селекторы

Пишем тег div, через точку прописываем class wrapper, и Emmet разворачивает тег с соответствующим классом.

Можно писать несколько классов подряд через точку, чтобы сделать нужное количество классов. Также можно комбинировать id и class.

Пишем и id, и class — разворачиваем тег с обоими атрибутами.

Перед class и id не обязательно ставить тег. Если напишем операторы атрибутов без тега — он по-умолчанию развернет тег div.

Не обязательно указывать тэг

Пишем id и class без тега — Emmet по-умолчанию развернет тег div.

Emmet — умный плагин. Посмотрим, что будет, если вложить элемент из предыдущего примера в строчный элемент span. Поначалу кажется, что как и в предыдущем примере должен развернуться тег div, но Emmet понимает контекст и развернет его в span. Плагин понимает даже больше — если бы вместо span был, к примеру, ul, то «ребенок» был бы li.

Emmet понимает контекст и разворачивает кусок кода с тегом span.

Настраиваемые атрибуты

Если хотим добавить какие-то настраиваемые атрибуты к элементу, используем оператор [attr] — как в CSS. Например, чтобы указать тип кнопки disabled — «неактивна» — пишем в квадратных скобках эти атрибуты и Emmet развернет аббревиатуры в нужный код.

Можно использовать [attr] нотацию (как в CSS) для добавления настраиваемых атрибутов к элементу:

Пишем в квадратных скобках нужные атрибуты и плагин разворачивает их в код.

Нумерация позиций

В примере про умножение показывали, как с помощью знака «*» развернуть несколько элементов. Теперь посмотрим, как каждый класс обозначить цифрой — к примеру, от одного до трех. Для этого пишем знак доллара «$».

Чтобы сделать нумерацию списка в обратную сторону, используем модификатор собаки — «@» с минусом «-».

С помощью модификатора @ можно изменить направление нумерации или изметить началное значение нумерации.

Модификатор «@» с минусом «-» изменил направление нумерации в обратную сторону — от трех до одного.

Также с помощью оператора собаки «@» можно указать, чтобы нумерация начиналась не с единицы, а с какой-то другой цифры. Тогда пишем «$», «@» и цифру, с которой хотим начать нумерацию — например, «тройку». Так, нумерация будет идти в последовательности: 3-4-5 и так далее. Поставим перед «тройкой» минус и нумерация пойдет в обратной последовательности с той цифры, которую мы указали: 3-2-1.

Добавляем текст

Фигурные скобки «<>» помогут добавить в код нужный нам текст. Для этого пишем тег, добавляем фигурные скобки и внутри скобок прописываем свой текст. Нажимаем TAB и получаем текст, который «обернут» в указанный перед фигурными скобками тег.

Для добавления текста к элементу можно использовать фигурные скобки <>

Текст внутри фигурных скобок Emmet разворачивает в текст, «обернутый» в указанный перед скобками тег.

«Рыба» текста — Lorem Ipsum

Разработчикам часто бывает нужно проверить верстку на переполнение или использовать рандомный текст для каких-то других задач. Часто для этого используют специальные сервисы, которые генерируют подобные тексты. Но Emmet помогает не отвлекаться на переключение между вкладками браузера и сделать «рыбу» текста с помощью ввода простой аббревиатуры: lorem. В переводе с греческого, Lorem Ipsum означает «все буквы».

Когда нужно заполнить какой-то элемент кода текстом — пишем сокращение lorem, нажимаем TAB и Emmet разворачивает его в текст из 30 слов.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ducimus expedita quia quo ratione sapiente sed. Ad aut consequatur dolorum ea eius esse ex laborum molestiae quaerat, reiciendis repudiandae vitae.

Пишем lorem, нажимаем TAB и получаем текст из 30 слов.

Если требуется сгенерировать текст определенной длины — после слова lorem пишем цифру, которая обозначает нужное количество слов. Аббревиатура развернется в текст заданного размера. Например, чтобы получить текст из десяти слов — пишем lorem10.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, modi?

Добавляем после аббревиатуры lorem цифру «10» и получаем текст из десяти слов.

Сокращения

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

У Emmet нет предопределенного набора имен тегов, можно написать любое слово и преобразовать его в тег, например test :

Любой текст Emmet может преобразовать в тег.

Правда, несколько элементов, для которых уже предопределенно, как они будут разворачиваться — например, изображение. Если напишем img и нажмём TAB — получим кусок кода с уже встроенными элементами, которые можем заполнить под свои задачи.

Аббревиатуру img Emmet разворачивает в код со встроенными элементами, которые можем заполнять.

Псевдонимы

Названия некоторых тегов очень длинные. Сократить их написание помогают псевдонимы названий тегов. Например, чтобы не писать длинное слово blockquote, используем псевдоним bq, который разворачивается в полноценный тег.

Псевдонимы названий тегов

Псевдонимы помогают сократить время на написание длинных имен тегов.

Пишем свои псевдонимы и сокращения

Такие сокращения можно задавать самостоятельно. Допустим, мы не хотим писать слово section полностью, а хотим, чтобы это было сокращение вида sc. Но в Emmet изначально этого не прописано, поэтому если без настроек просто напишем sc и нажмем TAB — развернется код, который нам не подходит.

Если без предварительных настроек написать сокращение — получим совсем не тот результат.

Разберем, как задать нужное сокращение на примере редакторов VC Code и WebStorm.

Настройки для VS Code

В любом месте у себя на компьютере создайте файл snippets.json;

Перейдите в настройки VS Code: File > Preferences > Settings — или просто нажмите «Ctrl+,»;

В поиске вбейте текст «Emmet Extensions Path», чтобы открылась вкладка Settings;

Во вкладке как на рисунке ниже впишите в Settings Item путь к файлу snippets.json, который создали ранее и нажмите OK;

5. Зайдите в файл snippets.json и напишите соответствующий код: для HTML, и новый snippet. В качестве ключа укажите сокращение, которое хотите добавить в Emmet — например, sc. А в качестве значения — то, что должны получить — в нашем случае это section.

Пример кода, который нужно прописать в файле snippets.json, чтобы задать свое сокращение в VS Code для работы с Emmet.

Разворачиваем конструкции любой сложности

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

Настройки для WebStorm

Зайдите в настройки WebStorm: File > Settings (или просто нажмите Ctrl+Alt+S) > Editor > Live Templates;

В окне настроек задайте параметры своего сокращения: в аббревиатуры впишите значение, в Template Text — то, что хотите получить на выходе и сохраните изменения;

3. Теперь, когда в WebStorm напишете сокращение и нажмете TAB — развернется тег или кусок кода, который заложили в это сокращение.

После настроек в WebStorm, Emmet разворачивает сокращения в заданные теги или куски кода.

Работаем с BEM

Классическая конструкция: блок, в который вложен какой-то элемент с определенным модификатором.

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

На скрине ниже два варианта написания: первый — для WebStorm, а второй — для VS Code. Разработчики вносят в Emmet свои правила и немного модифицируют его, поэтому в разных визуальных редакторах плагин работает по-своему.

.block>.__el—mod — вариант записи для WebStorm

.block>.-el_mod — вариант записи для VS Code

Поддержка BEM помогает с помощью Emmet работать с кодом еще быстрее.

Настраиваем BEM в VS Code

Зайдите в настройки: File > Preferences > Settings — или просто нажмите «Ctrl+,»;

Найдите в поиске syntaxProfiles;

В открывшемся окне перейдите в настройки JSON. Здесь хранятся вообще все настройки VS Code;

4. Впишите в настройках JSON соответствующий код: укажите, что в HTML поддерживаем BEM, пропишите, как хотите, чтобы отображался элемент и как хотите, чтобы отображался модификатор. Например, если по BEM «Яндекса» модификатор отображается одним нижним подчеркиванием, а мы привыкли к двойному тире — это можно поменять как будет удобно.

Настраиваем BEM в WebStorm

1. Перейдите в настройки WebStorm: File > Settings (или просто нажмите Ctrl+Alt+S) > Editor > Emmet > HTML;

2. В окне настроек укажите, что будет разделителем для элемента и модификатора и сокращение для элемента. Например, можем задать такие настройки, чтобы при вводе знака тире «-» срабатывала замена на два нижних подчеркивания «__».

Работаем в CSS

Emmet поддерживается также в CSS, поэтому когда пишем сокращения в CSS и нажимаем TAB — плагин разворачивает аббревиатуру в кусок кода. Например, если пишем fz и нажимаем TAB, Emmet развернет его в front-size.

Где посмотреть все сокращения Emmet

Все сокращения можно посмотреть в Шпаргалке на сайте Emmet — их тут очень много. Аббревиатуры, которые часто используете, быстро запомните, потому что это постоянно нужно в работе и будете «на автомате» их применять. А то, что редко используете — скорее всего вам и не нужно запоминать, ведь проще набрать руками, без использования Emmet.

На официальном сайте плагина Emmet.io можно посмотреть все сокращения.

Где потренироваться использовать Emmet

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

Чтобы изучить Emmet, потребуется время, но ничего сложного нет — там достаточно простые правила и привычный синтаксис. Зато когда начнете применять это дополнение при написании кода — потраченное на освоение плагина время окупится стократ. Сбережете действительно много времени и нервов, а верстка станет намного эффективнее.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Comments

flexcodenet commented Oct 1, 2019

Hello,
Why i can’t use command emmet «@f+» in scss files? Only «@f» work.

VS Code version: Code 1.38.1 (b37e54c, 2019-09-11T13:35:15.005Z)
OS version: Windows_NT x64 10.0.18362

System Info

The text was updated successfully, but these errors were encountered:

vscodebot bot commented Oct 1, 2019

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

flexcodenet commented Oct 1, 2019

But my emmet work, but not all function.

octref commented Oct 1, 2019

flexcodenet commented Oct 1, 2019

So emmet function’s doesn’t work 100% in vsc?

octref commented Oct 1, 2019

vsc uses emmet upstream library and + is deprecated & removed upstream.

Footer

© 2022 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

В Emmet Sublime Text 3 перестали работать сочетания клавиш, как исправить?

Добавь в настройки сочетаний клавиш сублайма

ссылка на др команды

[
<
«keys»: [«ctrl+e»],
«command»: «emmet_expand_abbreviation»
>,

<
«keys»: [«ctrl+.»],
«command»: «emmet_enter_abbreviation»
>,

<
«keys»: [«ctrl+alt+j»],
«command»: «emmet_go_to_tag_pair»
>,

<
«keys»: [«shift+ctrl+;»],
«command»: «emmet_remove_tag»
>,

<
«keys»: [«shift+ctrl+`»],
«command»: «emmet_split_join_tag»
>,

<
«keys»: [«ctrl+alt+right»],
«command»: «emmet_go_to_edit_point»
>,

<
«keys»: [«shift+ctrl+.»],
«command»: «emmet_select_item»
>,

<
«keys»: [«shift+ctrl+y»],
«command»: «emmet_evaluate_math»
>,

<
«keys»: [«ctrl+u»],
«command»: «emmet_update_image_size»
>,

<
«keys»: [«ctrl+'»],
«command»: «emmet_convert_data_url»
>,

<
«keys»: [«shift+ctrl+'»],
«command»: «emmet_rename_tag»
>,
]

Emmet JS snippets in VS Code

Has anyone ever succeeded in getting Emmet JS snippets to work in VS Code or even in Sublime?

These are my settings:

This is my snippets.json:

I also tried js and javascriptreact in the snippets definition for the language with no luck.

3 Answers 3

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

No need to add JS snippets in Emmet: the new concept of Emmet 2.0 (already available in VS Code; v2.0 in beta and not publicly released yet) works as autocomplete provider so you can simply use native VS Code snippets instead

So I will put an example here for the built-in VS Code snippets, which are still not my favorite.

I am still keen on having it working with Emmet using the same key binding if anyone knows.

Ускоряем вёрстку, используя Emmet. Руководство по командам и возможностям

Оказывается, можно верстать много, а печатать мало!

Катя Павловская для Skillbox Media

Emmet — бесплатный плагин для текстовых редакторов, который напоминает автоподстановку текста в смартфоне, но более функциональную. Скачать его можно по ссылке, выбрав нужную вам IDE или редактор кода. На сайте есть инструкции по установке (разделы Installation или How to install).

Emmet использует специальный синтаксис для сокращений: вы вводите несколько символов — начало названия тега или свойства, а программа предлагает самостоятельно дописать остальное, выбрав из выпадающего списка. Остаётся нажать Tab или Enter, и нужный вам код написан целиком.

Чтобы использовать Emmet, его нужно сначала освоить — это потребует немного усилий. Зато потом плагин сэкономит вам кучу времени и нервов, сделает вёрстку намного эффективнее. Так что давайте учиться!

Содержание

Установка

Emmet — это не отдельная программа, а дополнение, которое устанавливается в ваш редактор кода. Слушателям курса по веб-вёрстке мы рекомендуем использовать VSCode. В него Emmet уже встроен, и ничего не нужно делать дополнительно — просто бери и пользуйся.

По умолчанию дополнение включено для разных типов файлов. В статье мы рассмотрим только HTML и CSS. О том, как быть с другими типами, можно узнать в документации по VS Code.

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

Emmet на практике: пишем HTML

Теперь разберём, как использовать Emmet в ваших рабочих проектах.

Первое, что мы обычно делаем при создании HTML-разметки, — пишем базовую структуру, где объявляем тип документа, указываем язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.

Создаём шапку документа в два клика

Подключаем стили и скрипты

После создания шапки документа мы размещаем теги внутри — с указанием путей к стилям или скриптам. Используя Emmet, можно просто написать « link», а автоподстановка предложит не только тег целиком, но и разные варианты: там есть стили и CSS, и установка favicon, и многое другое.

Добавляем ссылки

Благодаря Emmet добавлять ссылки стало легко и приятно.

Пишем « a» и выбираем нужный вариант — простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можем уточнить тип, добавив после двоеточия нужное значение атрибута. Например, « a:tel».

Вводим теги

Для того чтобы добавить тег, пишем его название и нажимаем Tab или Enter.

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

Задаём классы и идентификаторы

Примечание. Если нужно задать класс или id для тега

Используем группировку и вложенность

До этого мы разбирали самые простые возможности Emmet. Дальше начинается настоящая магия.

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

По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Рассмотрим на примерах, как их можно расположить и сгруппировать.

Пример 1. Соседние элементы

Знак « +» позволяет создать несколько соседних тегов — то есть расположенных на одном уровне.

Знак « *» повторяет элементы указанное количество раз.

Пример 2. Дочерние элементы

Символ « >» делает следующий за ним элемент дочерним по отношению к первому (вложенным, обёрнутым в первый). При этом Emmet не забывает о закрывающих тегах и отступах при форматировании. Ваш код сразу же структурирован и отформатирован.

Пример 3. Сгруппированные элементы

Если при вводе сокращений использовать круглые скобки, то можно сгруппировать элементы с разными уровнями вложенности.

Представим, что нам нужно создать структуру простой страницы, состоящей из хедера, основной части и футера. При этом внутри хедера будет навигационная панель, реализованная в разметке как ненумерованный список. А блоки main и footer будут на одном уровне с header. Для этого header и его содержимое нужно взять в круглые скобки.

Всё это мы записали одной строкой, а на выходе получили девять!

Генерируем рыбу-текст

Простая, но полезная вещь. Например, для проверки вёрстки на переполнение.

Оформление стилей страницы. Работа с CSS

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

Способы ввода сокращений

Все сокращения в CSS — это укороченные названия свойств. Здесь гораздо меньше правил, но при этом всё так же интуитивно понятно: набираем первую букву — появляется подстановка всего слова. А если свойство пишется через дефис, то набираем первые буквы каждого слова (слитно либо через дефис) и Emmet даёт подсказку.

Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них — дело нескольких секунд. Для color будет достаточно « c».

Сочетание « fs» предложит нам font-style, а « fz» — font-size. Со временем у вас выработается стратегия и появится собственный словарь сокращений.

Ещё одна особенность автоподстановки в CSS: если вы используете часто повторяющуюся пару «свойство — значение», то Emmet предложит его в первую очередь. Если во время вёрстки вы несколько раз указали display: flex, то в следующий раз при нажатии « d» этот вариант будет первым в списке. Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные в файле стилей цвета, если они были заданы.

Направления полей и отступов

Свойства margin и padding набираются, соответственно, « m» и « p», а чтобы указать направление отступов, достаточно добавить t, b, l и r — top, bottom, left и right соответственно.

Уточнения свойств через двоеточие

В некоторых случаях для ввода пары «свойство — значение» лучше использовать двоеточие. Это конкретизирует сокращение.

Единицы измерения

Ряд свойств CSS не требует указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов ( normal, bold, bolder и lighter) используются условные единицы от 100 до 900, для opacity — диапазон от 0 до 1, для line-height — множитель.

При написании сокращения для таких свойств достаточно добавить нужное число.

Для тех свойств, где требуется указать единицы измерения, по умолчанию используются абсолютные пиксели ( px). Если вы хотите указать значение в процентах, то используйте символ « p». Для остальных единиц измерения полностью прописывается их название.

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

Несколько значений после двоеточия

Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего это встречается при использовании полей и отступов.

И для такого случая у Emmet есть изящное решение: если единица измерения — пиксели, то пишем их через дефис (то же касается и auto). Проценты указываем, используя p. Другие единицы измерения ( em, rem, wh, wv и так далее) пишем полностью без пробелов.

Частный случай — указание цвета с прозрачностью.

Здесь всё просто: в конце сокращения ставится восклицательный знак.

Подытожим

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

Создайте для себя «словарь сокращений» Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и вы станете квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти на сайте разработчиков дополнения.

Visual Studio Code Emmet not working

I am using VisualStudioCode 1.20.1 Version. Emmet is inbuilt according to VSC website.But when i am trying on VSC IDE and using anchor tag and referring to class dropdown-toggle the class is not auto suggested or recognized by vsc.

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In your vscode user setting, add

That way you can use emmmet in your js files.

in vs code user setting add these

This following worked for me:

Open Command Palette ( Ctrl + Shift + P )

Open Settings (JSON)

Emmet does not work on js file by default. To solve that problem you have to enable emmet abbreviation in the vscode’s settings. First, open settings.json from any directory:

To be more specific, on windows, you need to go to File > Preferences > Settings > Type in «Launch» > click on «Edit in settings.json»

Now you have to declare in settings.json that you will use emmet at js files: (Its very simple just copy and paste into code setting file the code highligted)

Now just save it. Not necessary restart vscode.

For more details see that post at vscode official webite.

Опыт работы с Emmet: ускоряем вёрстку в разы

Владимир Матасов, выпускник курса Skillbox по веб-вёрстке, рассказал о своём опыте работы с плагином Emmet. Также подготовил инструкции по основным возможностям и командам для начинающих верстальщиков.

Привет, Хабр! Когда я только решил самостоятельно изучать вёрстку, то понял, что это будет долгий путь с большим количеством новой информации и практики.ну

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

В это же время я поступил на курс по веб-вёрстке. Это сэкономило время на проверку всех советов, какие я нашёл в интернете. Преподаватели дали рекомендации по инструментам, которые сами проверили, в том числе несколько плагинов для редакторов кода.

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

Установка

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

Скачать плагин можно на официальном сайте. Хорошо, если вы уже определились с IDE или редактором кода. Нажимаете на картинку нужного редактора и вас перекинет на страницу с инструкцией.

Emmet на практике: пишем HTML

Я поделюсь своим опытом, как сейчас использую Emmet при вёрстке.

Первое, с чего начинаю создание HTML-разметки, — пишу базовую структуру, где объявляю тип документа, указываю язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.

Создаём базовую структуру HTML-разметки

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

Сначала я использовал долгий вариант: набирал «html» и в выпадающем списке выбирал «html:5». Потом перешёл на более экономичный способ: набираю в редакторе «!» и нажимаю Tab, можно нажать Enter, тоже работает. Итог обеих манипуляций одинаковый: Emmet вставит скелет HTML-документа.

Подключаем стили и скрипты

Добавляем ссылки

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

Пишу «a» и выбираю нужный вариант — простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можно уточнить тип, начиная вводить после двоеточия значение атрибута. Например, «a:tel».

Вводим теги

Когда я только начинал пробовать себя в вёрстке, то печатал всё – от « », затем составлял себе шпаргалки с готовыми тегами и копировал их. Чуть далее станет понятно, почему эти способы недостаточно хороши. Сейчас, с плагином, всё просто: пишу название тега и нажимаю Tab или Enter.

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

Некоторые теги Emmet всё же не добавляет. Например, на момент написания этой статьи, не подставляется тег «figcaption». Кто знает, в чём он провинился.

Задаём классы и идентификаторы

Я показал, как вводить теги, а теперь усложним этот процесс. Часто нужно указать класс или id. Делается это сразу при вводе тега. После ввода названия тега, без пробелов, добавляю символы «.» или «#», пишу название класса или идентификатора, на выходе получаю оформленный тег.

Частный случай, когда нужно задать класс или id для тега

Если вы знакомы с css-селекторами вида section#about.red, то возможно уже обратили внимание на схожесть синтаксиса. Дальше будет интересней – Emmet практически полностью повторяет правила по которым формируются обычные селекторы. Поэтому барьеры входа при изучении Emmet ещё меньше, не надо учить новый синтаксис, используем тот, что есть в css.

Используем группировку и вложенность

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

С помощью синтаксиса Emmet легко создаю сложные конструкции разного уровня вложенности всего из одной строки символов. Это немного похоже на css-селекторы со знаками сложения и умножения.

По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Покажу на примерах, как их можно расположить и сгруппировать.

Пример 1. Соседние элементы

Знак «+» создаст несколько соседних тегов, расположенных на одном иерархическом уровне.

А если я хочу повторить элемент 3 раза? Ответ: да очень просто – добавим знак умножения, и вуаля!

Пример 2. Дочерние элементы

Символ «>» делает следующий за ним элемент дочерним по отношению к первому, вложенным, обёрнутым в первый. При этом Emmet не забывает о закрывающих тегах и отступах при форматировании, код будет структурирован и отформатирован.

Пример 3. Сгруппированные элементы

Представим, что нужно создать структуру простой страницы, состоящей из шапки, основной части и подвала. При этом внутри шапки будет навигационная панель в виде маркированного списка без нумерации. А блоки main и footer будут на одном уровне с header.

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

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

Бонусный уровень: генерируем рыбу-текст

Когда я только начинал заниматься вёрсткой, то читал много мнений: это хорошо, то плохо. Про рыбу-текст пишут разное. Но для меня это полезная вещь, например, для проверки вёрстки на переполнение.

Если нужен текст на русском языке, то вводим «loremru».

Emmet для CSS

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

Способы ввода сокращений

В работе с CSS используются сокращённые названия свойств. Здесь меньше правил, с некоторым опытом всё становится интуитивно понятным и привычным: набираем первую букву — появляется подстановка всего слова.

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

/* Введи и проверь: */.example <
ff
f-f
>

Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них — дело нескольких секунд. Для color будет достаточно «c».

Некоторые сочетания очевидные, например, «fs» предложит нам font-style, но есть и сокращения, к которым надо привыкнуть: «fz» — font-size. Мне понадобилось некоторое время, чтобы выработать стратегию и собственный словарь сокращений.

Ещё одна особенность автоподстановки в CSS: если используешь часто повторяющуюся пару «свойство — значение», то Emmet предложит его в первую очередь. Если во время вёрстки несколько раз указать display: flex, в следующий раз при нажатии «d» этот вариант будет первым в списке.
Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные цвета.

Направления полей и отступов

Отдельно скажу про свойства margin и padding, они набираются, соответственно, «m» и «p», чтобы указать направление отступов, достаточно без пробела или через дефис добавить t, b, l и r — обозначающие top, bottom, left и right. И без пробела добавляем значение отступа.

Уточнения свойств через двоеточие

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

/* Введи и проверь: */.example <
c:red
>

Единицы измерения

В этом направлении есть несколько правил. Ряд свойств CSS очень удобные в работе и не требуют указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов normal, bold, bolder и lighter можно использовать условные единицы от 100 до 900, для opacity — диапазон дробных чисел от 0 до 1, для line-height — любой множитель, чаще всего в диапазоне от 1.1 до 2.

/* Введи и проверь: */.example <
fw400
op.5
lh1.25
>

Для тех свойств, где могут быть указаны разные единицы измерения, по умолчанию используются абсолютные пиксели (px). При этом нужно указать только число.

Но если мне захотелось указать значение в процентах, тогда использую символ «p». Для остальных единиц измерения прописываю их название.

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

/* Введи и проверь: */.example <
fz15
mt45
pl20p
t.25rem
h5vh
>

Несколько значений после двоеточия

Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего встречается при использовании полей и отступов.

И для такого случая у Emmet есть изящное, на мой взгляд, решение: если единицы измерения пиксели или auto, пишем значения свойства через дефис. Проценты указываем, используя p. Другие единицы измерения (em, rem, wh, wv и так далее) пишем полностью без пробелов.

/* Введи и проверь: */.example <
m10-20
m22-55-4p
p25-55p4rem2vh
p0-a
>

Не меньше мне нравится использовать частные случаи, например, указание цвета с прозрачностью.

/* Введи и проверь: */.example <
cra
>

Подытожим

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

Создайте для себя «словарь сокращений» Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и со временем вы станете более квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти на сайте разработчиков дополнения.

На курсе «Веб-вёрстка» вы познакомитесь со стандартами Web 2.0, научитесь работать с макетами и форматировать код, освоите адаптивную вёрстку, а по итогу — сможете создавать быстрые и удобные сайты, которые точно понравятся пользователям. Посмотреть программу и записаться по ссылке.

Emmet isn’t recognised in erb #197

Comments

resting commented Aug 13, 2017

Your environment

Expected behavior

Actual behavior

No suggestions returned

Steps to reproduce the problem

see Expected behavior

The text was updated successfully, but these errors were encountered:

coisnepe commented Aug 17, 2017

Add this to your settings:

resting commented Aug 19, 2017

Works like magic

tenzin2017 commented Feb 4, 2018

You just need 2 steps to make it work: ( for VS code)

prithvi16 commented Feb 6, 2018

Neo42 commented Apr 1, 2018 •

Zhao-Andy commented Apr 9, 2018

For anyone looking to add it for html.erb files, add this:

tenzin2017 commented Apr 10, 2018

@Zhao-Andy I tried
«emmet.includeLanguages»: <
«html.erb»: «html»,
>,

but this one doesn’t work.
So I tried
«emmet.includeLanguages»: <
«erb»: «html»,
>,
this works perfectly. Thanks

valterbarros commented Apr 18, 2018

You can do this https://code.visualstudio.com/docs/languages/overview#_adding-a-file-extension-to-a-language. I need this for vscode recognize the coffe.erb extension as coffescript file

wingrunr21 commented Apr 18, 2018

Would anyone mind writing up either a README entry for this stuff for something for the wiki?

prasanthnv commented Jun 2, 2018

«emmet.includeLanguages»: <
«erb»: «html»,
>

ariefrizkyr commented Jul 10, 2018

Hope this helps.

wingrunr21 commented Jul 10, 2018 •

Do you have additional extensions installed that would register an html.erb as a syntax? This extension doesn’t register that syntax name.

aristotelesbr commented Aug 28, 2018

This is work for me!
«emmet.includeLanguages»: <"erb": "html">
tks! @coisnepe

wehdi commented Sep 19, 2018

wingrunr21 commented Sep 19, 2018

For anyone running that ERB extension, do you lose HTML highlighting and intellisense when the detected language is ERB?

flaviofl commented Feb 21, 2019

Not sure why, but for me only worked this way
«emmet.includeLanguages»:

frogandcode commented Apr 30, 2019 •

Not sure why, but for me only worked this way “emmet.includeLanguages”:

In case it helps future generations, the solution will depend on what language/format your ERB files are recognized as using. This comment (above) from @ariefrizkyr is helpful in this regard:

For me (on a Mac), the default was Ruby but changed to erb after installing the Simple Ruby ERB extension. So keep any eye on what type of file VS Code thinks you have and configure accordingly.

ghost commented Jul 12, 2019 •

Many thanks, @frogandcode. You just addressed the exact problem I was having. I had edited the config file and added «emmet.includeLanguages»: <"erb":"html">, but it wasn’t working. Then I looked at the right lower corner of the editor and I saw that the language association for html.erb was «Plain text», and erb wasn’t among the options to choose from. I installed Simple Ruby ERB and changed the language association to erb and now Emmet Abbreviation works perfectly in my html.erb files 🙂

thecodepixi commented Dec 18, 2019

Not sure why, but for me only worked this way
«emmet.includeLanguages»:

I tried all of the options presented elsewhere in this thread, and this was what worked for me on Mac, running VS Code v 1.41.0 on a Mac running OS Catalina v 10.15.1

✨ How to create Custom Emmet Snippets in VS Code!

👋 Hi again developers!

This post covers how you can use Custom Emmet Snippets in VS Code. With VS Code’s new release: version 1.51!

Emmet is very powerful and very productive! And the mix of Emmet & VS Code, is like never before. But sometimes you might want to generate an element that uses a long emmet snippet. VS Code version 1.51 was released with this one and many more features! So let’s begin! 🏃‍♂️

1. ➕ Creating a snippets.json file

We have to store our snippets inside of a snippets.json file. Pick a folder of your choice on your machine, and open that folder in VS Code. Create a new file called snippets.json

Now fill that file as shown below. I have an example snippet for you to try

Exit fullscreen mode

You can put as many other snippets you want!

2. 🔧 Configuration

Then search for a setting called Extensions Path and click on Edit in settings.json.

Now simply copy the folder path where you have your snippets.json file created, and paste that in the «emmet.extensionsPath» setting. Like this 👇

That’s it! Once you have put the path in the setting, you are good to go and use your own Custom Emmet Snippets in VS Code!

I hope this post helped you increase your productivity. Please consider giving it a like 💙, and commenting 💬 below your experience about this feature, and sharing it!

I also have a YouTube video if you are interested in watching

Emmet Autocomplete Issues #72

Comments

ekfuhrmann commented Mar 22, 2018 •

I see that #56 added the ability for emmet shortcuts, however I’m having issues getting any of them to work.

Even the example of m10 into margin: 10px; is not actually working.

Is there an additional setting config required to get this working?

The text was updated successfully, but these errors were encountered:

Cu3PO42 commented Apr 12, 2018

This appears to work fine for me.

VSCode expands Emmet shortcuts from the auto-completion menu, so you can try to hit Ctrl+Space or Cmd+Space after the shortcut to see if an expansion is offered.

pavsidhu commented Aug 2, 2018

francoiscote commented Oct 25, 2018

This seems related to an Emmet setting. Search for Emmet in your VS Code Settings, and check the Trigger Expansion On Tab. With this option on, when I type mb10 + Tab inside a SC Template Literal, it completes it to margin-bottom: 10px;

ekfuhrmann commented Oct 25, 2018

psullivan6 commented Nov 18, 2018

I know this issue is closed, but since it showed in my search results I wanted to add that I had to write the following VSCode configuration to make the emmet autocompletion work properly:

pixelize commented Dec 5, 2018

psullivan6 commented Dec 9, 2018

@pixelize I presume you’re running into an issue with VSCode trying to parse the correct context since you have JSX mixed with styled-components CSS-in-JS (just an assumption). A useful pattern that I’ve used is to separate the styled-component declarations into a separate styles.js file and then import them via tree-shaking into the main component file. For example: import < MenuButton, Kebab >from ‘./styles.js or similar. I presume you’re leveraging the className prop from styled-components on that wrapper div, so perhaps change that to a Wrapper (or similar) styled-component and import it directly. Granted, none of the above will explicitly solve your direct issue, but is a workflow that will help separate concerns and may help with the Emmet auto-complete.

pixelize commented Dec 10, 2018

raihan004 commented May 11, 2020

How can I enable it for both html and css?

AbdallahAbis commented May 27, 2020

I think the only way is using an array, but I’m not sure.

guilhermemarconi commented Aug 6, 2020

@AbdallahAbis tried it, but VSCode returns a warn saying that this rule expect a string instead of an array.

chovole2020 commented Feb 8, 2021

Add extension ‘vscode-styled-components’
Happy coding guys.

guilhermemarconi commented Feb 18, 2021

@chovole2020 I don’t know if you’re aware but this is the respository of the vscode-styled-components extension 😂

anyway, I’ve never tried anything different then what we discussed here. have we any updates?

mikeytown19 commented Mar 25, 2021

I’m having the same issue, but this seems to work sometimes for me.

corysimmons commented Apr 2, 2021

I literally haven’t used one of my favorite plugins for years because I just thought it was broke in VSCode or JSX/styled-components. and it was like. the very first direction in the README.

I’m going to go slam my head against the wall. 🤦

guilhermemarconi commented Apr 8, 2021

mikeytown19 commented Apr 8, 2021

jasonwilliams commented Apr 8, 2021

Do you feel we should update the documentation so that other people can spot this? I have a feeling there may be others out there who will fall short of missing this fix.

I would appreciate if there’s anyone who wants to update the readme, or even suggest in this thread what should be mentioned.

guilhermemarconi commented Apr 9, 2021

@jasonwilliams actually it is already in the README, as @corysimmons told in his comment above 😊

jasonwilliams commented Apr 9, 2021

Oh I meant the readme for this project

corysimmons commented Apr 9, 2021

@jasonwilliams I added something here: #280 Feel free to word it however you want, but I think you’re right that including some minimal docs here would help people sort this out faster. (I know the only place I go to for usage instructions is around the top of a README then I just assume the project is busted)

Comments

alexkolt commented Nov 11, 2016 •

Steps to Reproduce:

mrmlnc commented Nov 11, 2016 •

I don’t fully understand your problem. You can give to community more detailed information?

I try your code example on official Emmet site and VS Code and get identical results:

alexkolt commented Nov 11, 2016 •

Sorry I didn’t preview the post. Corrected original post formatting to better describe the problem.

mrmlnc commented Nov 11, 2016 •

Well, @alexkolt, maybe this is «language barrier», but I don’t understand your problem.

Emmet by default (out-of-box, by Emmet author) creates single-line tags in one line. Try your code on official Emmet site: http://docs.emmet.io/

misterhtmlcss commented Nov 12, 2016 •

@mrmlnc I have one for you.

I add head+body>header>nav^main+footer and it doesn’t work right. See attached. Then I tried an easier one; head+body>header>nav and it only extended the last one nav with

mrmlnc commented Nov 12, 2016

@misterhtmlcss, thanks you for more detailed description, but I have bad news for you.

VS Code (as and other editors) use official Emmet package. Therefore, all editors have the same bug. You can always check it out using the official site: http://docs.emmet.io/

misterhtmlcss commented Nov 12, 2016 •

However when I drop in my code to Emmet it works perfectly. That’s the second image (whitebackground) which wasn’t clear in my first post. So if you are using Emmet and it works on their site, whose issue is this? I’m wondering if there is a common plugin we (the general populace) is using that could be interfering since this seems to be popping up regularly.

Additionally the bug if it was emmet would be consistent from Insiders to Code (General Release version) and yet it is not the case for me. I run both and one is not performing in a manner remotely consistent with the other.

I think this is worth pursuing as Emmet is a huge productivity tool for many. Let me know if there is more information I can provide, such as a complete list of my plugins, etc. I’m happy to do what is necessary to understand how this could be happening. It’s an odd one for sure.

HTML autocomplete and emmet stopped working #58253

Comments

demiro commented Sep 8, 2018 •

I am editing just a HTML file.
writing h5 and pressing TAB (before was working normallly and do it

same goes div.test, tab just moves one tab. and not converting to

hm, if I restart the vscode, it works again :/

VS Code version: Code 1.27.1 (5944e81, 2018-09-06T09:21:18.328Z)
OS version: Windows_NT x64 10.0.17134

System Info

Extensions (24)

The text was updated successfully, but these errors were encountered:

Emmet not working #127842

Comments

krishnan7-dev commented Jul 2, 2021

Does this issue occur when all extensions are disabled?: Yes/No
Yes

I have recently updated my vscode stable build to the latest version. Right after updating, I started working on my html project. But I was unable to use emmet abbreviations. I tried reinstalling vscode but the issue still persisted. It was working fine in the previous version.

Steps to Reproduce:

The text was updated successfully, but these errors were encountered:

vscodebot bot commented Jul 2, 2021

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

krishnan7-dev commented Jul 2, 2021

I wasn’t using JSX. It was normal html.

thesmartdeveloperr commented Jul 2, 2021

rzhao271 commented Jul 2, 2021

krishnan7-dev commented Jul 3, 2021

I have installed VSCode Insider version and it’s working fine. Thanks for Helping.

Footer

© 2022 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

В Sublime Text 3 не работает emmet

Структура html не появляется после нажатия ! + tab. Также не работает ul>li*5. Переустановка не помогает.

) есть какая-нибудь ругань по поводу Emmet? (После установки из PackageControl, при попытке развернуть аббревиатуру, ещё в какой-нибудь момент. )

13 ответов 13

Помогла переустановка emmet-а с последующим перезапуском Sublime Text

мне помогло удаление плагина colorPicker

Помогло переназначение хоткеев tab в emmet > KeyBindings > User.

В настройках надо отключить включить HTML-синтаксис и будет вам счастье

Помог этот способ:

Зайди в Preferences > Packagec Sittings Там удали Emmet и установи обратно. мне помогло

Внимение! Если у вас вдруг перестал работать Ememt в SublimeText, именно в HTML файле. То проблема заключается в том, что скорее всего где-то в коде у вас Emoji символы или другие Unicode символы. Как только вы их удалите, emmet сразу заработает. И не нужно ничего переключать и т.д.

Если ничего из вышеуказанного не помогает, просто снимите галочку с view > word wrap

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html sublime-text-3 emmet или задайте свой вопрос.

Связанные

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Медленная работа Emmet в sass файлах #105674

Comments

ramzs commented Aug 30, 2020

Здравствуйте
Очень медленно работает развертывание сокращений emmet в файлах sass. Буквально 1-3 секунды надо ждать пока развернется элементарное сокращение db в display: block.
В целом ничего не тормозит. Только эммет и только в файлах стилей. В sublime text 3 это занимает доли секунды практически не заметно.
Это единственный минус какой я нашел в VScode но он перекрывает все плюсы. Исправьте пожалуйста.
Спасибо

The text was updated successfully, but these errors were encountered:

vscode-triage-bot commented Aug 30, 2020

Спасибо за создание этой проблемы!

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

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

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

Thanks for creating this issue!

Unfortunately, as the description is not in English, it’s hard for us to work on. If possible, please edit the original issue to be in English.

In our experience, automatic translation services are not able to handle the technical language needed to effectively communicate about software issues, so we recommend finding a human translator who is familiar with our technology to help.

Otherwise, we have marked this as needing translation and a community member may be able to help out.