Как установить emmet в Visual Studio Code

Обновлено: 21.11.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

Как вы могли бы сделать все это, используя всего 2 ключа? Да, Эммет, позволь тебе сделать это.

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

<р>2. Элементы с текстовым содержимым внутри них

Если вы хотите создать div с текстовым содержимым внутри него

Создает тег div с любым текстом, указанным внутри фигурных скобок (<>)

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

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

Давайте сделаем вещи немного интереснее,

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

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

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

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

Вы даже можете использовать их вместе

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

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

<р>5. Пользовательские атрибуты

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

<р>6. Создание братьев и сестер.

Допустим, вы хотите иметь тег заголовка, тег div, тег нижнего колонтитула. Что бы вы сделали?

Они не являются вложенными, поэтому вы не можете использовать ‘>’

Для создания одноуровневого элемента используйте оператор «+»

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

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

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

<р>8. Лорем Ипсум

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

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

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

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

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

то же самое можно сделать и для отступов:

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

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

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

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

Фрагменты и сокращения в коде Visual Studio

В VS Code встроены пользовательские фрагменты, а также фрагменты HTML и CSS и сокращения, предоставленные Emmet.

Например, если вы наберете p>a в HTML-документе и нажмете Enter или Tab , Emmet превратит его в следующую разметку:

Примечание. Посетите документацию Emmet, чтобы узнать, как использовать синтаксис аббревиатуры.

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

Теперь мы можем ввести signup и нажать Enter или Tab, и мы получим тот же результат. В следующем разделе я объясню, как создавать фрагменты кода.

Emmet по умолчанию поставляется с набором фрагментов HTML. Например, ! создает базовую структуру документа HTML.

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

Создание и перезапись фрагментов

Если мы хотим создать собственные фрагменты Emmet или перезаписать существующие в VS Code, необходимо выполнить следующие шаги:

Вот и все. Теперь мы готовы создавать сниппеты, добавляя свойства к объектам html и css, где ключ — это имя сниппета, а значение — аббревиатура или строка.

Некоторые из моих пользовательских фрагментов HTML

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

Отложенная загрузка

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

img:l + Enter/Tab теперь создает следующую разметку:

Большинство страниц, которые я создаю, состоят из , и ориентиров, и

page + Enter/Tab создает следующую разметку:

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

Есть приложение, очень полезное в качестве редактора. Это не обычный текстовый редактор, но у него есть специальная функция для редактирования файлов, которые являются частью любой формы исходного кода приложения. Например, при разработке веб-приложения файл HTML также может стать частью исходного кода. Но обычно для создания простого и нормального HTML-файла-скелета потребуется много времени. Вот где ярлык, доступный в Visual Studio Code, пригодится. В этой статье объясняется, как установить необходимое расширение для включения этого ярлыка. Использование ярлыка сэкономит силы и время только на создание необходимого скелета или шаблона любого конкретного файла.

Установка расширения Emmet в Visual Studio Code

Прежде всего запустите приложение Visual Studio Code. Ниже приведен внешний вид изображения приложения Visual Studio Code:

После этого просто войдите в меню расширений следующим образом: Как установить расширение Emmet для шаблона Shortcut Skeleton в Visual Studio Code

Настройка расширения Emmet в коде Visual Studio

После успешной установки расширения Mithril Emmet не забудьте его настроить. Его конфигурация существует в файле settings.json расширения Mithril Emmet. Просто зайдите в меню «Настройки» и выберите «Расширения». В расширениях найдите Emmet, как показано на следующем изображении: Как установить расширение Emmet для шаблона скелета ярлыков в коде Visual Studio

Исходный вариант для контекста «settings.json» для настроек предпочтений расширений Emmet доступен следующим образом:

Чтобы расширение Emmet запустилось, правильно сгенерировав HTML-скелет или шаблон, просто введя ярлык, а затем тип вкладки, просто добавьте другие строки конфигурации. Эта строка находится в следующем:

В Visual Studio Code мы можем использовать Emmet для ускорения разработки. Давайте посмотрим, как это сделать.

В VS Code создайте новый файл с именем test.html:

Введите doc и обратите внимание на появившуюся аббревиатуру Emmit:

Нажав на значок информации, мы увидим, как будет выглядеть фрагмент:

Нажмите клавишу Tab, чтобы вставить HTML-код в документ:

Кроме того, если бы мы набрали ! вместо этого мы получили бы тот же результат:

Здесь мы можем использовать несколько ярлыков Emmet. Например, чтобы ввести a href, вместо того, чтобы вводить полный текст, мы можем ввести a, а затем табуляцию:

При табуляции мы получаем готовый к использованию код href:

