Sublime text 2 emmet установить

Обновлено: 09.01.2025

После нескольких месяцев активной разработки, я хотел бы объявить о новой версии плагина Emmet для Sublime Text!

tl;dr: новый Emmet намного быстрее, меньше и лучше. Он не выламывает клавишу Tab, обеспечивает интерактивный предварительный просмотр расширенной аббревиатуры и имеет улучшенную поддержку JSX. Новый плагин находится в стадии бета-версии и должен быть установлен из внешнего репозитория. И если вам нравится Emmet, пожалуйста, поддержите его через Спонсоров GitHub: он помогает мне поддерживать проект дальше.

8 лет назад была выпущена первая версия Emmet, ставшая одним из самых скачиваемых пакетов для редактора Sublime Text. В те дни, когда Эммет был новеньким, я старался поддерживать как можно больше редакторов. Поскольку большинство редакторов расширено с помощью JavaScript, я хотел повторно использовать существующую JS-кодовую базу для Sublime Text, которая расширена с помощью Python.

Хотя это решение позволило мне реализовать плагин Sublime Text довольно быстро и (теоретически) облегчить дальнейшую поддержку плагина, у него было слишком много недостатков:

1) он требовал отдельной загрузки большого двоичного файла PyV8;

2) запуск JS внутри Python привел к значительному снижению производительности и стабильности;

3) это не позволяет глубже интегрироваться с возможностями Sublime Text.

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

Почти все пользователи хотят расширить аббревиатуру Emmet с помощью клавиши Tab, как и обычные фрагменты. Проблема заключается в том, что простая привязка клавиши Tab к действию Expand Emmet Abbreviation (Расширение аббревиатуры Эммета) не позволяет пользователям использовать нативные фрагменты. Более того, это разбивает другие важные функции редактора, такие как отступ, переход к следующему табулятору и т.д.

В плагине Emmet 2 используется новая парадигма, называемая захватом аббревиатуры. Когда вы начинаете вводить слово (в принципе, любое слово может быть аббревиатурой!), Emmet начинает его отслеживать (отображается как тонкое подчеркивание). Таким образом, подчеркнутое слово означает, что Emmet может расширить его как аббревиатуру: просто нажмите Tab, чтобы сделать это!

Если вы просто вводите обычный текст, то, скорее всего, вы введете некоторую некорректную аббревиатуру, например, пробел или запятую: при этом в конце захваченной аббревиатуры она будет автоматически сброшена, как будто ничего не случилось. Или просто нажмите клавишу Esc, чтобы принудительно сбросить аббревиатуру, и используйте клавишу Tab, чтобы развернуть фрагменты или вставить отступ.

Но самое интересное заключается в том, что когда аббревиатура становится сложной (содержит более одного элемента), вы увидите расширенный просмотр аббревиатуры, который обновляется в реальном времени при редактировании аббревиатуры:

Помните, что Emmet расширяет аббревиатуру по клавише Tab только в том случае, если она захвачена (имеет едва уловимое подчёркивание)! В противном случае клавиша Tab действует нормально.

Emmet также выступает в качестве провайдера автозавершения: если у вас уже есть аббревиатура в редакторе и вы хотите ее развернуть, переместите каретту в конце аббревиатуры и вызовите всплывающее окно автозавершения (по умолчанию Ctrl-Space):

Обратите внимание, что по умолчанию Sublime Text вставляет единичное завершение (например, немедленно расширяет аббревиатуру). Если вы хотите захватить аббревиатуру и продолжить ее редактирование с помощью интерактивного предварительного просмотра, запустите новый Emmet: Действие "Захват аббревиатуры".

Убедитесь, что синтаксис вашего документа в Sublime Text установлен на JSX, а не на JavaScript.

Поскольку любое слово может быть аббревиатурой Эммета, захват его таким же образом, как и в HTML, вызовет слишком много отвлекающих моментов при написании обычного JavaScript. Чтобы решить эту проблему, в JSX необходимо явно префиксовать аббревиатуру с < символом:

Кроме того, у Эммета есть некоторые внутренние улучшения для JSX:

Обнаружение нотации модуля на верблюжьей упряжке: Foo.Bar будет расширен до вместо ;

Атрибуты выражения: div[class=].

В CSS, Sublime Text использует немного другое поведение автозавершения: он отображает завершения по умолчанию и не перезаполняет список завершений по мере того, как вы набираете далее, что не позволяет Emmet построить правильное динамическое завершение. Чтобы преодолеть эту проблему, Emmet отображает предварительный просмотр аббревиатуры сразу после caret в качестве phantom:

Еще одна новинка Emmet 2 - встроенный предварительный просмотр открывающего тега. При перемещении каретты внутри названия закрывающего тега, а его соответствие открывающему тегу не видно на экране, вы увидите встроенный просмотр тега:

Нажмите на этот предварительный просмотр, чтобы перейти к открытию тега.

Все остальные действия, такие как "Обертка с аббревиатурой", "Баланс", "Выделить элемент" и т.д. также поддерживаются, но не имеют привязки клавиш по умолчанию: это создало слишком много проблем для новых пользователей, когда Emmet переопределяет действия из других плагинов. Вы должны либо вызывать эти действия через командную палитру, либо создавать свои собственные сочетания клавиш (список доступных действий см. в файле Default.sublime-commands).

Последний плагин Sublime Text предоставит веб-интерфейс для тонкой настройки опций Emmet и привязки клавиш.

Пожалуйста, сначала удалите старый плагин Emmet, иначе новый плагин не будет работать.

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

В Sublime Text, откройте командную строку, найдите и запустите Package Control: Add Repository command: Add Repository.

Из командной строки, запустите управление пакетами: Установить команду пакета.

В списке открытых пакетов найдите пакет Emmet2 и установите его.

Если на последнем шаге вы не можете найти пакет Emmet2 или установленный пакет не работает, перезапустите Sublime Text и повторите попытку.

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

Если вы считаете Emmet полезным для вас или вашей компании, или вы хотите поддержать нового редактора или будущее, пожалуйста, рассмотрите возможность спонсорства проекта через Спонсоров GitHub! Каждое пожертвование заставляет меня меньше беспокоиться о деньгах и концентрироваться на возможностях и улучшениях Emmet.

Check out new exiting features of upcoming Emmet release

Еще больше интересной информации по программированию вы можете найти в нашем Телеграмм-канале по ссылке:

После завершения установки перезапустите программу.
ps: введите Ctrl + Shift + P, а затем введите «Установить пакет», чтобы проверить, можно ли вызвать «Установить пакет», чтобы проверить успешность установки.

Метод 2: автономная установка

Предпосылка заключается в том, чтоPackage ControlДля установочного пакета замените установочный пакет на соответствующий путь к Sublime Text 2. Здесь есть два пути, и они могут быть помещены в любой из них после проверки.

• Путь первый:
  Откройте Sublime Text 2, нажмите PreFerences -> Browse Packages, войдите в папку и вернитесь на верхний уровень Sublime Text2 папки и найдите папку «Installed Packages» (если такой папки нет, создайте новую) и поместите загруженный установочный пакет Package Control в папку «Установленные пакеты».
• Путь второй:
  Путь установки Sublime Text 2 в папке «Sublime Text 2 \ Pristine Packages \».

Один из путей - это официально рекомендованный путь предотвращения. Для получения дополнительной информации см.Здесь。

Установить Эммет

Нажмите «shift + ctrl + p», чтобы вызвать панель, введите «pci», чтобы заблокировать функцию «Package Control: Install Package», нажмите Enter, вы увидите список, продолжайте вводить «emmet», чтобы найти заглушку. -in, нажмите Enter. После этого подождите 5-10 секунд, чтобы увидеть, появится ли файл описания Emmet. Если он появится, это означает, что вы можете использовать базовую функцию emmet, но этого недостаточно. Нам нужен полный Эммет. Следовательно, нам нужно использовать второй метод установки, который я выбрал - установка вручную.

• Ручная установка:
  Обратите внимание, что следующие шаги соответствуют описанным выше, поэтому, если вы не понимаете, что делать дальше, это означает, что вы не выполнили их. Если ничего не произошло, вы найдете папку Data в корневом каталоге Sublime text2 и папку Packages в папке Data. Если вы не можете найти две указанные выше папки, ничего страшного. Создайте ее вручную. Это достижимый.

Когда вы найдете каталог Packages или создали такую ​​папку, следующее, что вам нужно сделать, это перейтиPyv8Загрузите Pyv8, затем создайте новую папку с именем PyV8 в пакете, а затем извлеките содержимое ZIP в папку Pyv8.

Далее нажмитеПакет плагинов EmmetЗагрузите последний пакет плагина Emmet, разархивируйте содержимое в пакет, и все в порядке.

