Emmet (предыдущее название - Zen Coding) - это набор плагинов для различных популярных текстовых редакторов, используемых для скоростного написания HTML и CSS кода. Синтаксис 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.
Шаблоны HTMLEmmet также предоставляет возможность создавать разметку с использованием различных шаблонов 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, в котором находится несколько параграфов:
Допустим: через некоторое время разработчику понадобилось, чтобы каждый из этих параграфов находился внутри ссылки, которая, в свою очередь, находится внутри пункта
- . Выделяем все параграфы, нажимаем соответствующие клавиши и в открывшемся окне пишем:
- haml - генерирует результат как HAML-код, включен по умолчанию, если выбран синтаксис HAML.
- html - генерирует HTML-код, включен по умолчанию везде, кроме HAML-файлов
- e - заменяет символы и & соответственно на последовательности и &
- c - добавляет комментарии в код
- s - выводит всю разметку в одну строку
- t - работает только при оборачивании тегов; обрезает маркеры оборачиваемых пунктов списка.
- html - профайл по умолчанию, внутри одиночных тегов не ставится слеш, например:
; - xhtml - такой же, но одиночные теги закрываются слешем:
; - xml - профайл по умолчанию, если в редакторе определен синтаксис XML или XSL; каждый тег находится на новой строке с соответствующим отступом, все пустые теги закрываются слешем:
. - line - выводит результат без отступов и в одну строку.
- Установить через менеджер плагинов (Плагины > 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++ Установка Emmet в Sublime Text 2
- Варварский. Достаточно просто скачать из интернета необходимый плагин и закинуть его в соответствующую папку. Но это не корректные метод из-за этого мы на нем останавливаться не будем.
- Через Sublime Package Control
- открыть командную строку, нажав комбинацию клавиш: ctrl+shift+p ;
- в строчке вводим Install Package и жмем ентер;
- снизу в открывшемся поле вводим название плагина, например: emmet;
- нажимаем enter и ждем конца установки, там появится экран с кучей строчек;
- Готово.
- Expand Abbreviation – Tab or Ctrl+E
- Interactive “Expand Abbreviation” - Ctrl+Alt+Enter
- Match Tag Pair Outward – ⌃D (Mac) / Ctrl+, (PC)
- Match Tag Pair Inward – ⌃J / Shift+Ctrl+0
- Go to Matching Pair – ⇧⌃T / Ctrl+Alt+J
- Wrap With Abbreviation - ⌃W / Shift+Ctrl+G
- Go to Edit Point - Ctrl+Alt+→ or Ctrl+Alt+←
- Select Item – ⇧⌘. or ⇧⌘, / Shift+Ctrl+. or Shift+Ctrl+,
- Toggle Comment - ⇧⌥/ / Shift+Ctrl+/
- Split/Join Tag - ⇧⌘" / Shift+Ctrl+`
- Remove Tag – ⌘" / Shift+Ctrl+;
- Update Image Size - ⇧⌃I / Ctrl+U
- Evaluate Math Expression - ⇧⌘Y / Shift+Ctrl+Y
- Reflect CSS Value – ⇧⌘R / Shift+Ctrl+R
- Encode/Decode Image to data:URL – ⇧⌃D / Ctrl+"
- Rename Tag – ⇧⌘K / Shift+Ctrl+"
- Increment by 1: Ctrl+
- Decrement by 1: Ctrl+↓
- Increment by 0.1: Alt+
- Decrement by 0.1: Alt+↓
- Increment by 10: ⌥⌘ / Shift+Alt+
- Decrement by 10: ⌥⌘↓ / Shift+Alt+↓
- You have to switch your document to one of the syntaxes listed above to expand abbreviations by Tab key.
- With Ctrl-E shortcut, you can expand abbreviations everywhere, its scope is not limited.
- When you expand abbreviation inside strings of programming languages, the output is generated with special output profile named line that generates output as a single line.
- disable_tab_abbreviations_for_scopes - a comma-separated list of syntax scopes where Tab key handler should be disabled. For example, if you want disable handler inside strings of programming languages and HAML syntax, your setting will look like this:
- disabled_single_snippet_for_scopes - a comma-separated list of syntax scopes where Tab handler should be disabled when expanding a single abbreviation. Currently, ST doesn’t provide API for getting list of native snippets. So, for example, if you try to expand a php abbreviation, it will be passed to Emmet which outputs instead of PHP block as defined in native ST snippets. As a workaround, if you’re trying to expand a single abbreviation inside scope defined in disabled_single_snippet_for_scopes setting Emmet will look for its name inside its own snippets catalog first, inside known_html_tags setting second and if it’s not found, it allows ST to handle it and expand native abbreviation, if matched.
- known_html_tags - a space-separated list of all known HTML tags used for lookup as described above.
- Снипеты;
- Автодополнение кода;
- Проверка правильности написания синтаксиса;
- Быстрый поиск;
- Мультивыделение;
- Закладки;
- Множественная правка за счет выделения столбцов;
- Автосохранение и т.д.
- Устанавливаем Node.js
- Устанавливаем NPM (устанавливается вместе с Node.js)
- Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
- Установим плагин Less2Css и SublimeOnSaveBuild
- Устанавливаем Ruby
- Запускаем консоль, и ставим Ruby Gem gem install sass
- Устанавливаем плагин Sass для Sublime Text
- Устанавливаем плагин Sass Build для Sublime Text
- Устанавливаем плагин SublimeOnSave для Sublime Text
(мы же говорили о этом плагине в инструкции выше) - Должен быть установлен 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
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 есть возможность изменять генерируемый код при помощи различных фильтров. Фильтр включается в конце аббревиатуры, после вертикальной черты. Существуют следующие фильтры:
Без фильтра аббревиатура
#content>ul.nav>li*2
развернется следующим образом:
Если добавить фильтр |haml, получим разметку в виде HAML-кода:
#content %ul.nav %li %li
Добавим в предыдущий пример фильтр |e:
#content>ul.nav>li*2|e
Результат:
Пусть нужно каждый из пунктов следующего списка обернуть в ссылку:
1. About us 2. Catalog 3. Contacts
Список нумерованный, и, если бы количество пунктов было в нем гораздо большим, то процесс удаления номеров занял бы значительное время. Вместо этого можно применить команду оборачивания тегов, описанную выше, добавив в конце фильтр |t:
Результат:
About us Catalog Contacts
НастройкаПоскольку в плагинах Emmet предусмотрена поддержка расширений с помощью json- и js-файлов, существует несколько возможностей пользовательской настройки, которые позволяют разработчикам полностью адаптировать этот инструмент под свои нужды:
1. Настройка горячих клавиш командКаждой команде Emmet можно назначить любое удобное сочетание горячих клавиш. В Sublime Text 2 для этого нужно открыть в папке плагина файл Default(Windows).sublime-keymap (для Windows), найти нужную команду и назначить для нее другое сочетание клавиш. Для Notepad++, как было сказано ранее, настройка горячих клавиш осуществляется в меню «Опции» > «Горячие клавиши» на вкладке «Plugin commands».
2. Возможность расширения позволяет добавлять свои команды и фильтрыМожно в файле Emmet.sublime-settings определить параметр extensions_path, и Emmet будет подгружать все.js-файлы автоматически при запуске Sublime Text 2.
3. Добавление и редактирование сниппетовВсе расширения аббревиатур и сниппеты Emmet можно редактировать в файле snippets.json , там же можно добавлять новые. Это может быть полезным, если разработчику не нужны некоторые атрибуты тегов, которые создаются по умолчанию, или, наоборот, всегда нужны те, которые не создаются.
4. Настройка командЧтобы скорректировать результаты выполнения некоторых команд, нужно создать в папке расширений файл 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}");"
5. Настройка синтаксисаКаким образом будет выглядеть разметка, сгенерированная Emmet, зависит от того, какой doctype был указан на странице. Всего у Emmet существует несколько профайлов для форматирования синтаксиса:
Если данный профайл необходимо каким-либо образом изменить, или применить к одному синтаксису профайл для другого, то для этого нужно в папке расширений создать файл syntaxProfiles.json и произвести там соответствующую настройку.
Например, если нужно, чтобы в html-разметке все одиночные теги были закрыты слешем, можно назначить для html профайл для форматирования xhtml следующим образом:
{ "html": "xhtml" }
Или создать собственный профайл (список доступных свойств в документации: http://docs.emmet.io/customization/syntax-profiles/):
{ "html": { "self_closing_tag": true } }
Установка Emmet в Notepad++ на WindowsПока Emmet недоступен для установки через менеджер плагинов, поэтому необходимо установить его вручную, выполнив следующие шаги:
Устанавливаем Package Control - менеджер пакетов (плагинов): http://wbond.net/sublime_packages/package_control
Открываем командную панель нажатием Сtrl+Shift+P и находим Package Control: Install Package.
Нажимаем Enter, и теперь мы должны увидеть список пакетов, доступных для установки. Находим пакет Emmet, нажимаем Enter, чтобы установить, и перезапускаем редактор.
Установка Zen Coding в Visual Studio 2012Так как для Visual Studio 2012 пока не выпущен Emmet v1.0, можно установить только более старую версию - Zen Coding. Поддержку Zen Coding в Visual Studio 2012 осуществляет
Плагины для Sublime Text пишутся на языке Python. Сам по себе язык очень простой и если вы программист, то вам не составит труда его выучить. Если нет, то тоже не беда, так как скорее всего под Вашу задачу плагин уже написан.
Установка плагинов в Sublime TextНа данный момент существует два метода установки плагинов в программу:
Перед тем, как начать инсталлировать плагины нужно установить Sublime Package Control, об этом читаем .
Для установки плагинов нужно:
(см инструкцию на 3 скринах)
Рассказывать о том, какие плагины популярны, а какие-нет особого смысла нет, так как в Sublime пишут на нескольких десятках языков программирования и под каждый язык есть свои плагины.
Но так как основная масса людей, выбирающая этот редактор пишет на php мы все же рассмотрим несколько.
Чуть ранее в примере мы установили этот плагин. Он очень сильно ускоряет разработку сайтов. Для того, что бы понять, что он делает в правом нижнем углу вместо Plain Text выберим PHP. Теперь в редакторе ставим! и нажимаем TAB.
Еще можно ввести: .wrapper нажимаем tab, как видем у нас появился div.
Для того, что бы сделать меню на 10 ссылок можно написать следующее, после чего нажать tab: .menu>ul>li*10>a{menu_$}
В левой части «!+tab» , в центральной части «.wrapper + tab», а в правой части «menu>ul>li*10>a{menu_$} + tab» Думаю, что суть уловили.
Advanced New FileПозволяет создавать новые файлы. Устанавливаем плагин, открываем правый сайд бар (view – side bar –show side bar), далее нажимаем комбинацию клавиш ctrl+alt+n и пишем index.php, как видим файл создался, и это очень быстро и удобно.
BrackethighlighterПо умолчанию если мы стоим, например на каком то div, то очень тяжело заметить закрывающий тег, так как он подчеркнут слишком бледно. Brackethighlighter.
Заметно, что подчеркнут яркой белой линией. Color Highlighter
Подсказывает цвет кода, то есть по умолчанию нам не ясно, какого цвета будет код #224f43, а плагин подчеркивает код тем цветом, которым он является. Более того если мы кликнем по коду, то он выделит его этим цветом.
Gotocss DeclarationПомогает найти и перейти на нужный элемент css прямо из html кода. Нужно просто правой кнопкой мыши кликнуть по элементу, к которому применяется этот стиль и выбрать Go To CSS Declaration
WARNING : When plugin is installed, it will automatically download required PyV8 binary so you have to wait a bit (see message on status bar). If you experience issues with automatic PyV8 loader, try to install it manually .
Available actionsSublime Text is a great text editor with lots of features and actions. Most of these actions are bound to keyboard shortcuts so it’s nearly impossible to provide convenient plugin shortcuts for third-party plugins.
If you’re unhappy with default keymap, you can disable individual keyboard shortcuts with disabled_keymap_actions preference of Emmet.sublime-settings file.
Use a comma-separated list of action names which default keyboard shortcuts should be disabled. For example, if you want to release Ctrl+E (“Expand Abbreviation”) and Ctrl+U (“Update Image Size”) shortcuts, your must set the following value:
"disabled_keymap_actions": "expand_abbreviation, update_image_size"
You should refer Default (Your-OS-Name).sublime-keymap file to get action ids (look for args/action key).
To disable all default shortcuts, set value to all:
"disabled_keymap_actions": "all"
Not that if you disabled any action like so and you’re create your own keyboard shortcut, you should not use emmet_action_enabled.ACTION_NAME context since this is the key that disables action.
How to expand abbreviations with Tab in other syntaxesEmmet expands abbreviations in limited syntaxes only: HTML, CSS, LESS, SCSS, Stylus and PostCSS. The reason to restrict Tab handler to a limited syntax list is because it breaks native Sublime Text snippets.
If you want to abbreviation with Tab in other syntaxes (for example, JSX, HAML etc.) you have to tweak your keyboard shorcuts settings : add expand_abbreviation_by_tab command for tab key for required syntax scope selectors . To get current syntax scope selector, press ⇧⌃P (OSX) or Ctrl+Alt+Shift+P , it will be displayed in editor status bar.
Go to Preferences > Key Bindings - User and insert the following JSON snippet with properly configured scope selector instead of SCOPE_SELECTOR token:
{ "keys" : [ "tab" ], "command" : "expand_abbreviation_by_tab" , // put comma-separated syntax selectors for which // you want to expandEmmet abbreviations into "operand" key // instead of SCOPE_SELECTOR. // Examples: source.js, text.html - source "context" : [ { "operand" : "SCOPE_SELECTOR" , "operator" : "equal" , "match_all" : true , "key" : "selector" }, // run only if there"s no selected text { "match_all" : true , "key" : "selection_empty" }, // don"t work if there are active tabstops { "operator" : "equal" , "operand" : false , "match_all" : true , "key" : "has_next_field" }, // don"t work if completion popup is visible and you // want to insert completion with Tab. If you want to // expand Emmet with Tab even if popup is visible -- // remove this section { "operand" : false , "operator" : "equal" , "match_all" : true , "key" : "auto_complete_visible" }, { "match_all" : true , "key" : "is_abbreviation" } ] }
Tab key handlerEmmet plugin allows you to expand abbreviations with Tab key, just like regular snippets. On the other hand, due to dynamic nature and extensive syntax, sometimes you may get unexpected results. This section describes how Tab handler works and how you can fine-tune it.
By default, Tab handler works in a limited syntax scopes : HTML, XML, HAML, CSS, SASS/SCSS, LESS, PostCSS and strings in programming languages (like JavaScript, Python, Ruby etc.). It means:
To fine-tune Tab key handler, you can use the following settings in user’s Emmet.sublime-settings file:
"disable_tab_abbreviations_for_scopes" : "text.haml, string"
If you’re unhappy with Emmet tab handler behavior, you can disable it: just add "disable_tab_abbreviations": true into user’s Preferences.sublime-settings file.
Disable automatic vendor prefixes insertionIf your workflow already includes an automated task for CSS vendor prefixing (such as Autoprefixer), you can disable Emmet"s automatic vendor prefixes insertion adding this option to your user’s Emmet.sublime-settings file: “json { "preferences”: { “css.autoInsertVendorPrefixes”: false } }
Sublime Text 3 – это текстовый редактор для написания кодов, скриптов различными языками программирования. Позволяет выполнять работу быстро за счет встроенных инструментов и большого набора функций.
Sublime Text 3 – это хорошая «рабочая лошадка» для администраторов и программистов. Так или иначе человек, работающий с кодом оценит выделение, маркировку и обработку нужных фрагментов текста. Программа поддерживает такие языки, как C++, HTML, JavaScript, PHP и многие другие. Для языков, не заложенных в стандартную часть Sublime Text есть масса плагинов, которые поддерживают не только синтаксис, но и весь стандартный функционал типа подсветки и прочего.
Sublime Text 3 скачать бесплатно на русском языке возможно с официального сайта по ссылке ниже сразу после характеристик к приложению.
Для Sublime Text 3 русификатор имеется в комплекте по запасной ссылке, русифицировать программу очень легко и просто достаточно следовать простой инструкции.
Для работы непосредственно с текстом существует ряд преимуществ:
Хотелось бы выделить такую функцию, как множественную правку. Пользователь выделяет нужный фрагмент или расставляет указатели по тексту и редактирует его. При этом каждый указатель выполняет задание так же, как бы он её выполнял один. Это позволяет исправлять сложный код быстро, не за действуя макрокоманды. Также существует много плагинов, расширяющих функционал.
Очень хорошо в Sublime Text организован интерфейс. На выбор пользователю предлагается около 20 цветовых стандартных схем. Взаимодействие приложения с пользователем осуществляется мгновенно, скорость отклика на уровне. В распоряжении имеется полно-экранный режим. Люди, которых отвлекают от работы дополнительные окна оценят по достоинству. Также реализованы мультимедийные панели, которые позволяют работать сразу с несколькими файлами одновременно не включая кучу окон.
В углу экрана имеется очень удобная мини карта. Она представляет из себя колонку из 5-6 экранов с написанным текстом, из-за чего навигация по коду происходит тоже достаточно быстро. Подсветка ближайших парных скобок и ещё множество разных функциональных примочек приятно удивят любого человека, имеющего дело с редактированием или написанием кода.
Настройка осуществляется интуитивно: почти всё настраивается в текстовых файлах. Там указаны настраиваемые параметры и их значение. Также доступно назначение горячих клавиш на самые частые операции.
При написании Sublime Text разработчик Джон Скиннер преследовал идею написать «самый лучший» редактор. На данный момент доступно 2 версии программы. Утилита бесплатна, скачать Sublime Text можно бесплатно на компьютер для Windows 7, 8 и 10.
Будет полезна программистам, верстальщикам, администраторам и другим людям, работающим с кодом. За счет поддержки многих языков она применяется достаточно широко, а многофункциональный и удобный интерфейс сделало её популярной среди «пишущих» людей.
// 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 ОС.)
Откроем настройки 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 по распространению использования.
Теперь добавим настройки в 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 разметки. Как установить и настроить его работу.
После этих манипуляций происходит компилирование jade файлов.
Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.