Практическое использование Emmet (Zen Coding). Плагины Установка Package Control для Sublime text

В данной статье мы скачаем, установим на windows и русифицируем Sublime Text 3, также активируем его при помощи License Key и установим на него Emmet.

Скачать Sublime Text 3

Скачать Сублайн текст 3 вы можете с оф сайта sublimetext.com, либо с моего яндекс диска (рекомендую, так как именно его я устанавливал, русифицировал и активировал, да и там вы найдете ключи, и русификацию).

Установка Sublime Text 3

Установить Сублайн текст 3 очень просто, для этого его достаточно запустить и щелкать по кнопке далее, на этом останавливаться не буду, думаю ни у кого с этим проблем не возникнет.

Русификация Sublime Text 3

Распаковываете архив (SublimeText3RussianMenu.zip ) и копируем папку Default в «c:\Users\Имя_пользователя\AppData\Roaming\Sublime Text 3\Packages\ » (Путь для Windows 7/8/10)

Активация Sublime Text 3

Чтобы активировать Сублайн текст 3 откройте текстовый документ License Key , скопируйте из него один из ключей, далее запустите Сублайн и перейдите во вкладку «Справка » («Help «) - «Ввести лицензию » («Enter license «) вставляем ключ и жмем «Use License »

Установка Emmet на sublime text 3 и добавление в него Package Control.

Запускаем редактор и нажимаем Ctrl+ или «Вид » — «Показать/скрыть консоль » («View » — «Show console «), после чего снизу откроется панелька для ввода, вставьте в нее нижеприведенный код, нажмите «Enter «, немного подождите и перезапустите редактор.

Import urllib.request,os,hashlib; h = "df21e130d211cfc94d9b0905775a7c0f" + "1e3d39e33b79698005270310898eea76"; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen("http://packagecontrol.io/" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Error validating download (got %s instead of %s), please try manual install" % (dh, h)) if dh != h else open(os.path.join(ipp, pf), "wb").write(by)

Теперь заходим во вкладку «Опции » — «» или нажимаем сочетание клавиш «Ctrl » + «Shift » + «P «, после чего всплывет окошко в котором выбираем «Install Package » (если не ошибаюсь 6 строка).

После чего всплывет еще окошко, в котором необходимо ввести «Emmet «, появится масса предложений, нажимаем на первое (где просто Emmet ).

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

В трех словах, о том, как работает Эммет

Приведу несколько примеров для Emmet . Допустим нам нужно базовый каркас веб-страницы на html5 , для этого достаточно ввести «!» и нажать «Tab».

Чтобы быстро построить к примеру блок с классом col-sm-6 , необходимо ввести «.col-sm-6 » и нажать «Tab», получим «»

Для того чтобы построить вот такую конструкцию:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt natus quidem qui, obcaecati dolorem optio nulla voluptates suscipit eligendi laboriosam quisquam odio provident facilis laudantium. Non, tempora mollitia consequuntur laborum! Incidunt fugiat beatae non voluptatum at iste inventore obcaecati rem tenetur officiis reprehenderit soluta, magnam est consequatur accusantium, fuga aperiam nesciunt exercitationem dignissimos aut, ut. Voluptatibus id explicabo, suscipit porro. Iste magni, nam id a, maxime incidunt aperiam hic, aliquid suscipit aspernatur maiores quaerat sequi asperiores perferendis eum delectus consectetur sint excepturi laboriosam, error. Ratione voluptatum similique sunt sequi maiores! Officiis doloremque cumque ab quae similique totam voluptates? Molestias rerum eos dolor nulla quidem nam pariatur, quisquam reiciendis tenetur. Dolorum, at, illum! Corporis, itaque, impedit repellendus natus accusantium sit sunt.

достаточно ввести вот такую небольшую строчку «.row>.col-md-3*4>lorem » и нажать «Tab «.

Как вы видите Emmet очень крутое дополнение, которое очень ускоряет процесс верстки, главное уметь правильно им пользоваться) Советую почитать документацию.

Sublime Text 3 - один из самых распространенных текстовых редакторов для программистов. Он предоставляет своим пользователям уникальные возможности, которых нет больше нигде. Одни из самых главных достоинств - кроссплатформенность и расширяемость.