СЕГОДНЯ Я ТРАЧУ БОЛЬШЕ ВРЕМЕНИ, СОЗДАВАЯ ВИДЕО ДЛЯ YOUTUBE, ЧТОБЫ ПОМОЧЬ ЛЮДЯМ ИЗУЧАТЬ ПЛАТФОРМУ MICROSOFT POWER.

ЕСЛИ ВЫ ХОТИТЕ ПОСМОТРЕТЬ, КАК Я СОЗДАЮ ПРИЛОЖЕНИЯ, ИЛИ НАЙДЕТЕ ЧТО-ТО ПОЛЕЗНОЕ, ЧИТАЯ МОЙ БЛОГ, Я БУДУ ОЧЕНЬ БЛАГОДАРЕН, ЧТО ВЫ ПОДПИСАЛИСЬ НА МОЙ КАНАЛ YOUTUBE.

СПАСИБО, ДАВАЙТЕ УЧИТЬСЯ ВМЕСТЕ.

Карл де Соуза — разработчик и архитектор, специализирующийся на Microsoft Dynamics 365, Power BI, Azure и искусственном интеллекте.

Оставить ответ Отменить ответ

О нас

Здравствуйте! Меня зовут Карл де Соуза, я разработчик программного обеспечения и архитектор, специализирующийся на Microsoft Dynamics 365, Power BI, Azure и искусственном интеллекте.

ПОДПИСАТЬСЯ И ПОДПИСАТЬСЯ:

Категории

(22) (13) (55) (6) (32) (1) (8) (537) (19) (21) (47) (4) (20) (31) (13) (135) (34) ) (142) (7) (11) (11) (7) (7) (5) (3) (43) (4) (47) (12) (2) (3) (10) (1) ( 11) (5) (2) (145) (6) (7)

Последние комментарии

โปรโมชั่น 26 марта, 2022 г. в 4:24 утра, как позвонить в Power BI REST API из Postman แหล่ง รวม เว็บไซต์สล็อต มา พร้อม ระบบ และ บริการ บริการ ดี แล้ว ใน นี้ คน ลง ทะเบียน ได้ แล้ว ใน ตอน นี้ เพื่อ เพื่อ เพื่อ ทุก คน สามารถ ร่วม ร่วม สนุกสนาน ทั้ง ทำ เงิน ได้ อย่าง อย่าง ไร้ จำกัด เป็น เป็น แหล่ง รวม เกม ใหญ่ ที่ สุด ของ ของ พวก เรา ดี ต่าง ต่าง โดย โดย จาก ต่าง ได้ ต่าง ไร้ ไร้ ไร้ ไร้ ขีด ๆ ๆ ไร้ ๆ ไร้ต่าง ได้ ด้วย ตน เอง เอง แนว ทาง การ ผ่าน อุก อุก ปรณ์ โทรศัพท์ ถือ วาง เดิม เดิม พัน เงิน จริง ที่ รวม รวม ค่าย ทุก ไว้ ภาย ใน เว็บ เว็บ เว็บ สล็อตออนไลน์ ครบ ไว้ ภาย ใน ค่าย ค่าย เกม ค่าย มั่นใจ มั่นใจมั่นใจ 100% ได้ เปิด เปิด บริการ ที่ สุด แสน จะ จะ พิเศษ สำหรับ ทุก ท่าน ท่าน สล็อต ที่ ที่ จะ ช่วย ให้ มี ปัญหา เรื่อง ถ้า สงสัย หลาย ใน ใน ใน ทันที แตก งาน แตก ใน ใน ใน ใน ใน หลายแตก ครั้ง มี ผู้ เล่น เล่น คน ที่ ต ก้อนโต ลุ้น ลุ้น รางวัล ใน ได้ ได้ รับ รับ ที่ ต้อง เคย ได้ รับ รับ หวัง ต้อง ต้อง ต้อง ต้อง ต้อง ต้อง สงสัย ต้อง ต้อง ต้อง สงสัย ต้อง ต้องได้ ต้อง ต้อง ต้อง ต้อง สงสัย ต้อง ต้อง สงสัย ต้อง สงสัย สงสัย ต้อง สงสัย สงสัย ต้อง ต้อง สงสัย ต้อง สงสัย ต้องว่า

Pragmatic Play, 25 марта 2022 г., 23:35, о том, как вызывать REST API Power BI от Postman Мне нравится, когда люди собираются вместе и делятся мнениями. Отличный сайт, продолжайте в том же духе!

토토 커뮤니티 25 марта 2022 г., 23:06 — Использование записей списка в Power Automate Flow для создания и отправки данных отчета CDS Вот мой веб-сайт :: 토토 커뮤니티

토토 커뮤니티 25 марта 2022 г., 22:25 – Использование всплывающих подсказок для отображения изображения при наведении курсора на запись Power BI Мой пост в блоге; 토토 커뮤니티

Читайте также: