Как пользоваться Sublime text emmet

Обновлено: 02.07.2024

Внимание! этот подключаемый модуль может вообще не работать в некоторых операционных системах, поскольку он написан на JavaScript и использует для запуска двоичные файлы PyV8 и Google V8. Если у вас возникли проблемы или сбой редактора, заполните вопрос.

Выполните команду «Управление пакетами: Установить пакет», найдите и установите подключаемый модуль Emmet.
Перезапустите редактор ST (при необходимости)

Клонируйте или загрузите репозиторий git в папку с вашими пакетами (в ST найдите пункт меню Browse Packages., чтобы открыть эту папку)
Перезапустите редактор ST (при необходимости)

ВНИМАНИЕ: Когда подключаемый модуль будет установлен, он автоматически загрузит требуемый двоичный файл PyV8, поэтому вам придется немного подождать (см. сообщение Загрузка двоичного файла PyV8 в строке состояния). Если у вас возникли проблемы с автоматическим загрузчиком PyV8, попробуйте установить его вручную.

Интерактивное «Расширение аббревиатуры» — Ctrl+Alt+Enter — ⌃D (Mac) / Ctrl+, (ПК) — ⌃J / Shift+Ctrl+0 — ⇧⌃T / Ctrl+Alt+J — ⌃W / Shift +Ctrl+G — Ctrl+Alt+→ или Ctrl+Alt+ ← — ⇧⌘. или ⇧⌘, / Shift+Ctrl+. или Shift+Ctrl+, — ⇧⌥/ / Shift+Ctrl+/ — ⇧⌘' / Shift+Ctrl+` — ⌘' / Shift+Ctrl+; — ⇧⌃I / Ctrl+U — ⇧⌘Y / Shift+Ctrl+Y — ⇧⌘R / Shift+Ctrl+R — ⇧⌃D / Ctrl+'
Переименовать тег — ⇧⌘K / Shift+Ctrl+'

Увеличить на 1: Ctrl+↑
Уменьшить на 1: Ctrl+↓
Увеличить на 0,1: Alt+↑
Уменьшить на 0,1: Alt+↓
Увеличить на 10: ⌥⌘↑ / Shift+Alt+↑
Уменьшить на 10: ⌥⌘↓ / Shift+Alt+↓

Вы можете легко расширить Emmet новыми действиями и фильтрами или настроить существующие. В Emmet.sublime-settings определите параметр extensions_path, и Emmet будет загружать все файлы .js и .json в указанную папку при запуске.

Значение extensions_path по умолчанию — ~/emmet , что указывает на папку emmet в домашней папке пользователя вашей ОС.

Кроме того, вы можете создавать разделы с именами в виде файлов расширений (например, фрагменты, настройки и синтаксические профили) внутри пользовательского файла Emmet.sublime-settings и записывать там свои настройки. Примеры см. в исходном файле настроек.

Переопределение сочетаний клавиш

Sublime Text — отличный текстовый редактор с множеством функций и действий. Большинство этих действий связаны с сочетаниями клавиш, поэтому практически невозможно предоставить удобные сочетания клавиш для сторонних плагинов.

Если вас не устраивает раскладка клавиатуры по умолчанию, вы можете отключить отдельные сочетания клавиш с помощью параметра disabled_keymap_actions файла Emmet.sublime-settings.

Используйте разделенный запятыми список названий действий, которые по умолчанию должны быть отключены. Например, если вы хотите отключить сочетания клавиш Ctrl+E («Расширить аббревиатуру») и Ctrl+U («Обновить размер изображения»), необходимо установить следующее значение:

Вы должны обратиться к файлу Default (Your-OS-Name).sublime-keymap, чтобы получить идентификаторы действий (ищите args/action key).

Чтобы отключить все ярлыки по умолчанию, установите значение all :

Не то чтобы, если вы отключили какое-либо подобное действие и создали собственное сочетание клавиш, вам не следует использовать контекст emmet_action_enabled.ACTION_NAME, поскольку это клавиша, которая отключает действие.

Как расширить аббревиатуру с помощью Tab в другом синтаксисе

Emmet расширяет сокращения только в ограниченном синтаксисе: HTML, CSS, LESS, SCSS, Stylus и PostCSS. Причина ограничения обработчика Tab ограниченным списком синтаксиса заключается в том, что он ломает собственные фрагменты Sublime Text.

Если вы хотите использовать аббревиатуру с помощью Tab в другом синтаксисе (например, JSX, HAML и т. д.), вам необходимо изменить настройки сочетаний клавиш: добавьте команду expand_abbreviation_by_tab для клавиши табуляции для требуемого синтаксиса селекторы областей . Чтобы получить текущий селектор области синтаксиса, нажмите ⇧⌃P (OSX) или Ctrl+Alt+Shift+P , он будет отображаться в строке состояния редактора.

