Рейтинг: 4.5/5.0 (1878 проголосовавших)Категория: Инструкции
Emmet - (ранее известный как Zen Coding - автор идеи. холивар в комментах на Хабре=) ) является отличным инструментом для веб-разработчика, который значительно ускоряет работу с HTML и CSS!
1. ссылка на документацию: docs.emmet.io
2. ссылка на видео-обзор связки Emmet+Bootstrap3 ( с хорошим русским переводом): www.youtube.com/watch?v=4TkaAXJ-Jww
Как установить Emmet (подробная инструкция)?
Т.к. я использую Sublime Text 2, инструкция для него:
1. Скачиваем Sublime Text . (он бесплатный, бесплатная версия просто иногда просит "пожертвовать"=)
3. После установки закрываем\открываем реактор и нажимаем комбинацию Ctrl+Shift+P (Tools/Command Palette)
4. Пишем install.. - и выбираем в выпадающем списке Package Control:Install Package
5. Далее в открывшемся списке(репозитории) ищем по ключю emmet, и устанавливаем плагин.
6. Перезагружаем редактор и наслаждаемся!
7. Так же рекомендую сразу установить отличный плагин LiveStyle Emmet - аналогичная установка, как описано выше, только в списке нужно найти и установить плагин LiveStyle.
7.1 В Браузере (например Chrome) Установить раcширение LiveStyle.
7.2 Открыть DevTools (F12) на вкладке LiveStyle, связать файлы стилей сайта с открытыми в Sublime Text. - полезная штука! ссылка на Ютуб .
Примеры работы Emmet + Bootstrap:
Указанный ниже кусок кода:
Превратиться в. а вот это я вам советую самим проверить!))
Предлагаю в эту ветку добавлять код готовых шаблонов, элементов и т.д
15 декабря, 2014, обновлено 10 августа, 2016
Список установленных плагинов для sublime text 3 Установленные плагиныНастройки в файле C:\Users\maksim\AppData\Roaming\Sublime Text 3\Packages\User\Terminal.sublime-settings. для терминала MINGW32 поставляемого c «Домашней страницы проекта Git »:
Желаемого можно добиться по разному, ещё прокатывает вот так (без параметров):
А для терминала поставляемого вместе с Cygwin:
AutoFileNameПлагин имеет недостаток, под виндой не определяет коренвую папку проекта и после печати слэша img src="http://www.zlatov.net/" в выпадающем списке представлены список имен жестких дисков C:/, D:/…
Однако плагин позволяет манипулировать относительными путями что немного спасает ситуацию.
Вместо данного плагина рекомендуют использовать FuzzyFilePath, FuzzyFilePath неплох, но своеобразен, оставил пока оба плагина.
GitGutter Установка winwin + r → cmd → git --exec-path → добавляем путь к Переменные среды → Системные переменные → Path.
После этого добавляем плагин через PackageControl.
SublimeCodeIntelПарсил yii2 минуты три, хотя SSD…
PyV8
Вы до сих пор пишите теги html и css свойства вручную? Пришло время это исправить! Сегодня мы поговорим о плагине emmet. который поможет нам в этом.
Emmet - это плагин. который позволит вам писать html и css в десятки раз быстрее. Многие уже используют его в своих проектах, но многие о нем еще ничего не знают, и сегодня я попытаюсь исправить это.
Для начала его нужно установить. В 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. Делается это точно так же, как и в css. класс с помощью .. а id с помощью #
В результате получим
То же самое и с id
Заметьте, что я не писал слово div. а просто ставил точку или решетку и писал нужный мне класс или id. Дело в том, что мы можем пропускать название тега и тогда emmet сам будет додумывать, какой же тег поставить. В большинстве случаев это будет div. но, если вы, например, напишите так внутри тега ul. то тег будет li с нужным классом или id.
Если вы хотите сами ввести какой-то атрибут, то напишите его в квадратных скобках
Чтобы вкладывать теги внутри других тегов, нужно использовать знак больше
С помощью символа * можно указать, сколько таких тегов нам нужно
Вот, что у нас получится
Если вам нужно добавить тег на том же уровне, используйте знак +
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
С помощью символа $ мы можем указать, что каждый тег следует нумеровать автоматически
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
Если вам нужен ведущий ноль, то напишите знак $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 структуру, просто напишите знак !
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
Теперь поговорим о том, как emmet поможет нам в css
Там достаточно просто написать начальные буквы свойства и значение, а потом нажать tab. Например
В результате получим
В некоторых свойствах уже стоят значения по-умолчанию. Например, в свойстве text-align
Но вы можете изменить его, просто написав букву значения после сокращения свойства. К примеру, пусть будет по центру.
Все рассматривать нет смысла. Документацию по плагину emmet вы можете найти здесь: http://docs.emmet.io/cheat-sheet/
В конце стоит сказать, что если вам по каким-то причинам не нравится клавиша 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. Если вы используете другой редактор, то поищите этот плагин для него в интернете. Удачи!
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru )!
Добавляйтесь ко мне в друзья ВКонтакте. http://vk.com/myrusakov .
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy .
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления. Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Что то не работает, когда ввожу install package, ничего не происходит.
Потому что Package Control сначала нужно установить. Для этого перейдите по ссылке: https://sublime.wbond.net/installation#st2 скопируйте весь код, который там дан слева в окошечке. Затем откройте Sublime Text и перейдите в View, а затем Show Console. У вас откроется консоль и вам следует вставить туда скопированный код. После того, как установка завершится, перезапустите Sublime Text.
Спасибо большое помогло.
Одним из наиболее мощных, и при этом простых, редакторов является Sublime Text .
В нём хорошо развита система команд и горячих клавиш. На этой странице размещена «шпаргалка» с плагинами и самыми частыми сочетаниями клавиш, которые сильно упрощают жизнь.
Для наибольшего удобства «шпаргалка» должна быть распечатана и повешена перед глазами, поэтому она сделана в виде 3-колоночного PDF.
Эта шпаргалка – под Mac, для Windows сочетания похожи, обычно вместо Mac-клавиши Cmd под Windows будет Ctrl. А если в сочетании есть и Cmd и Ctrl. то под Windows будет Ctrl + Shift .
Вы часто используете сочетание, но его нет в списке? Поделитесь им в комментариях!
Мои любимые плагины:
Чтобы узнать о плагине подробнее – введите его название в Google.
Есть и другие хорошие плагины, кроме перечисленных. Кроме того, Sublime позволяет легко писать свои плагины и команды.
Emmet это переименованный проект Zen coding. Emmet дает возможность с помощью сокращенний быстро генерировать HTML списки, блоки с классами и id. Также помимо HMTL, можно быстро писать CSS свойства, опять же с помощью сокращений. С одной стороны кажется лишним запоминать лишние сокращения и инструменты, но когда уже втягиваешься, то непривычно писать код без Emmet.
Возможности Emmet (Zen coding)Очень часто приходится писать много html-кода и чем больше его нужно написать, тем выше вероятность ошибки в нем, например незакрытого тега. В этом вам поможет Emmet (Zen coding). В большинстве IDE есть поддержка или плагин для Emmet, вам нужно только выставить горячую клавишу для его выполнения и генерации html-кода.
Так например вы можете написать:
Нажать кнопку выполнения Emmet и это преобразуется в:
Как вы видите мы пишем простые css селекторы, а на выходе получает html с такой же иерархией.
Наиболее приятного в Emmet это генерация html меню. Так например вот этот код:
После генерации станет:
Здесь мы использовали селектор * в Emmet он означает какое количество элементов нужно генерировать. Он работает не только с <li>, но и со всеми другими тегами:
Совместно со знаком доллара это сгенерирует такой вот код:
Давайте вернемся к нашему меню и напишем вот такой код:
Он сгенерует нам целое меню:
Вы можете писать свои теги и делать все что угодно, используя селекторы Emmet:
Я думаю все популярные IDE поддерживают Emmet (Zen coding), но если вы пользуетесь Notepad++, то вам придется установить отдельно Emmet.
Установка Emmet (Zen coding) в Notepad++Скачать плагин для Notepad++ можно здесь:
Закиньте библиотеку Emmet (zen coding) в папку с notepad++.
Для того чтобы установить библиотеку, нужно использовать встроенный менеджер библиотек:
Из списка доступных плагинов отмечаем галочкой Zen Coding - Python и нажимем Install
Если в списке нет плагина Zen Coding - значит ваша текущая версия Notepad++ его не поддерживает. Для этого нужно или установить версию более раннюю с поддержкой Zen Coding, или подождать чтобы данный plugin вышел под текущую версию.
Все, после перезапуска Notepad++ Вы сможете использовать данный плагин. Чтобы обработать код, нужно нажать комбинацию клавиш Ctrl + Alt + Enter. К примеру, чтобы добавить текущий код:
нужно написать a.link>span и нажать комбинацию клавиш Ctrl + Alt + Enter.
Редактор Atom от Github - один из лучших доступных на данный момент редакторов кода. Это быстро развиваемый проект, за последнее время было достигнуто очень многое:
Количество плагинов растет в геометрической прогрессии, на данный момент доступно более чем 750 тем оформления и 2400 пакетов плагинов. Причиной этому послужила расширяемость редактора с помощью веб технологий. Если вы работаете на Node.js Atom будет отличным выбором.
Установить пакет в Atom очень просто, для этого:
В этой статье я опишу десять плагинов для Atom которые сделают его еще лучше.
1. Внешний вид и Seti UIВыбор темы - сугубо индивидуальное занятие, и здесь лучше опираться на свои вкусы и привычки. Но с Seti, Atom выглядит великолепно, тема включает огромный набор иконок для различных типов файлов включая SCSS, LESS, JSON, файлов настроек grunt и gulp и т д. Для более лучшего эффекта тему можно объединить с Monokai.
Как и в Sublime в Atom используется простое управление проектами на основе папок. Расширение Open Recent позволяет с легкостью найти и открыть недавно редактированные файлы.
Если вам нужно что-то более сложное, попробуйте плагин Project Manager https://atom.io/packages/project-manager
3. TODO-showВы запустили Atom, открыли проект, но что же дальше? Todo-show показывает все разбросанные по всему проекту комментарии содержащие слова todo, fixme и changed. Можно также добавить свои регулярные выражения.
Minimap один из самых популярных пакетов Atom. Плагин собирает ваш код в мини карту для более быстрой навигации.
При выделении любого слова в Sublme и Notepad++ все другие его вхождения подсвечиваются. Highlight Selected добавляет эту функцию в Atom. Это особенно удобно в сочетании с мини картой.
Это очень просто, но я не мог жить без автоматического закрытия тегов HTML. Плагин помогает определить каким тегом нужно завершить строчку или блок.
7. PigmentsНаверное вы уже видели превью цветов CSS раньше. Но в Pigments еще больше возможностей, он анализирует цвета, понимает переменные пре-процессора и выполняет функции изменения цвета.
8. LinterLinter - пакет подсветки синтаксиса и проверки ошибок. Он один из лучших, эффективный, быстрый и менее навязчив чем другие конкуренты.
Обратите внимание, Linter основной пакет, который обеспечивает API для других вспомогательных дополнений. На данный момент поддерживается 28 языков. Проверка HTML, CSS, JavaScript работает мгновенно, но все зависит от особенностей установки и последующей конфигурации.
9. ОтступыКодеры никогда не придут к согласию какие отступы использовать, два, три или восемь пробелов. Я обычно использую трех символьную табуляцию. С авто определением отступов вам больше нет о чем волноваться. Можете сделать свой код еще красивее с помощью плагина atom-beautify.
10. РазноеЕще несколько плагинов на последок. Первый - Emmet ранее известный как Zen Code. Позволяет с помощью небольших инструкций создавать развернутые html или css блоки с использованием различных атрибутов.
Если вы создаете веб приложения REST, расширение Atom Rest Client быстрый и удобный инструмент для тестирования. Он не такой мощный как например Postman но все же делает свою работу.
Бонусные плагиныЕсли для вас важно количество https://atom.io/packages/keycount покажет что вы сделали достаточно в течении дня, теперь можно отдохнуть читая комиксы https://atom.io/packages/xkcd-comics или взорвать код в астероиды https://atom.io/packages/asteroids
А вы уже настроили свой Atom? Я не забыл упомянуть ваш любимый плагин?
Автор: Сергей МатийчукОснователь и администратор сайта losst.ru, увлекаюсь открытым программным обеспечением и операционной системой Linux. В качестве основной ОС сейчас использую OpenSUSE. Кроме Linux интересуюсь всем, что связано с информационными технологиями и современной наукой.
Ваше имя тоже может быть здесь. Как? Пишите для нас! Смотрите подробнее как стать автором Losst .
4 марта 2013 в 14:53
Emmet (предыдущее название — Zen Coding) — это набор плагинов для различных популярных текстовых редакторов, используемых для скоростного написания HTML и CSS кода. Синтаксис Emmet довольно прост и не требует больших усилий со стороны разработчика для его изучения, в то же время использование этого инструмента позволяет ускорить процесс написания верстки в несколько раз.
Итак, для написания HTML в Emmet используются 12 типов селекторов:
Рассмотрим на примерах.
Для того, чтобы создать один элемент с атрибутами class и id, необходимо написать:
После набора этой строки нажимаем клавишу Tab (в Notepad++ клавиши Ctrl+Alt+Enter) и получаем результат:
В квадратных скобках можно задавать любые атрибуты тегам. Если необходимо задать их несколько, то они разделяются пробелом, например:
Для некоторых тегов есть еще более лаконичный способ задавать атрибуты, указывая их значения через двоеточие. Например, так можно задавать для элемента input его тип:
Аналогично задаются типы: 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).
Таким же образом можно задавать атрибуты тегов метаданных <link> и <meta>. Вот так можно подключить внешний css-файл:
Остается только исправить значение href.
Файлы .js подключаются аналогично:
Селекторы > и + создают, соответственно, дочерние и соседние элементы, а селектор ^ позволяет подниматься в иерархии на один уровень. Также есть возможность умножать элементы с помощью знака *. Например, следующая строка создаст список с пятью пунктами:
Если необходимо добавить тегам текстовое содержимое, нужно использовать фигурные скобки, например, так:
В Emmet есть еще одна интересная возможность: он позволяет добавлять нумерацию, например, атрибутов множественных элементов с помощью знака $. Нумерация начинается с единицы. Это может оказаться полезным, если, например, необходимо создать большое число элементов с названиями классов, различающимися только цифрой на конце, или выпадающий список, у пунктов которого атрибут value должен нумероваться с единицы:
Результатом выполнения в данном случае будет <select>, содержащий 10 тегов <option> со значениями атрибута value от 1 до 10.
Для сложных конструкций можно применять группировку элементов, используя круглые скобки. Однако эта возможность существует не во всех редакторах, например, она не поддерживается расширением Web Essentials 2012 для Visual Studio.
Шаблоны HTMLEmmet также предоставляет возможность создавать разметку с использованием различных шаблонов HTML, наиболее интересный из них — html:5. Такая команда даст следующий результат:
Условные комментарииС помощью команд cc:ie и cc:noie можно добавить условные комментарии. Команда cc:ie выдает разметку, код внутри которой будет распознаваться только Internet Explorer, cc:noie, наборот, генерирует комментарии, содержимое которых будет доступно только всем остальным браузерам. Результат выполнения первой:
Сокращенные конструкцииСуществует также несколько сокращенных конструкций для создания таблиц и списков: table+, ul+, ol+, dl+, select+. Результаты их выполнения будут такими:
Оборачивание в аббревиатуруВ случае, если часть разметки уже существует, и необходимо дополнить её, не переписывая заново, можно воспользоваться функцией оборачивания. Для этого нужно:
Например, у нас существует следующая разметка:
Необходимо создать внутри div новый элемент div с классом wrap и поместить в него существующий параграф с текстом. Устанавливаем курсор внутри тега <p> или даже закрывающего тега </p>, открываем диалог и пишем там:
Результат будет таким:
Подобным образом можно оборачивать не только отдельные элементы, но и множественные, при этом даже необязательно, чтобы они были одинаковыми. Для этого нужно выделить тот набор элементов, в котором каждый элемент должен быть обернут, и в окне команды с помощью селектора * указать, какой элемент обертки нужно размножить. Например, есть div, в котором находится несколько параграфов:
Допустим: через некоторое время разработчику понадобилось, чтобы каждый из этих параграфов находился внутри ссылки, которая, в свою очередь, находится внутри пункта <li> списка <ul>. Выделяем все параграфы, нажимаем соответствующие клавиши и в открывшемся окне пишем:
В результате получим следующий код:
Удаление теговС помощью Emmet можно упростить процесс удаления ненужных тегов. Достаточно установить курсор на тот тег, который необходимо удалить, и вызвать команду нажатием клавиш Ctrl+Shift+; (Sublime Text 2) — удалится не только открывающий тег, но и закрывающий, а также строки, на которых они находились. В Notepad++ нет горячих клавиш по умолчанию для этой команды, но их можно настроить в меню «Опции» > «Горячие клавиши». В открывшемся окне выбрать вкладку «Plugin commans» и назначить там комбинацию клавиш для команды «Remove tag».
Работа с CSSДля быстрого написания CSS кода в Emmet существует большой набор специальных сокращений свойств и их значений. Самый простой и эффективный способ использования этих сокращений — писать аббревиатуры, состоящие из первых букв свойств и их значений, например, сокращение tdn развернется как:
Точно такой же результат дадут записи td-n и td:n.
Если нужно указать несколько значений для свойства, это можно сделать через знак дефиса:
Подобным образом задаются и отрицательные значения:
Если после числовых значений свойств не указывать единицы измерения, то по умолчанию автоматически выставляются пиксели, за исключением случая, когда значения нецелые — тогда выставляются em. Также существует несколько сокращений для единиц измерения: вместо % можно писать p, вместо em — e, а вместо ex — x.
Например:
Если добавить в конец аббревиатуры восклицательный знак, то к свойству будет добавлено значение !important, например:
Однако наиболее интересная возможность для работы с CSS, которую предоставляет Emmet — это создание свойств с вендорными префиксами. Для ряда таких свойств (border-radius, transform и т. д.) автоматически создаются копии со всеми необходимыми вендорными префиксами. Так, например, аббревиатура brs5 будет расширена следующим образом:
Также Emmet значительно облегчает процесс написания стилей для элементов с градиентом. Для этого используется специальная аббревиатура lg (или linear-gradient), после которой в круглых скобках указываются параметры градиента:
Для редактирования значений в уже написанных свойствах с вендорными префиксами можно воспользоваться командой обновления значения (горячие клавиши в Sublime Text 2 — Ctrl+Shift+R). Сначала нужно исправить значение в одной из строк, затем вызвать команду, и данное значение обновится во всех копиях этой строки.
Математические вычисленияEmmet позволяет выполнять несложные арифметические вычисления прямо во время написания HTML или CSS кода, не используя какие-либо сторонние калькуляторы. Нередко возникают ситуации, когда необходимо вычислить значения отступов, ширины элементов и других значений; данная особенность освобождает разработчика от необходимости переключаться между окнами редактора и калькулятора. Поддерживаются операции сложения, вычитания, умножения и деления. В Sublime Text 2 горячие клавиши для этой операции — Ctrl+Shift+Y, в Notepad++ по умолчанию горячих клавиш для этой команды нет, необходимо задать их самому (меню «Опции» > «Горячие клавиши»).
В каких случаях стоит использовать EmmetВ перечисленных выше примерах может быть не вполне очевидна разница между написанием кода с использованием Emmet и без него. Однако его преимущества становятся очевидны, когда возникает необходимость написания большого количества однотипного кода с многократным повторением одних и тех же элементов. Как правило, даже если прибегать к методу копирования и вставки повторяющихся участков, процесс занимает довольно длительное время, вдобавок есть возможность запутаться.
Например, необходимо сделать таблицу из пяти строк и пяти столбцов, в первой колонке должна быть нумерация строк (от 1 до 5). Такая разметка создается при помощи одной небольшой строки:
Результат (37 строк кода):
Многие плагины, используемые разработчиками, требуют определенной разметки тех элементов, к которым они подключаются. Зная заранее о том, какую структуру необходимо создать, гораздо удобнее сделать это сразу, одной командой. Так будет выглядеть создание разметки виджета «Accordion» популярной библиотеки jQuery UI:
Или виджета «Tabs»:
ФильтрацияВ Emmet есть возможность изменять генерируемый код при помощи различных фильтров. Фильтр включается в конце аббревиатуры, после вертикальной черты. Существуют следующие фильтры:
Без фильтра аббревиатура
развернется следующим образом:
Если добавить фильтр |haml, получим разметку в виде HAML-кода:
Добавим в предыдущий пример фильтр |e:
Пусть нужно каждый из пунктов следующего списка обернуть в ссылку:
Список нумерованный, и, если бы количество пунктов было в нем гораздо большим, то процесс удаления номеров занял бы значительное время. Вместо этого можно применить команду оборачивания тегов, описанную выше, добавив в конце фильтр |t:
НастройкаПоскольку в плагинах 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 :
К трём префиксам для градиента, которые были установлены по умолчанию, мы добавили еще один — «ms». Результат работы генератора будет выглядеть таким образом:
Теперь код сгенерирует градиент в IE 10, но в браузерах ниже IE 9 он работать не будет. Для того, чтобы задать градиент для старых версий IE, нужно задать такое свойство:
Эту проблему в последней версии Emmet можно решить только написанием сниппета для CSS:
5. Настройка синтаксисаКаким образом будет выглядеть разметка, сгенерированная Emmet, зависит от того, какой doctype был указан на странице. Всего у Emmet существует несколько профайлов для форматирования синтаксиса:
Если данный профайл необходимо каким-либо образом изменить, или применить к одному синтаксису профайл для другого, то для этого нужно в папке расширений создать файл syntaxProfiles.json и произвести там соответствующую настройку.
Например, если нужно, чтобы в html-разметке все одиночные теги были закрыты слешем, можно назначить для html профайл для форматирования xhtml следующим образом:
Или создать собственный профайл (список доступных свойств в документации: http://docs.emmet.io/customization/syntax-profiles/ ):
Установка 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 осуществляет расширение Web Essentials .
Привет дорогие друзья. На носу у нас Новый Год. Скоро ко всем в гости придет пьяный (тьфу-тьфу-тьфу. ) Дед Мороз и будет дарить подарки и дышать перегаром. Вот и я решил не отставать (не в плане перегара) и сделать вам пару приятных сюрпризов перед праздниками. Потому как после, всем будет не до моих уроков. Как, впрочем, и мне.
Сегодня я собираюсь "угостить" Вас хорошим видеокурсом по очередной программе для разработки сайтов. Речь пойдет о редакторе Brackets. Для тех, кому влом читать мою скучную писанину - можете перемотать страничку вниз и приступить к просмотру. Все уроки выложены на нашем канале Master-CSS.
Для начала о названии и логотипе. Brackets переводится как [кавычки]. Именно их мы видим на логотипе. Недавно я у себя тоже логотип сменил. Он более наглядный, а главное сразу отражает суть нашего сайта, как ресурса о создании сайтов. То же самое и здесь - идеально отражает суть редактора кода, как мне кажется.
Adobe Brackets, да да вы не ослышались - эту программу представляет очень известная в наших кругах компания Adobe. Именно с их легкой подачи приступили к разработке сего софта. Однако сначала он был известен под названием Edge Code. Так что если вас спросят, знайте - это одно и тоже.
Я наблюдал за его развитием с самого зарождения. Вначале было море. глюков. Редактор почти всегда начинал тупить после установки нескольких плагинов, а в некоторых моментах вообще зависал и переставал работать. В общем, в тот момент он прожил у меня на компьютере недели две. И когда я стал замечать, что при работе с ним постоянно хочу "ляснуть кулачищем" по клавиатуре - снес от греха подальше.
Чем мне приглянулся Brackets?Те, кто следят за моей рассылкой, знают, что пару месяцев назад мы выкладывали видеокурс по SublimeText 3. И могут не понять, какого лешего я вообще обратил внимание на эту недоработанную программу, если есть такая замечательная альтернатива? А вот почему:
Первая ассоциация, которая у меня была при открытии софта - блин, да это же русский Sublime! Программа поддерживает множество языков, и вы можете легко скачать Brackets на русском прямо с оффсайта. И она невероятно напоминает SublimeText.
Второе, удобство работы. Конечно, на тот момент всё убивали глюки. Но ведь программа была еще на стадии тестирования и разработки. И косяки я просто не учитывал. Потому что дизайн там красивее и продуманнее, особенно для новичков. Есть кнопки, менюшки и другие плюшки юзабилити. Вроде и минимализм остался, и в то же время удобно до чертиков.
Третье, оригинальные идеи, которых я не встречал в SublimeText, да и других редакторах. Интерактивный просмотр и подсветка элементов при верстке, быстрое редактирование, подсказки цвета, встроенная система справок, и многое другое. Особенно меня интересовала парочка плагинов. Об этом я расскажу в конце статьи, в разделе - "Плюшки редактора Brackets" .
В-четвертых, он полностью бесплатен и есть русская версия и свободно скачивается с официального сайта brackets.io. Как мне кажется, Adobe специально все это замутила, чтобы вытеснить с рынка SublimeText. Уж очень он стал популярный.
Так же есть русская версия скачать можно по ссылке: Brackets скачать русскую версию
В-пятых, всего остального тоже навалом
- Здесь и мультиплатформенность. Можно спокойно "спионерить" Brackets как для Windows, так и для других ОС. От части это благодаря тому, что редактор разработан на HTML, CSS и JS. А они работают везде.
- И множество различных плагинов и расширений. Которые позволяют полностью настроить Brackets под свои нужды.
- И куча тем оформления всевозможных цветов и тонов. На любой вкус, так сказать.
Вот такие пироги. И всю эту бочку меда портили лишь глюки, которые не давали работать в своё удовольствие.
И вот, наконец-таки появился свет в конце туннеля - я дождался заветного релиза версии 1.0. Быстренько скачав Brackets на свой компьютер и погоняв его вдоль и поперек пару дней, понял: различие между старой и новой версией, как между небом и землей.
Вот так у меня и родилась идея записать видеокурс. Что, собственно говоря, было сделано и преподнесено сейчас прямо на блюдечке с золотой каемочкой.
Обучение, как у нас принято, начинается с самого нуля. Вначале мы скачиваем и устанавливаем программу. Затем разбираем настройки Brackets и знакомимся с его интерфейсом.
После начинаем устанавливать и разбирать по очереди расширения и плагины Brackets, которые мне понравились больше всего за время работы. Поверьте, этому редактору есть чем вас удивить. Вы останетесь довольны.
Встречайте, смотрите и применяйте.
Редактор Brackets - видеокурс
(ребята, спасибо Вам большое за интерес, и за то, что не забывайте ставить лайки и подписываетесь на наш канал. Я вас обожаю! )
Я планировал записать маленький обзор из пары уроков, а в итоге получилось вот это чудовище
Список уроков по BracketsBrackets – настройки и фишки
Brackets – плагины и расширения
А сейчас, как и обещал.
Плюшки редактора BracketsВ начале давайте пробежимся по плюсам самой программы, а затем затронем "особенные" расширения и плагины, от которых я просто балдею.
Интерактивный просмотр (Live Preview)
Первое, что стоит отметить, это функцию Интерактивного Просмотра, или, как многие её называют - живой просмотр. Благодаря ей вы можете наблюдать за изменениями сайта, прямо во время верстки страницы. Обратите внимание, что для работы требуется браузер Google Chrome. Именно в нем открывается ваш сайт и показываются все изменения.
Знаю, знаю, сейчас вы скажите - то же самое есть и в SublimeText! Однако прошу учесть тот факт, что там для этого надо выполнять каждый раз довольно таки не простые "танцы с бубном" , прежде чем все начнет работать. А здесь у нас все из коробки. Как поется в одной песне: Нажми на кнопку, получишь результат.
На данный момент интерактивный просмотр работает в HTML и CSS файлах. А вот при редактировании javascript - придется сохранятся.
Быстрое редактирование (inline editors)
Очень удобная штука. Суть в том, что вы можете править CSS и JS прямо из HTML документа. Не переключаясь между файлами. Поверьте, времени экономится просто огромное количество. А про удобство и комфорт работы вообще молчу. Все можно делать из одного файла.
Вы просто выбираете нужный тег, жмете CMDCTRL+E и у вас открывается специальное окно. В котором можно внести стили для этого селектора. При этом можно редактировать, как уже существующие стили, так и завести новые. Там же доступно переключение между CSS файлами, если у вас их несколько.
В любом случае - рекомендую погонять. Останетесь довольны.
Позволяет просматривать цвета, которые используются в коде. Если в других приложениях надо открывать какую-нибудь программу или запустить плагин, чтобы узнать какой цвет используется. То здесь просто наведите курсор мыши на нужный код цвета, и Brackets сразу покажет вам его.
А в самом видеокурсе, мы еще установим парочку интересных браузеров, которые значительно расширят и облегчат работу с цветом. В общем - сами все увидите.
Эта фишка мне всегда нравилась в Dreamweaver. Не знаю, как сейчас, но когда-то давно она в нем присутствовала.
Если вы хотите подключить какой-то файл, стили, скрипты, картинки - не важно. Brackets автоматически подскажет вам не только путь, но и имя файла. Очень удобно!
Плагины и расширения Brackets (самые самые):Я затрону здесь только самые интересные с моей точки зрения. В скобочках я буду указывать номер урока, в котором мы рассматриваем данный плагин. В самом курсе разбирается еще куча интересных и полезных штук. Смотрите его!
Начну именно с него, поскольку, скорее всего, вы и так слышали о нем еще из курса по SublimeText.
Этот плагин позволяет быстро набирать HTML и CSS. По факту, если научиться им грамотно пользоваться, то ваша писанина ускориться раз этак в 10. Это расширение из разряда "Must Have". которое должно стоять в каждом редакторе.
Extract for Brackets (Preview) (27, 28)
Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета. То есть, в программу Photoshop залазить уже не надо.
Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.
Это нельзя описать словами, можно только увидеть и понять всю масштабность задумки. Реально КРУТО!
Response for Brackets (33)
Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.
Все сделано стильно и удобно. При включении создает отдельный файл стилей, куда записываются все изменения. По окончании работы его надо просто подключить к файлам сайта.
Но есть один момент, куда ж без него родимого . Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.
Баги и глюки редактора Brackets.Напишу просто свое мнение за время работы. Так как я в нем уже наковырялся, и кое-что могу сказать определенно.
Во-первых - никогда не ставьте сразу несколько плагинов. Особенно это касается тех, которые не будут описываться в видеокурсе. Просто некоторые из них работают криво с новой версией редактора. И он может начать глючить.
Таких мало, но все же. Всегда придерживайтесь такой схемы: Поставили плагин - погоняли на редакторе - если все работает, ставим следующий.
Потому что иногда человек поставит кучу плагинов и потом поди угадай, который ломает работу Brackets.
Во-вторых - как только установите программу, в ней будет проблема с русским шрифтом. Смотреться он будет "страшновато". Все дело в шрифте по умолчанию, который ставится после установки. Достаточно просто поменять шрифт текста и все будет окей. Как это делать - смотрим урок №2.
В-третьих, у некоторых учеников редактор почему-то не работал, когда они его ставили на системный диск. Не знаю в чем проблема, возможно не хватало прав администратора или драйверов. Поэтому здесь я всегда даю 3 совета:
Здесь, наверное, все, что я хотел сказать. Если найдете какие-нибудь интересные плагины, или наоборот плагины, которые портят работу - пишите в комментариях. По одним запишу новые видео, а другие занесем в черный список, что бы люди не обжигались.
Спасибо за внимание, жду ваших отзывов в комментариях.
PS: реально, задолбался писать эту статью. Проверил уже три раза - глаза на лоб лезут . Если найдете баги, очепятки, или неправду - пишите, поправлю.
PSS: надеюсь, обзор вам понравился
Golovkin | 17 июня 2015 в 11:14:21
Спасибо Серега за проделанную работу!
Ты рассмотрел много полезных фишек и я до самого конца надеялся, что найду в твоем курсе ответ на давно волнующий вопрос.
В notepad и sublime, есть отличная фишка, когда без копи-паст можно выделенный код с помощью KTRL перетаскивать в любое место, но в brascets, как не старался не чего подобного не нашел.
Может есть какой плагин? Или прописать, что надо?
Будь другом помоги!
Golovkin | 17 июня 2015 в 17:46:42
Серега прошу прощения за ошибки в словах ctrl и brackets.
На мой вопрос можешь не отвечать, сегодня ответ сам случайно нашелся!
И так, если кто привык перетаскивать выделенный текст с помощью лев.кнопки мыши и ctrl, а в brackets по умолчанию такое не возможно и плагинов подходящих тоже нет, необходимо сделать следующие:
В файл предпочтений brackets.json (Отладка -> Открыть файл настроек) добавить свойство "dragDropText": true (после true нужно поставить запятую) и все будет работать как в sublime и notepad++.
Sergiy | 7 апреля 2016 в 01:05:31
Спасибо вам большое. Я долго ломал голову, гуглил, искал настройки, плагины; реально неудобно так редактировать код: без возможности перетащить выделенный кусок текста. я даже хотел на Sublime возвращаться.
tarik | 17 июня 2015 в 20:15:31
1.Я по ошибке удалил файл index.html и теперь не могу продолжить обучение.
2.Я не могу начать свой сайт, по простой причине, не умею (или не понимаю) как создавать новый файл index.html. Таким образом что-бы он уже просматривался в браузере.
- чего я только не создавал: и папки, и что попало. Но файла: index.html создать не могу, и в учебном материале его нет.
Всем Привет. Почитал твою Сережа промо-статью, поставил "ЭТО" так называемое =из коробки= с неким подобием Whl easy_install и pip (в Питоне) установщика пакетов и чуть не заплакал. Такого программного обеспечения надо поискать среди хлама интернет-гуталина. Хоть бы постеснялись Adobe (вроде как бренд) приписывать сюда же.
На Винде пакет ставится в СИСТЕМНУЮ папку, при этом так называемый Код-Архив с проектами Тоже в системной в папке с языковым пакетом. Более защищенные версии Винды НЕ ПОЗВОЛЯЮТ писать на системный диск программам запущенным не от имени админа, таким образом или не можем сохранить проекты, или не работает функционал DrugDrop. А установка папок проектов на не системный диск требует постоянного передергивания =сохранить=. А если у пользователя всего один диск не разбитый на логические диски? Они там у себя в адобе подумали, или когда думали, курили урожай позапрошлого сезона? Пользуйте свежее.
Чего стоит привязка юзверя к принудительному Хрому. Они там что, договорились, или юзали вот тот урожай вместе. Неужели это сложно найти по запущенным процессам или в реестре через АПИ Винды и вызвать браузер установленный по умолчанию, в нем хэндл окна-кнопки рефреш и программно перезагрузить страницу при изменении подвязанных к проекту файлов черезтаймер пускай там каждые 3-4 секунды. А тут через какой-то сомнительный внутри-запущенный сервер, который к тому же долбится в интернет что его блокирует брандмауэр, чтобы кудесники не побывали в гостяз на чужом винте. А известная фраза =у нас управдом друг человека= превращается =А теперь Адоб "Друг" Web-дизайнера=. Отправь свои наработки в .psd- формате на их сервер если хочешь экстрактить картинку. Они наверное думают что злесь вообще одни обезъяны остались и на клавах жонглируют
Андрей | 23 апреля 2016 в 11:07:23
Сергей, приветствую тебя!
Скажи, не планируешь ли ты записать отдельно видео по Emmet?
Как ты говоришь, плюшек и различных вкусностей там очень много. Уверен, что не все о них знают. А такое отдельное видео, в котором бы раскрывались секреты ускоренной верстки в HTML/CSS, стало бы хорошим подспорьем для новичков и не только!))
Спасибо за твой труд!
Леонид | 10 мая 2016 в 09:50:43
Очень жалею,что поздно нашел Ваши работы в инете !
Легко и непринужденно излагается материал на понятном ВСЕМ языке !
Спасибо Вам огромное за Ваш ТРУД. Это относится ко всем Вашим урокам,которые я прошел и которые ,надеюсь, еще пройду !
Поздравляю Вас с Праздником Победы !
Здоровья Вам и Вашим жене и деткам,благополучия и успехов !