Здесь можно настроить все - от внешнего вида до компонентов программы (плагинов). Но и уровень настройки у Sublime Text соответствующий - как редактор для программистов, он настраивается через исходный код, что под силу не каждому. В этой статье мы рассмотрим как выполняется настройка Sublime Text 3.

Для Sublime Text с первых же версий возможности были гораздо выше, чем у других редакторов. Шутка ли - полностью настраиваемый интерфейс, возможность настроить поведение программы, а не просто вводить текст? Что уж говорить о плагинах - код, написанный на Python, позволяет пользователю управлять редактором так, как укротитель змей, играя на магической дудочке, заставляет гигантского удава трепетать перед ним. Однако, как бы нам ни было жаль, именно это и отпугивает новичков - будучи не в состоянии настроить редактор, они перестают им пользоваться.

Настройка Sublime Text 3

Сначала поговорим про внешний вид, а затем перейдем к настройке горячих клавиш и плагинов.

1. Внешний вид Sublime Text

Итак, пора запустить Sublime Text (статья про установку - ). Многим дизайн программы нравится, другим же - нет. И сейчас перед вами встает уникальная возможность поменять интерфейс до неузнаваемости!

Самый простой с виду способ - выбрать тему через настройки. Для этого идем в меню "Preferences" -> "Color Scheme" и выбираем нужную вам тему. Но это способ лишь поменяет расцветку редактора, и ничего более.

Другой, более сложный, но верный вариант - разобраться с файлом настроек. Чтобы открыть его, перейдите в меню "Preferences" -> "Settings". И вот, перед вами не что иное, как громада текста. Но не все так сложно, как кажется! Слева - настройки по умолчанию, их трогать не надо. Их можно взять за пример. А вот справа нужно разместить свои настройки - взять, скопировать нужную строку и поменять ее значение. Основные настройки:

"color_scheme" - цветовая тема. Можно выбрать из существующих, а можно скачать в папку Packages/Color Scheme - Default/.

"font_face" - шрифт текста. Важно, чтобы он был в системе. Чтобы посмотреть список доступных шрифтов, откройте любой текстовый редактор, к примеру, Lible Office Writer.

"font_size" - размер шрифта, устанавливающийся дробным или целочисленным значением.

"font_options" - дополнительные опции шрифта типа "no_bold", "no_italic".

"word_separators" - разделители слов.

"line_numbers" - настройка нумерации строк.

"gutter" - отображать ли "канавку" (в ней располагаются номера строк и закладки).

"margin" - длина отступа от "канавки" .

"fold_buttons" - если навести курсор на "канавку" , то будут видны треугольные стрелки, позволяющие скрыть или показать фрагмент кода между фигурными скобками. Их тут можно отключить или включить.

"fade_fold_buttons" - если поставить значение false, то треугольные кнопки не будут скрываться.

Вот пример действия настроек (не забудьте сохранить файл):

Вы можете поэкспериментировать здесь сами. А мы идем дальше.

2. Настройка сочетаний клавиш

Да-да, вы не ослышались! Любой может настроить сочетания по-своему, присвоив им другие значения. Чтобы открыть файл, перейдите в "Preferences" -> "Key Bindings" .

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

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

Ну вот и все, Sublime Text стал таким, каким он вам нужен и вы знаете как настроить Sublime Text 3. А сейчас пора двигаться дальше - к установке плагинов.

3. Установка Package Control

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

Package Control - предназначен для более быстрой и удобной установки плагинов. Он позволяет устанавливать их через визуализированный интерфейс, а не через код.

Для начала установим Package Control с официального сайта. Это не значит, что мы его будем скачивать!

Скопируем текст из соответствующего текстового поля (в зависимости от версии Sublime Text).

С помощью сочетания клавиш "Ctrl + ~" вызываем встроенную в редактор консоль (да-да, есть и такое!).

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

Перезапускаем редактор.

Package Control установлен! Теперь пора разобраться с тем, как им пользоваться.

4. Работа с плагинами в Package Control

Чтобы запустить Package Control, необходимо набрать сочетание клавиш "Ctrl + Shift + P" и из списка выбрать элемент Package Control: Install Package.

И перед нами долгожданная установка плагинов! Теперь есть возможность быстрого их поиска и выбора, а если выбрать другие команды для Package Control, то можно и удалять, и изменять элементы редактора. Теперь надо потренироваться на установке. Уставноим Material Theme и выполним настройки темы sublime text 3.