Хорошо, теперь перезапустите Sublime Text 2 и начните свое путешествие с Эмметом!

Для начала его нужно установить. В Sublime Text, о котором недавно была написана статья, это делается очень просто. Откройте command palette, нажав сочетание клавиш cmd+shift+p, или перейдите в пункт tools и выберите там command palette. Теперь введите "install package" и нажмите enter. Дальше введите "emmet" и снова нажмите enter. После того, как плагин загрузится и установится, перезапустите Sublime Text.

Установка завершена, и теперь мы можем начать пользоваться плагином emmet. Введите

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

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

Теперь нажмите tab, и мы получим следующее

Как видите, emmet добавил атрибут href самостоятельно. Если же вы введете img, то там сразу будут атрибуты src и alt.

В результате получим

То же самое и с id

Заметьте, что я не писал слово div, а просто ставил точку или решетку и писал нужный мне класс или id. Дело в том, что мы можем пропускать название тега и тогда emmet сам будет додумывать, какой же тег поставить. В большинстве случаев это будет div, но, если вы, например, напишите так внутри тега ul, то тег будет li с нужным классом или id.

Если вы хотите сами ввести какой-то атрибут, то напишите его в квадратных скобках

Чтобы вкладывать теги внутри других тегов, нужно использовать знак больше

С помощью символа * можно указать, сколько таких тегов нам нужно

Вот, что у нас получится

Если вам нужно добавить тег на том же уровне, используйте знак +

С помощью символа $ мы можем указать, что каждый тег следует нумеровать автоматически

Если вам нужен ведущий ноль, то напишите знак $ 2 раза, если 2 ведущих нуля, то 3 знака $ и т.д.

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

Если во время верстки вам нужен какой-то текст, то просто напишите lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, mollitia quibusdam voluptatibus fuga dolorem officiis animi error ex ea ipsa excepturi incidunt quis sunt ducimus rerum corrupti obcaecati ipsum quisquam.

Если вам нужно какое-то определенное количество слов, то напишите цифру, обозначающую количество слов после.

Lorem ipsum dolor.

Чтобы создать html структуру, просто напишите знак !

Теперь поговорим о том, как emmet поможет нам в css

Там достаточно просто написать начальные буквы свойства и значение, а потом нажать tab. Например

В результате получим

В некоторых свойствах уже стоят значения по-умолчанию. Например, в свойстве text-align

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

В конце стоит сказать, что если вам по каким-то причинам не нравится клавиша tab, то вы можете поменять ее. Для этого зайдите по следующему пути: Perferences->Package Settings->Emmet->Key Bindings - default. Используйте поиск(cmd+f или перейдите по пути Find->Find) С помощью поиска найдите команду "expand_abbreviation_by_tab". Выше нее, в массиве keys, в кавычках написано "tab". Измените это значение на свое, например, на "ctrl+e". Но это не совсем правильно. Лучше будет, если вы скопируете весь этот объект и вставите его в файл Key Bindings - User, а там уже меняйте сочетание клавиш. Сделано это для того, чтобы если что, вы могли вернуть все настройки по-умолчанию с помощью файла Key Bindings - Default.

Итак, на этом все. Сегодня мы рассмотрели плагин emmet для текстового редактора Sublime Text. Если вы используете другой редактор, то поищите этот плагин для него в интернете. Удачи!

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

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

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

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

Она выглядит вот так:

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

Что то не работает, когда ввожу install package, ничего не происходит.

Спасибо большое помогло.

Михаил, здравствуйте! У вас в строчке ошибка. У вас написано так: С помощью символа * можно указать, сколько таких тегов на нужно А надо так: С помощью символа * можно указать, сколько таких тегов нам нужно

Кстати, Михаил, сделайте на своём сайте редактор BB кодов. Просто без него не удобно писать комментарии, особенно если текст будет длинным. С уважением, Сергей.

У меня установилось без проблем, но не работает. в чем соль?

Опишите, в чем именно заключается проблема, и напишите, какая у Вас операционная система.

у меня windows 7. tab и другие кнопки если менять работают в обычном режиме.

Странно это, на самом деле. Вы уверены, что плагин точно установился? Если да, то создайте .html файл, введите "!"(без кавычек) и нажмите tab. Все должно работать из коробки. Возможно, Вам стоит попробовать переустановить плагин, если все равно ничего не работает.

все заново скачал и переустановил в 3-й раз, ЗАРАБОТАЛО! СПАСИБО БОЛЬШОЕ! полезная штука)))

Вы написали в 9 абзаце добаблять, исправьте)))

Да крутая штука, ускоряет процесс написание кода. +5

Как установить плагины в текстовый редактор Sublime?

Я хотел бы установить плагин Emmet в редакторе Sublime Text 2.

вы должны иметь Data/Packages папка в каталоге установки Sublime Text 2. Все, что вам нужно сделать, это загрузить плагин и поместить папку плагина в Packages папка.

или, более простым способом было бы установить Package Control Plugin по wbond.

и следуйте инструкциям по установке.

как только вы закончите, вы можете использовать Ctrl + Shift + P ярлык в Sublime, введите install и нажмите enter, затем найдите emmet .

EDIT: теперь вы также можете нажать Ctrl + Shift + P сразу и используйте команду "Install Package Control" вместо того, чтобы следовать инструкциям по установке. (Испытано на Build 3126)

самый простой способ установки - через консоль Sublime Text. Консоль доступна через Ctrl + ` ярлык или меню Вид > Показать консоль. После открытия вставьте в консоль соответствующий код Python для вашей версии Sublime Text.

код для Sublime Text 3

код для возвышенного текста 2

руководство

Если по какой-то причине инструкции по установке консоли не работают для вас (например, наличие прокси-сервера в сети), выполните следующие действия для ручной установки Package Control:

управление пакетом управляется командой Pallete. Чтобы открыть pallete, нажмите Ctrl + Shift + p (Win, Linux) или CMD + Shift + p (OSX). Все команды управления пакетами начинаются с Package Control:, поэтому начните с ввода пакета.

Без Менеджера Пакетов

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

во-первых, найти свой

Откройте Диспетчер пакетов с помощью Ctrl + Shift + P

тип Контрольный Пакет показать родственные команды (установите пакет, извлеките пакет ЕТК.) с пакетами

согласно ответу Джона Дэя

вы должны иметь папка данных/пакетов в Вашем каталоге установки Sublime Text 2. Все, что вам нужно сделать, это загрузить плагин и поместить папку плагина в папку Packages.

в случае, если вы ищете папку Data/Packages вы можете найти его здесь

При постоянном наборе одних и тех же тегов html и правил css невольно задумываешься можно ли ускорить данный рутинный процесс.

Сегодня мы рассмотрим расширение emmet для популярных редакторов и сред разработки, которое помогает существенно ускорить верстку сайтов. По своей сути emmet это набор сокращений которым соответствуют css правила и html разметка.

Установка emmet для редактора Sublime text

Первый способ

1. Нажимаем ctrl+shift+p и пишем команду Packege Control: Install Package
2. Вводим название плагина Emmet

Второй способ

1. В редакторе переходим в консоль View -> Show console и добавляем следующий код:

После чего нажимаем ввод

Установка emmet для редактора PhpStorm

В данную среду разработки уже включён плагин emmet. Чтобы это проверить достаточно набрать какое-либо сокращение emmet и нажать tab

Основные сокращения emmet

Сокращения для html:

! Сокращение для вывода структуры html документа

meta:vp вывод viewport

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

a Вывод ссылки

link:css Подключение таблицы стилей

link:favicon Вывод фавикона

script:src Добавление js кода

form:post

inp

select+

tarea

bq

art

c Комментарий

btn:s Вывод кнопки

hdr тег header

ftr тег footer

ol+ Нумерованный список

table+ Вывод таблицы

Правила emmet

div>ul>li Описание вложенности элементов

div+p Создание нескольких равнозначных элементов

div>p>span^a Элемент на уровень выше

header>(ul>li)+div Объединить в один элемент

a*3 Вывести несколько элементов

div.block_$*2 Класс с номером

.block1 Вывод текста

Сокращения для css:

p10 padding: 10px;

pt20 padding-top: 20px;

w20 width: 20px;

wa width: auto;

h20 height: 20px;

mah20 max-height: 20px;

mh20 min-height: 20px;

maw20 max-width: 20px;

mw20 min-width: 20px;

bgt background-color: transparent

bgi background-image:url();

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

  
• Fc64 dll ошибка far cry 4
  
• Как сделать питч в сони вегас
  
• Как сделать красный канал в teamspeak 3
  
• Ошибка 1308 при установке autocad 2015
  
• Как изменить разрешение экрана в crysis 2