Вышел Emmet 2 для Sublime Text

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

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: Действие "Захват аббревиатуры".

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

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

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

Атрибуты выражения: div[class={getClass('foo')}].

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

В Emmet 2 аббревиатуры CSS расширены динамическими цветными фрагментами: вы можете набрать, например, #f .5, чтобы быстро получить rgba(255, 255, 255, 0.5).

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

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

Больше действий

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

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

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

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

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

Введите следующий URL в диалог и нажмите Enter: https://github.com/emmetio/sublime-text-plugin/releases/latest/download/registry.json

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

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

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

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

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

Оригинал:

Перевод:Федоров Матвей

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

https://t.me/metsolution