Настроить emmet для sublime text 3

Устанавливаем emmet на Sublime text

Сегодня коснемся темы emmet в Sublime, установим, сделаем скриншоты, почему может не работать. Вообще emmet – это шикарная вещь! Как я раньше вообще без неё обходился!

Sublime emmet установка.

Начнем с установки emmet для программы Sublime. Идем в preference — passage control . Если у вас нет passage control.

Sublime emmet установка.

После этого в новом окне ищем passage control – install passage.

Sublime emmet установка.

Далее в поиске забиваем emmet. Он сам его надут см. На скриншоте. Нажимаем на него и должна начаться установка.

Sublime emmet установка.

Зачем нужен emmet!?

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

Как работает для emmet.

Emmet работает таким образом! К примеру если вы хотите загрузить простую страницу html, достаточно в новой странице набрать восклицательный знак и нажать tab и у вас появится готовая страница.

Либо вам нужен заголовок h2, так и набирайте и нажимайте tab. В общем в процессе использования – знания сами придут.

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

Почему не работает Emmet!?

Вам просто нужно сохранить страницу и тогда он заработает. И после установки, естественно нужно перезагрузить страницу!

Сообщение системы комментирования :

Форма пока доступна только админу. скоро все заработает. надеюсь.

Источник

Плагины

Плагины для Sublime Text пишутся на языке Python. Сам по себе язык очень простой и если вы программист, то вам не составит труда его выучить. Если нет, то тоже не беда, так как скорее всего под Вашу задачу плагин уже написан.

Установка плагинов в Sublime Text

На данный момент существует два метода установки плагинов в программу:

1. Варварский. Достаточно просто скачать из интернета необходимый плагин и закинуть его в соответствующую папку. Но это не корректные метод из-за этого мы на нем останавливаться не будем.
2. Через Sublime Package Control

Перед тем, как начать инсталлировать плагины нужно установить Sublime Package Control, об этом читаем тут.

Для установки плагинов нужно:

1. открыть командную строку, нажав комбинацию клавиш: ctrl+shift+p ;
2. в строчке вводим Install Package и жмем ентер;
3. снизу в открывшемся поле вводим название плагина, например: emmet;
4. нажимаем enter и ждем конца установки, там появится экран с кучей строчек;
5. Готово.

(см инструкцию на 3 скринах)

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

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

Sublime Text Emmet

Чуть ранее в примере мы установили этот плагин. Он очень сильно ускоряет разработку сайтов. Для того, что бы понять, что он делает в правом нижнем углу вместо Plain Text выберим PHP. Теперь в редакторе ставим ! и нажимаем TAB.

Еще можно ввести: .wrapper нажимаем tab, как видем у нас появился div.

Для того, что бы сделать меню на 10 ссылок можно написать следующее, после чего нажать tab: .menu>ul>li*10>a[href=#]

В левой части «!+tab» , в центральной части «.wrapper + tab», а в правой части «menu>ul>li*10>a[href=#] + 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

У нас Вы можете скачать последнюю версию текстового редактора под все ОС.

Источник

Emmet плагин для sublime text 3

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

Установка Emmet.

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

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

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

Как работает Emmet.

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

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

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

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

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

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

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

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

Вложенность тегов осуществляется с помощью оператора > т.е. div>a мы получим

. Для перехода на уровень выше необходимо использовать оператор ^

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

Для этого используется <> скобки т.е. 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;

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

Источник

Плагин Emmet для Sublime Text.

Вы до сих пор пишите теги 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.

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

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

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

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

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

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

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

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

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

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

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

Lorem ipsum dolor.

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

Источник

Ускоряем верстку сайта с emmet

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

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

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

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

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

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

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

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)

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

Теперь заходим во вкладку Preferences -> Package Control, в списке выбираем Install Package после чего в строке ввода набираем «Emmet» и кликаем на первую запись

После чего требуется перезапустить редактор

Плагин установлен, можно работать!

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

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

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

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

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

meta:vp вывод viewport

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

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

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

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

form:post

inp

select+

tarea

bq

art

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

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

hdr тег header

ftr тег footer

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

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

Правила emmet

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

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

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

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

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

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

#block1+.block2 Id и class

img[title=»картинка»] Вывод атрибутов

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

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

p10 padding: 10px;

pt20 padding-top: 20px;

w20 width: 20px;

wa width: auto;

h20 height: 20px;

mah20 max-height: 20px;

mh20 min-height: 20px;

maw20 max-width: 20px;

mw20 min-width: 20px;

bg+ background: #fff url() 0 0 no-repeat;

bg#f00 background: #f00;

bgc#f00 background-color: #f00;

bgt background-color: transparent

bgi background-image:url();

lg(left, #f00, 30%, #fff) Линейный градиент (с префиксами)

background-image: -webkit-linear-gradient(left, #f00, 30%, #fff); background-image: -o-linear-gradient(left, #f00, 30%, #fff); background-image: linear-gradient(to right, #f00, 30%, #fff);

Источник