Что такое emmet vs code

Как пользоваться плагином Emmet (VS Code)

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

Как пользоваться Emmet верстальщику

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

Emmet: HTML сокращения

Создать базовую структуру HTML документа

Если набрать в редакторе «!» и нажать Tab, то Emmet вставит скелет HTML документа.

Подключение CSS файла

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

Развернуть ссылку

Меня всегда бесило прописывание в ссылке http и вот наконец-то пришел конец моим мучениям a:link.

Добавить тег

Чтобы добавить тег, нужно просто написать название тега и нажать Tab.

Для добавления тега с классом, вводите только название класса и точку .box.

Если нужен какой-то другой тег с классом, то соответственно пишем header.top

Развернуть список

С Emmet стало проще разворачивать списки, пользуясь формулой ul>li*5.

Генерация текста lorem

Невероятно просто стало генерировать текст с любым количеством абзацев p*3>lorem.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae illum placeat quisquam, eaque quia vero neque, itaque ducimus cum quasi doloribus aperiam eos dignissimos, eum labore esse. Eligendi, veritatis nulla!

Autem maxime unde iusto sunt atque deleniti perspiciatis id praesentium. Necessitatibus sequi non delectus! Maxime voluptates excepturi ducimus nesciunt at, dolor iste molestias itaque sed esse nisi perferendis sequi! Fugiat?

Suscipit molestias odit impedit voluptatem laborum a est, iure dolorum autem? Accusamus, esse pariatur ipsam eum consequatur error, accusantium corporis magni a ipsa blanditiis neque impedit porro, alias deserunt voluptatibus?

Emmet: CSS сокращения

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

header mb30
pr10
bg
c
>
header margin-bottom: 30px;
padding-right: 10px;
background: #fff;
color: #ccc;
>

Как видите использование Emmet в разы ускоряет написание кода, при условии что вы хорошо знаете HTML теги и CSS свойства. Кроме того прописывание всего селектора (свойство: значение), малоинтересное занятие. Если вы ещё не используете Emmet, то я настоятельно рекомендую не отказываться от такой замечательной возможности.

Создано 13.03.2020 10:58:05

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

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

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Повышение скорости написания кода: Emmet и его использование в VSCode

Emmet — это утилита для текстовых редакторов, которая упрощает и повышают скорость написания кода. Первоначально слово «Emmet» означало муравей — маленькое насекомое, которое может нести в 50 раз больше своего веса. Чтобы использовать Emmet, нужно скачать и установить плагин для используемого текстового редактора. Список всех плагинов доступен на официальном сайте. Если вы используете Visual Studio Code, то устанавливать плагин не нужно, он уже встроен.

Аббревиатуры

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

У Emmet нет предопределенного набора имен тегов, вы можете написать любое слово и преобразовать его в тег: div → , foo →​ и так далее. Преобразование происходит по нажатию клавиши. Обычно это клавиша Tab. В VSCode, чтобы выполнять преобразование по нажатию клавиши Tab, добавьте следующую настройку:

Создание базовой структуры html

Для создания базовой структуры html напишите символ ! и нажмите клавишу Tab. В результате файл заполнится следующим содержимым:

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

Операторы вложенности используются для позиционирования элементов внутри сгенерированного дерева.

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

Оператор > позволяет вкладывать один элемент в другой:

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

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

Повторение

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

Группировка

Круглые скобки позволяют выделить в аббревиатуре отдельные поддеревья:

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

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

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

Указание класса и id

Оператор . позволяет указать класс. Оператор # предназначен для указания id:

Произвольные атрибуты

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

td[title=»Hello world!» colspan=3] →

Произвольные атрибуты имеют следующие особенности:

1. Для разделения атрибутов используется пробел.
2. Если не указано значение атрибута, то его значением станет пустая строка с меткой для табуляции (если ваш редактор поддерживает метки табуляции).
3. Можно использовать одинарные и двойные кавычки для указания значений атрибутов.
4. Если значение атрибута не содержит пробелов, то его не обязательно заключать в кавычки.

Нумерация

Оператор $ позволяет создавать нумерацию. Для этого поместите данный оператор после имени элемента, имени атрибута или значения атрибута:

Оператор $ можно поместить в любом месте имени:

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

Начальное значение и направление нумерации

Модификатор @ позволяет изменить начальное значение и направление нумерации (по возрастанию или убыванию). Чтобы изменить направление нумерации, добавьте модификатор @- после оператора $ :

Чтобы изменить начальное значение счетчика, добавьте модификатор @N к оператору $ :

Вы можете изменить начальное значение счетчика и направление нумерации одновременно:

Добавление текста

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

Неявные имена тегов

Во многих случаях можно не писать имя тега. Например, вместо div.content вы можете написать .content , что преобразуется в . Emmet смотрит на родительский тег каждый раз, когда вы расширяете аббревиатуру без имени тега. Если родительcкий элемент является блочным, то будет выбрать тег div , в противном случае — span . При этом есть несколько исключений:

1. li для ul и ol .
2. tr для table , tbody , thead и tfoot .
3. td для tr .
4. 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 . Вот как это сделать через терминал:

1. mkdir .vscode && cd .vscode
2. 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, можно пойти одним из двух путей:

1. В самом конце набора строки Visual Studio Code сам вам предложит ее преобразовать. Вам нужно только нажать Enter, когда на экране есть всплывающая подсказка.
2. Выделить всю строку и нажать комбинацию клавиш 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">

$ npm i --save logrocket 

// Code: 

import LogRocket from 'logrocket'; 
LogRocket.init('app/id');

Add to your HTML:

script src="https://cdn.lr-ingest.com/LogRocket.min.js"> /script>
script>window.LogRocket && window.LogRocket.init('app/id');script>