Перейдите в раздел «Настройки» > «Привязки клавиш — Пользователь» и вставьте следующий фрагмент JSON с правильно настроенным селектором области вместо токена SCOPE_SELECTOR:

Обработчик клавиши Tab

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

По умолчанию обработчик Tab работает в ограниченных областях синтаксиса: HTML, XML, HAML, CSS, SASS/SCSS, LESS, PostCSS и строки в языках программирования ( как JavaScript, Python, Ruby и т. д.). Это означает:

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

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

Что такое Эммет?

Emmet (ранее известный как Zen Coding) — это набор инструментов для веб-разработчиков, который может значительно улучшить рабочий процесс HTML и CSS. Вы можете вводить выражения, подобные CSS, которые можно анализировать динамически, и выводить результат в зависимости от того, что вы вводите. в аббревиатуре. — Документация Эммета

Это означает, что с помощью Emmet мы можем:

Вводите HTML и CSS с помощью простых сочетаний клавиш.
Экономьте время на написании кода
Облегчить жизнь

Довольно полезно, правда? Давайте узнаем, как установить его с помощью Sublime Text.

Установка плагинов

В Sublime Text есть замечательное дополнение Package Control, которое позволяет найти и установить практически любой плагин из самого приложения. Строка кода для установки Package Control меняется с каждым выпуском, поэтому вам придется копировать ее прямо с официального сайта.