Запускаем установщик плагинов.

Набираем в поле поиска Material Theme.

Нажимаем и ждем, внизу должна появиться надпись "Installing package Material Theme" . В процессе установки будет запрошено добавление еще одного плагина, разрешаем.

Чтобы применить тему, необходимо перейти в меню "Preferences" -> "Color Scheme" -> "Material Theme" -> "schemes" , а далее - тема, которая вам больше всего понравится.

Однако это еще не все. Несмотря на установку темы в качестве плагина, она активируется не до конца. Чтобы исправить это, зайдите в файл настроек и допишите следующий текст:

"theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"overlay_scroll_bars": "enabled",
"line_padding_top": 3,
"line_padding_bottom": 3,
// On retina Mac
"font_options": [ "gray_antialias" ],
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
// Highlight active indent
"indent_guide_options": [ "draw_normal", "draw_active" ]

Вид редактора после применения к нему темы:

Неплохо, да? Настройка Sublime Text 3 почти завершена. А сейчас пора установить что-нибудь более существенное. Давайте ознакомимся с самыми популярными плагинами для Sublime Text.

Топ 5 плагинов для Sublime Text 3 1. Emmet

Emmet - плагин, позволяющий сделать отображение кода более удобным. Здесь используются сочетания клавиш. К примеру, "html + tab" создает каркас документа, а " div.wrapper + tab" превратится в полноценный код:

Этот плагин представляет собой коллекцию сокращений снипсетов для JavaScript. Длина набираемого текста с помощью подсказок правда уменьшается! К примеру, вместо набора "document.querySelector("selector’);" можно просто набрать "qs + Tab" .

Зачем искать место для нового файла в неудобном дереве каталога? Данный плагин позволит быстро и эффекстивно ввести нужные данные, и файл будет создан буквально за пару нажатий клавиш!

4. Git

Название этого плагина говорит само за себя: вы сможете выполнять все необходимые действия в рамках Git"а, не выходя из редактора!

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

Основные операции в Emmet

Итак, для написания HTML в Emmet используются 12 типов селекторов:

# - создает атрибут id
. - создает атрибут class
- создает любые другие атрибуты, в том числе и пользовательские
> - делает переход на один уровень ниже
+ - создает соседние элементы на том же уровне
^ - делает переход на уровень вверх
* - умножает элементы
$ - заменяется числом, каждый раз увеличивающимся на единицу
$$ - то же самое, только двухзначное
{} - добавляет текстовое содержимое элементам
() - группирует элементы
: - используется для некоторых элементов, таких как , , и др., и задает для них атрибуты

Рассмотрим на примерах.

Для того, чтобы создать один элемент с атрибутами class и id, необходимо написать:

Div#content.column

После набора этой строки нажимаем клавишу Tab (в Notepad++ клавиши Ctrl+Alt+Enter) и получаем результат:

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

Input

Результат:

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

Input:text

или еще короче:

Результат:

Аналогично задаются типы: hidden (h), search, email, url, password (p), datetime, datetime-local, date, month, week, time, number, range, color, checkbox (c), radio (r), file (f), submit (s), image (i), reset, button (b).

Таким же образом можно задавать атрибуты тегов метаданных и . Вот так можно подключить внешний css-файл:

Link:css

Результат:

Остается только исправить значение href.

Файлы.js подключаются аналогично:

Script:src

получаем:

Селекторы > и + создают, соответственно, дочерние и соседние элементы, а селектор ^ позволяет подниматься в иерархии на один уровень. Также есть возможность умножать элементы с помощью знака *. Например, следующая строка создаст список с пятью пунктами:

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

Div#dialog>p>span{text}

Результат:

Text

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

Select>option*10

Результатом выполнения в данном случае будет , содержащий 10 тегов со значениями атрибута value от 1 до 10.

Для сложных конструкций можно применять группировку элементов, используя круглые скобки. Однако эта возможность существует не во всех редакторах, например, она не поддерживается расширением Web Essentials 2012 для Visual Studio.

Шаблоны HTML

Emmet также предоставляет возможность создавать разметку с использованием различных шаблонов HTML, наиболее интересный из них - html:5. Такая команда даст следующий результат:

Document

Условные комментарии

