Что такое Эммет? Использование Эммета в VS Code

18 марта 2018 г. · чтение за 5 минут

Изображение для сообщения

Прежде чем мы перейдем к тому, что такое Эммет и как его использовать, позвольте мне рассказать, почему я выбираю VS code в качестве моего текстового редактора/IDE (да, вы можете назвать это IDE, поскольку он имеет почти все возможности IDE).

Почему VS-код? Что в этом особенного? Почему не какую-либо другую IDE?

Когда я начал заниматься веб-разработкой, я перепробовал множество IDE: Atom, Brackets, Sublime. Дело в том, что я продолжал переключаться. Я не говорю, что эти IDE плохие, дело в том, что я люблю их, однако мне всегда хотелось чего-то большего от моей IDE. В какой-то момент я подумал, что со мной что-то не так: P Затем я встретил код VS, и мальчик о мальчик, я никогда больше не переключался на какую-либо другую среду IDE. Код VS был особенным, в нем были все инструменты, которые мне были нужны из коробки, пусть это будет интеграция с исходным кодом, интегрированный терминал, украшение, отладка, что является большим плюсом, изменение темы не требует усилий и многое другое. И становится все лучше и лучше. Для вещей, которых нет в наличии, вы можете легко установить плагин на рынке.

В этой статье мы узнаем, как мы можем использовать VS-код для повышения производительности.

Если вы зайдете на их сайт, определите

«Emmet — это плагин для многих популярных текстовых редакторов, который значительно улучшает рабочий процесс HTML и CSS:»

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

Совет: при наборе текста аббревиатуры Эммета, вы можете нажать Ctrl + Пробел и посмотреть, что будет сгенерировано (внутри всплывающего окна)

Общий способ написания аббревиатуры Эммета это:

tagName [серия выражений]

Где tagName : это HTML тег, который вы хотите сгенерировать

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

  1. Создание скелета HTML

Первое, что вы должны при создании HTML-страницы нужно создать для нее каркас, то есть тип DOCTYPE, html, head, body.

Что вы могли бы сделать с помощью всего двух ключей? Да, Эммет, давай сделаем это.

Просто введите ‘! ` в редакторе, появится всплывающее окно с содержимым, которое будет сгенерировано, нажмите Enter. и вот у вас есть скелет HTML. Круто, не правда ли?

 Изображение для сообщения

Изображение для сообщения

3. Вложенные элементы

Для создания вложенных мы будем использовать оператор ‘>’

  ul> li  

Изображение для сообщения

Давайте немного поинтересуем

Создадим список из 3 li , каждый li имеет тег привязки ( a ):

Для вложения мы можем использовать ‘> ‘ оператор. Но как нам повторить? Повторение может быть выполнено с помощью оператора * li * 3 даст три li, как при обычном умножении.

  ul> li * 3> a  

Изображение для сообщения

Если вам нужны числа внутри ваших li, вы можете использовать $ operator

  ul> li {  $} * 3  

Изображение для сообщения

Вы также можете использовать $ несколько раз, чтобы число дополнялось 0. Вы можете установить базовое число с помощью ‘@N’ и направление с помощью ‘@ -‘

  ul> li {$ @ -} * 5  

Изображение для сообщения

  ul> li {$ @ 10} * 5  

 Изображение для сообщения

Изображение для сообщения

4. А как насчет классов и идентификатора

  div # main.container.responsive  

вы можете указать Id с помощью ‘#’ и классов с помощью

Изображение  для сообщения

Вы можете указать несколько классы, но помните, что у вас может быть только один идентификатор. Если вы укажете два идентификатора с помощью #, второй идентификатор заменит первый.

Итак:

  div  # main # main-body.container.responsive  

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

Изображение для сообщения

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

Если вам нужен div с настраиваемым свойством данных, вы должны сделать следующее:

  div [data-name = logo]  

 Изображение для сообщения

Изображение для сообщения

7. Группировка

Вы можете использовать оператор ‘()’ для группировки сложных сокращений.

  div> (a> p> span +  span) * 3  

Это расширится до

Изображение для сообщения

8. Lorem Ipsum

Используя это, вы можете получить текст-заполнитель lorem Ipsum:

  lorem  

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

  lorem * 5  

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

Поля 10 со всех сторон

Просто введите:

  m10–10–10–10  

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

   margin: 10px 10px 10px 10px;   

То же самое можно сделать для заполнения :

   p10–10–10–10   

который будет расширен до:

   padding: 10px 10px 10px 10px;   

И многое другое. Чтобы узнать, что еще можно сделать, перейдите по следующим ссылкам :). Попробуйте их, они очень полезны.

Emmet 2.0 в Visual Studio Code

7 августа 2017 г. Рамья Рао, @ramyanexus В выпуске Visual Studio Code (версия 1.15) за июль 2017 г. мы поставляем…

code.visualstudio.com

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

Emmet использует синтаксис, аналогичный селекторам CSS, для описания позиций элементов внутри сгенерированного дерева и элементов …

docs.emmet.io

Это все для эта статья. Если вам понравилась статья, поделитесь ею, хлопните в ладоши 🙂

Оцените статью
techsly.ru
Добавить комментарий