После того, как у вас есть фрагмент для вашей версии Sublime, запустите программу и откройте консоль (⌘ +` в OS X). Вставьте нужный код, нажмите Enter и посмотрите, как Package Control установится, как по волшебству.

Установив Package Control, вы можете загрузить дополнительные подключаемые модули, открыв палитру команд (Shift+ ⌘ +P в OS X) и введя «Установить пакет», а затем отправив верхний результат. Далее открывается аналогичное меню, раскрывающее список пакетов, доступных для установки. Введите здесь «Эммет» и выберите лучший результат.

Использование Эммета

Теперь, когда мы установили Emmet, мы наконец-то можем повеселиться с некоторыми из его невероятных ярлыков. Формула использования Emmet очень проста:

Введите поддерживаемое сочетание клавиш.
Нажмите Tab

И все! Ознакомьтесь с некоторыми из наиболее полезных горячих клавиш, которые вы можете начать использовать прямо сейчас.

Улучшение

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

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

Этот плагин устарел и больше не поддерживается, используйте новую версию.

Эммет для Sublime Text

Официальный плагин Emmet для Sublime Text.

Выполните команду «Управление пакетами: Установить пакет», найдите и установите подключаемый модуль Emmet.
Перезапустите редактор ST (при необходимости)

Клонируйте или загрузите репозиторий git в папку с вашими пакетами (в ST найдите пункт меню Browse Packages., чтобы открыть эту папку)
Перезапустите редактор ST (при необходимости)

Интерактивное «Расширение аббревиатуры» — Ctrl+Alt+Enter — ⌃D (Mac) / Ctrl+, (ПК) — ⌃J / Shift+Ctrl+0 — ⇧⌃T / Ctrl+Alt+J — ⌃W / Shift +Ctrl+G — Ctrl+Alt+→ или Ctrl+Alt+ ← — ⇧⌘. или ⇧⌘, / Shift+Ctrl+. или Shift+Ctrl+, — ⇧⌥/ / Shift+Ctrl+/ — ⇧⌘' / Shift+Ctrl+` — ⌘' / Shift+Ctrl+; — ⇧⌃I / Ctrl+U — ⇧⌘Y / Shift+Ctrl+Y — ⇧⌘R / Shift+Ctrl+R — ⇧⌃D / Ctrl+'
Переименовать тег — ⇧⌘K / Shift+Ctrl+'

Увеличить на 1: Ctrl+↑
Уменьшить на 1: Ctrl+↓
Увеличить на 0,1: Alt+↑
Уменьшить на 0,1: Alt+↓
Увеличить на 10: ⌥⌘↑ / Shift+Alt+↑
Уменьшить на 10: ⌥⌘↓ / Shift+Alt+↓

Значение extensions_path по умолчанию — ~/emmet , что указывает на папку emmet в домашней папке пользователя вашей ОС.

Переопределение сочетаний клавиш

Вы должны обратиться к файлу Default (Your-OS-Name).sublime-keymap, чтобы получить идентификаторы действий (ищите args/action key).

Чтобы отключить все ярлыки по умолчанию, установите значение all :

Как расширить аббревиатуру с помощью Tab в другом синтаксисе

Обработчик клавиши Tab

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

Установите и используйте Emmet

Установка плагинов для Sublime Text 2 может оказаться сложной задачей. Воспользуйтесь приведенным ниже руководством по его установке. Он уже установлен? Затем перейдите к разделу «Как использовать Emmet».

Как установить
Шаг 1:

Мы хотим открыть консоль, чтобы разрешить установку пакетов. Чтобы открыть консоль, нажмите: View – Open Console или используйте сочетание клавиш: CTRL + ´
Теперь, когда ваша консоль открыта, вставьте следующий код и нажмите Enter.

И после установки перезапустите Sublime Text 2.

Шаг 2:

Следующее, что нам нужно сделать, это открыть палитру команд. Для этого используйте сочетание клавиш: CTRL + SHIFT + P
и введите: установить пакет и нажмите Enter.

Теперь мы можем устанавливать пакеты, так как мы хотим установить Emmet, вы просто вводите Emmet и выбираете: Emmet (ex-Zen coding) для пакета Sublime Text.

И все. После выбора пакета Emmet установится, и вы получите уведомление после завершения установки.

Как пользоваться Эмметом

Прежде всего начните с создания нового документа и сохраните его, например, как: index.html
Теперь приступим!

Начнем с HTML 5,
Для этого введите html:5 и нажмите TAB
Вы также можете легко добавить ссылку CSS, набрав: link:css и нажав TAB
>Также попробуйте: link:favicon , link:rss или script:src

Эта часть уже сэкономила вам время, не так ли?

Вы также можете ввести: a и нажать TAB, это отобразится как:

И если вы наберете a, он покажет вам:

Теперь, когда вы попробовали это, мы можем попробовать объединить вещи. Попробуйте: header>h1.logo>a

Просто, верно? Но это еще не все!
Давайте попробуем создать 5 элементов списка, просто введите следующее: ul>li*5

> Используется для вложения элементов друг в друга. Вы можете использовать > несколько раз. Очень полезно создавать навигационные меню и списки. Попробуйте nav>ul>li>a, это приведет к:

С помощью Emmet можно даже создать фиктивный текст. Попробуйте это: p*2>Lorem
Это создаст два абзаца с фиктивным текстом.

Также попробуйте сгенерировать только 10 или 50 слов, поэтому используйте: p>Lorem10 или p>Lorem50

Теперь у вас есть возможность быстро настроить свой код! Хотите узнать больше? Ознакомьтесь с документацией на Emmet.io.

🎉 Делиться — это весело!

Поддержка 🐶

Если вы нашли эту статью полезной, у вас возник вопрос или вы заметили ошибку/опечатку.Хорошо, если вы оставите свой отзыв в разделе комментариев или поможете распространить его, поделившись этой статьей. Если вы чувствуете себя щедрым (а я надеюсь, что так и есть), вы определенно можете помочь мне, приготовив мне чашку кофе ☕.

Вам это тоже может понравиться!

Определить и добавить имя веб-браузера в качестве основного класса с помощью jQuery

Есть несколько случаев, когда вы хотите определить и настроить таргетинг на определенный веб-браузер, потому что, например, ваш CSS плохо отображается в этом…

Добавить пользовательские метатеги в заголовок HTML с помощью functions.php

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

8 редких тегов HTML, о которых вы не знали

Вот 8 тегов HTML, о которых вы, вероятно, не знали. И я считаю хорошей идеей использовать некоторые теги в вашем следующем…

25 комментариев

Здравствуйте. Я обнаружил, ваш блог с помощью MSN. Это
чрезвычайно умно написанная статья. Я обязательно
сохраню его в закладки и вернусь, чтобы узнать больше
полезной информации. Спасибо за сообщение. Я обязательно вернусь.

Привет. Я нашел ваш блог об использовании
msn. Это очень аккуратно написанная статья. Я
обязательно добавлю его в закладки и вернусь, чтобы прочитать дополнительную полезную информацию.
Спасибо за пост. Я обязательно вернусь.

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

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

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

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

Прекрасно, именно то, что я искал. Спасибо автору
за то, что потратил время на это.

Мне тоже нравится то, что вы делаете. Такая интеллигентная работа и репортаж!
Продолжайте прекрасную работу, ребята, я включил вас, ребята, в свой
блогролл. Думаю, это повысит ценность моего веб-сайта :
).

Вот правильный блог для всех, кто действительно хочет
разобраться в этой теме. Ты прекрасно понимаешь, что с тобой почти сложно спорить (не то, чтобы лично мне хотелось? Ха-ха).

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

Здравствуйте! Это сообщение не могло быть написано лучше!
Чтение этого поста напоминает мне о моем старом добром соседе по комнате!

Он всегда говорил об этом. Я отправлю этот пост
ему. Почти уверен, что он будет хорошо читать.

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