С помощью команд cc:ie и cc:noie можно добавить условные комментарии. Команда cc:ie выдает разметку, код внутри которой будет распознаваться только Internet Explorer, cc:noie, наборот, генерирует комментарии, содержимое которых будет доступно только всем остальным браузерам. Результат выполнения первой:

и второй:

Сокращенные конструкции

Существует также несколько сокращенных конструкций для создания таблиц и списков: table+, ul+, ol+, dl+, select+. Результаты их выполнения будут такими:

Оборачивание в аббревиатуру

В случае, если часть разметки уже существует, и необходимо дополнить её, не переписывая заново, можно воспользоваться функцией оборачивания. Для этого нужно:

установить курсор на тот тег, который должен быть обернут, либо на текст, который должен быть помещен в новый тег,
затем открыть диалоговое окно этой команды нажатием клавиш Ctrl+Shift+G в Sublime Text 2 (здесь это будет командная строка внизу экрана) или Ctrl+Shift+Alt+Enter в Notepad++
и написать там соответствующую аббревиатуру Emmet.

Например, у нас существует следующая разметка:

Необходимо создать внутри div новый элемент div с классом wrap и поместить в него существующий параграф с текстом. Устанавливаем курсор внутри тега

Или даже закрывающего тега

, открываем диалог и пишем там:

Div.wrap

Результат будет таким:

Подобным образом можно оборачивать не только отдельные элементы, но и множественные, при этом даже необязательно, чтобы они были одинаковыми. Для этого нужно выделить тот набор элементов, в котором каждый элемент должен быть обернут, и в окне команды с помощью селектора * указать, какой элемент обертки нужно размножить. Например, есть div, в котором находится несколько параграфов:

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

списка

. Выделяем все параграфы, нажимаем соответствующие клавиши и в открывшемся окне пишем:

Ul>li*>a

В результате получим следующий код:

Удаление тегов

С помощью Emmet можно упростить процесс удаления ненужных тегов. Достаточно установить курсор на тот тег, который необходимо удалить, и вызвать команду нажатием клавиш Ctrl+Shift+; (Sublime Text 2) - удалится не только открывающий тег, но и закрывающий, а также строки, на которых они находились. В Notepad++ нет горячих клавиш по умолчанию для этой команды, но их можно настроить в меню «Опции» > «Горячие клавиши». В открывшемся окне выбрать вкладку «Plugin commans» и назначить там комбинацию клавиш для команды «Remove tag».

Работа с CSS

Для быстрого написания CSS кода в Emmet существует большой набор специальных сокращений свойств и их значений. Самый простой и эффективный способ использования этих сокращений - писать аббревиатуры, состоящие из первых букв свойств и их значений, например, сокращение tdn развернется как:

Text-decoration: none;

Точно такой же результат дадут записи td-n и td:n.

Если нужно указать несколько значений для свойства, это можно сделать через знак дефиса:

Результат:

Margin: 10px 20px;

Подобным образом задаются и отрицательные значения:

M-10--20

Результат:

Margin: -10px -20px;

Если после числовых значений свойств не указывать единицы измерения, то по умолчанию автоматически выставляются пиксели, за исключением случая, когда значения нецелые - тогда выставляются em. Также существует несколько сокращений для единиц измерения: вместо % можно писать p, вместо em - e, а вместо ex - x.
Например:

Результат:

Width: 100%;

Если добавить в конец аббревиатуры восклицательный знак, то к свойству будет добавлено значение!important, например:

даст результат:

Padding: 20px !important;

Однако наиболее интересная возможность для работы с CSS, которую предоставляет Emmet - это создание свойств с вендорными префиксами. Для ряда таких свойств (border-radius, transform и т. д.) автоматически создаются копии со всеми необходимыми вендорными префиксами. Так, например, аббревиатура brs5 будет расширена следующим образом:

Webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;

Также Emmet значительно облегчает процесс написания стилей для элементов с градиентом. Для этого используется специальная аббревиатура lg (или linear-gradient), после которой в круглых скобках указываются параметры градиента:

Lg(left, #ddd, #ccc)

Результат:

Background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd), to(#ccc)); background-image: -webkit-linear-gradient(left, #ddd, #ccc); background-image: -moz-linear-gradient(left, #ddd, #ccc); background-image: -o-linear-gradient(left, #ddd, #ccc); background-image: linear-gradient(left, #ddd, #ccc);

Для редактирования значений в уже написанных свойствах с вендорными префиксами можно воспользоваться командой обновления значения (горячие клавиши в Sublime Text 2 - Ctrl+Shift+R). Сначала нужно исправить значение в одной из строк, затем вызвать команду, и данное значение обновится во всех копиях этой строки.

Математические вычисления

Emmet позволяет выполнять несложные арифметические вычисления прямо во время написания HTML или CSS кода, не используя какие-либо сторонние калькуляторы. Нередко возникают ситуации, когда необходимо вычислить значения отступов, ширины элементов и других значений; данная особенность освобождает разработчика от необходимости переключаться между окнами редактора и калькулятора. Поддерживаются операции сложения, вычитания, умножения и деления. В Sublime Text 2 горячие клавиши для этой операции - Ctrl+Shift+Y, в Notepad++ по умолчанию горячих клавиш для этой команды нет, необходимо задать их самому (меню «Опции» > «Горячие клавиши»).

В каких случаях стоит использовать Emmet

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

Например, необходимо сделать таблицу из пяти строк и пяти столбцов, в первой колонке должна быть нумерация строк (от 1 до 5). Такая разметка создается при помощи одной небольшой строки:

Table>tr*5>td{$}+td*4

Результат (37 строк кода):

1
2
3
4
5

Многие плагины, используемые разработчиками, требуют определенной разметки тех элементов, к которым они подключаются. Зная заранее о том, какую структуру необходимо создать, гораздо удобнее сделать это сразу, одной командой. Так будет выглядеть создание разметки виджета «Accordion» популярной библиотеки jQuery UI:

Div#accordion>(h3+div>p)*5

Результат:

Или виджета «Tabs»:

Div#tabs>(ul>li*5>a)+div#tabs-$*5>p

Результат:

Фильтрация

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

haml - генерирует результат как HAML-код, включен по умолчанию, если выбран синтаксис HAML.

Без фильтра аббревиатура

#content>ul.nav>li*2

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

Если добавить фильтр |haml, получим разметку в виде HAML-кода:

#content %ul.nav %li %li

html - генерирует HTML-код, включен по умолчанию везде, кроме HAML-файлов
e - заменяет символы и & соответственно на последовательности и &

Добавим в предыдущий пример фильтр |e:

#content>ul.nav>li*2|e

Результат:

c - добавляет комментарии в код
s - выводит всю разметку в одну строку
t - работает только при оборачивании тегов; обрезает маркеры оборачиваемых пунктов списка.

Пусть нужно каждый из пунктов следующего списка обернуть в ссылку:

1. About us 2. Catalog 3. Contacts

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

Результат:

About us Catalog Contacts

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

Каждой команде Emmet можно назначить любое удобное сочетание горячих клавиш. В Sublime Text 2 для этого нужно открыть в папке плагина файл Default(Windows).sublime-keymap (для Windows), найти нужную команду и назначить для нее другое сочетание клавиш. Для Notepad++, как было сказано ранее, настройка горячих клавиш осуществляется в меню «Опции» > «Горячие клавиши» на вкладке «Plugin commands».

Можно в файле Emmet.sublime-settings определить параметр extensions_path, и Emmet будет подгружать все.js-файлы автоматически при запуске Sublime Text 2.

Все расширения аббревиатур и сниппеты Emmet можно редактировать в файле snippets.json , там же можно добавлять новые. Это может быть полезным, если разработчику не нужны некоторые атрибуты тегов, которые создаются по умолчанию, или, наоборот, всегда нужны те, которые не создаются.

Чтобы скорректировать результаты выполнения некоторых команд, нужно создать в папке расширений файл preferences.json , в котором указать значения опций, полный список и описание которых перечислено в документации: http://docs.emmet.io/customization/preferences/ .

Например, встроенный генератор градиента, о котором шла речь в разделе «Работа с CSS», не поддерживает градиенты для Internet Explorer. Это можно исправить, сделав небольшую настройку в preferences.json :

{ "css.gradient.prefixes": "webkit, moz, o, ms" }

К трём префиксам для градиента, которые были установлены по умолчанию, мы добавили еще один - «ms». Результат работы генератора будет выглядеть таким образом:

Background-image: -webkit-gradient(linear, 0 0, 0 100%, from("555"), to("666")); background-image: -webkit-linear-gradient("555", "666"); background-image: -moz-linear-gradient("555", "666"); background-image: -o-linear-gradient("555", "666"); background-image: -ms-linear-gradient("555", "666"); background-image: linear-gradient("555", "666")

Теперь код сгенерирует градиент в IE 10, но в браузерах ниже IE 9 он работать не будет. Для того, чтобы задать градиент для старых версий IE, нужно задать такое свойство:

Filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#555555", endColorstr="#666666");

Эту проблему в последней версии Emmet можно решить только написанием сниппета для CSS:

"lg:ie": "filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="${1}", endColorstr="${2}");"

Каким образом будет выглядеть разметка, сгенерированная Emmet, зависит от того, какой doctype был указан на странице. Всего у Emmet существует несколько профайлов для форматирования синтаксиса:

html - профайл по умолчанию, внутри одиночных тегов не ставится слеш, например:
;
xhtml - такой же, но одиночные теги закрываются слешем:
;
xml - профайл по умолчанию, если в редакторе определен синтаксис XML или XSL; каждый тег находится на новой строке с соответствующим отступом, все пустые теги закрываются слешем:
.
line - выводит результат без отступов и в одну строку.

Если данный профайл необходимо каким-либо образом изменить, или применить к одному синтаксису профайл для другого, то для этого нужно в папке расширений создать файл syntaxProfiles.json и произвести там соответствующую настройку.

Например, если нужно, чтобы в html-разметке все одиночные теги были закрыты слешем, можно назначить для html профайл для форматирования xhtml следующим образом:

{ "html": "xhtml" }

Или создать собственный профайл (список доступных свойств в документации: http://docs.emmet.io/customization/syntax-profiles/):

{ "html": { "self_closing_tag": true } }

Пока Emmet недоступен для установки через менеджер плагинов, поэтому необходимо установить его вручную, выполнив следующие шаги:

Установить через менеджер плагинов (Плагины > Plugin Manager > Show Plugin Manager) Python Script
Скачать архив https://github.com/emmetio/npp/raw/master/emmet-npp.zip и распаковать его
Скопировать файл EmmetNPP.dll в C:Program FilesNotepad++plugins
Скопировать папку EmmetNPP в %USERPROFILE%AppDataRoamingNotepad++pluginsconfig
Запустить Notepad++

Устанавливаем Package Control - менеджер пакетов (плагинов): http://wbond.net/sublime_packages/package_control
Открываем командную панель нажатием Сtrl+Shift+P и находим Package Control: Install Package.

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

Так как для Visual Studio 2012 пока не выпущен Emmet v1.0, можно установить только более старую версию - Zen Coding. Поддержку Zen Coding в Visual Studio 2012 осуществляет

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

И так начнем, запускаем Sublime text 3 в верхней части панели инструментов выбираем Preferences (Предпочтения) -> Package Control или сочетанием горячих клавиш Ctrl + Shift + pи выбираем данный пункт.

В появившееся поле пишем install Package и вписывает название самого пакета т.е. Emmet

И ждем окончания установки (перед нами появится текстовое руководство Emmet). Установка окончена, разберемся с принципом использования.

Создаем html документ т.е. внизу справа в Sublime Text должно быть написано HTML, если там какое то другое значение плагин не сработает!

Развернем самую простую разметку html документа для это вводим! знак и нажимаем Tab

и сразу получаем вот такую разметку

Как написать быстро тег?

Пишем название тега без всяких скобок просто div или ul и нажимаем Tab, emmet сам понимает как развернуть тег.

Как добавить класс тегу?

Класс добавляется через точку после названия тега т.е. указываем название тега например span.название класса и клавишу Tab. Это еще не все 🙂 Если нам необходимо добавить сразу несколько divов просто пишем div*5 и клавишу Tab, можно указывать с классами.

Как сделать вложенность?

Вложенность тегов осуществляется с помощью оператора > т.е. div>a мы получим , такая конструкция div*5>a создаст нам пять с вложенными в них тегами . Для добавления тега в конец конструкции используется оператор + т.е. div+p будет потом за ним. Для перехода на уровень выше необходимо использовать оператор ^

Как задать содержимое внутри тега?

Для этого используется {} скобки т.е. div+p{Привет мир} после нажатия Tab получим

Привет мир

, а () скобки используются для группировки элементов

Как добавить тегу атрибут id?

Для задания id в emmet используем #, div#firs_id.first_class получаем . Для задания любых других атрибутов используются квадратные скобки — внутри них указываются необходимые атрибуты.

Есть функция инкремента, например нам необходимо заполнить id тега a от 1 до 5 для этого используем следующую конструкцию div>a#$*5 в результате чего все id тега a заполнятся значениями от 1 до 5

Хочу еще добавить что Emmet умеет работать и с CSS таким же образом, только в Sublime Text должен быть выбран синтаксис CSS, Emmet знает все CSS свойства и достаточно написать первую букву свойства и нажать Tab или еще можно указать первую букву и необходимое значение например m20 + Tab выведет следующий результат margin: 20px;

У кого если вдруг появились какие-то вопросы задаем их в комментариях с радостью отвечу на них.

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>

Привет, много уже было написано про Sublime Text. В своем блоге я писал про Sublime Text 2. Сейчас Sublime Text 3 уже вышел из альфа версии (альфа — означает — новая и крайне не стабильная версия), и перешел в бету (бета — все еще не стабильная, но уже предназначена для тестирования, после беты обычно идет официальный релиз). И я решил полностью разобраться с Sublime Text 3 (далее в тексте ST3).

Если вы собираетесь установить SublimeText3 то эта самая полная инструкция для вас. Здесь я опишу все что связано с этим редактором, а умеет он действительно многое.

Сперва я удалил из системы ST2 и все его следы. Также удалил node.js и npm который был с ним в паре. Так как я намерен заново — правильно и грамотно настроить компиляцию less, а затем и saas файлов, через sublime. Но об этом позже.

Часть 1. Установка и настройка Sublime Text 3Скачиваем и устанавливаем Sublime Text 3

Если вы еще не в курсе, Less — это основанный на JavaScript CSS препроцессор. Это код который компилируется в CSS. Существуют разные способы компиляции less в css: Grunt , Guard , и Less.app . Однако возможно вы не хотите, или вам не нужно использовать дополнительные инструменты, и хочется все сделать прямо в редакторе кода. Ниже я привел инструкцию которая подойдет пользователям Windows (я сам делал установку по ней, и также для mac ОС.)

Устанавливаем Node.js

Устанавливаем NPM (устанавливается вместе с Node.js)

Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd

Установим плагин Less2Css и SublimeOnSaveBuild

Откроем настройки ST3: Preferences → Settings — Default, и в конец допишем строку:

"lesscCommand": "/usr/local/share/npm/bin/lessc"

Откроем любой.less файл и попробуем его собрать. Просто вносим изменения в файл, и жмем Ctrl+S.

Если возникла ошибка: Unable to interpret argument clean-css … Это произошло потому что плагин clean-css был обособлен, и не входит в пакет less. Поэтому его надо установить отдельно. Установим. Заходим в консоль и пишем:

Npm install -g less-plugin-clean-css

SASS — это другой препроцессор для CSS. Набирает популярность, и уже обгоняет less по распространению использования.

Устанавливаем Ruby
Запускаем консоль, и ставим Ruby Gem gem install sass
Устанавливаем плагин Sass для Sublime Text
Устанавливаем плагин Sass Build для Sublime Text
Устанавливаем плагин SublimeOnSave для Sublime Text
(мы же говорили о этом плагине в инструкции выше)

Теперь добавим настройки в Sublime Text Settings – Default:

{ "filename_filter": ".(sass|scss)$", "build_on_save": 1 }

Также не забудьте при открытом.sass файле зайти и выбрать билд систему в Tools → Build System → SASS Compressed Теперь при сохранении.sass файла будет компилироваться.css.

Jade — это препроцессор для написания html кода, и подобно less или sass для css, он ускоряет и упрощает (для опытных верстальщиков) написание html разметки. Как установить и настроить его работу.

Должен быть установлен node.js с npm (обычно идет в комлпекте с node)
Заходим в консоль и устанавливаем jade командой npm install jade --global
В Sublime Text устанавливаем плагин Jade Build
В Sublime Text открываем.jade файл и выбираем Jade build system
Если вы выполняете всю инструкцию в этом посте, то в настройках Sublime я дополню строку про Save On Build расширением jade и теперь она будет выглядеть вот так "filename_filter": ".(sass|scss|jade)$",
Устанавливаем в Sublime плагин Jade

После этих манипуляций происходит компилирование jade файлов.

Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.