Как установить emmet sublime

Сокращения для 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) Линейный градиент (с префиксами)

Источник

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

Вы до сих пор пишите теги html и css свойства вручную? Пришло время это исправить! Сегодня мы поговорим о плагине emmet, который поможет нам в этом.

Для начала его нужно установить. В 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.

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

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

Источник

Sublime Text 4

Скачать Sublime Text 4

Скачать Сублайн текст 4, вы можете с оф сайта sublimetext.com/download, не советую скачивать с сомнительных источников.

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

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

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

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

1. Открываем редактор и переходим в пункт меню «Tools» — «Install Pakage Control…» для установки менеджера пакетов (либо нажимаем сочетание клавиш «Ctrl+Shift+P» в поисковом поле находим «Install Pakage Control» и нажимаем «Enter»). Если менеджер пакетов уже установлен (данного пункта в меню не будет), то переходим в пункт №3.

2. После установки менеджера пакетов появится уведомление, просто нажимаем «ОК».

3. Далее вновь зажимаем на клавиатуре одновременно клавиши «Ctrl+Shift+P» и находим в поисковом поле «Package Control: Install Package», после чего нажимаем «Enter» (или выбираем из списка кликом мыши).

4. Появится новое поле, в котором нужно ввести и найти «LocalizedMenu», далее жмём «Enter» или кликаем мышкой и ждём установки пакета (статус установки можно увидеть снизу, слева).

5. Затем открываем пункт меню «Preferences» — «Languages» — «Русский (ru)».

6. Смотрим интерфейс программы Sublime Text 4, теперь все на русском языке.

Альтернативный вариант русификаций

Скачиваем пакет локализации с github. Открываем архив и распаковываем его содержимое в «c:\Users\Имя_пользователя\AppData\Roaming\Sublime Text\Packages\» (Путь для Windows 7/8/10).

Идем в «c:\Users\Имя_пользователя\AppData\Roaming\Sublime Text\Packages\» и переименовываем LocalizedMenu-master в LocalizedMenu

После чего можно менять локализацию, см. пункт 6.

Установка Emmet на sublime text 4.

У вас должен быть установлен Package Control, см. выше пункты 1-3.

Зажимаем на клавиатуре одновременно клавиши «Ctrl+Shift+P» и находим в поисковом поле «Emmet», после чего нажимаем «Enter» (или выбираем из списка кликом мыши).

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

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

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

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

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

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

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

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

Лицензию можно купить в Справка — купить лицензию. Если не хотите покупать ключ за 99$, то их можно поискать в общем доступе, в гугле или яндекс наберите запрос: Sublime Text 4 и дальше crack, Patcher, Keygen или License Key, лично я опробовал около сотни ключей и не нашёл не одного рабочего. Оказывается сублайн поменял условия лицензирования, поэтому как закончился триал, я его удалил и установил Subline Text 3, а лучше пользуйтесь бесплатны VS code не чем не уступает)

Источник

Как установить Emmet в Sublime Text 3

В этой статье я расскажу о том как установить плагин Emmet в Sublime Text 3, который помогает ускорить написание кода на HTML.

Каждый верстальщик знает, что скорость работы это важное составляющее в любом проекте. Плагин Emmet работает очень просто, вот пример. Чтобы создать блок div с классом allDiv, достаточно ввести div.allDiv и жмем кнопку “Tab”.

Недавно я написал статью, про автоматическое обновление кода в браузере, что позволяет при каждом сохранении файла обновлять вкладку в браузере.Теперь перейдем к установке плагина.

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

Чтобы установить плагин Emmet, переходи в Sublime Text и выполняем все описанные ниже шаги.

1. Нажимаем сочетание клавиш “Ctrl+Shift+p”, появится окно в которое вводим “Package Control”.

2. В появившемся списке выбираем “Package Control: Install Package” и ждем появления списка.

3. В поле вводим “Emmet” и жмем и выбираем первую вкладку как на картинке.

4. Откроется новый файл и это значит что все успешно установилось, его можно закрыть.

5. Проверяем работу, для этого вводим в файл “!” и жмем кнопку “Tab”. Если появилась разметка, значит все установилось успешно.

Все действия происходят в русской версии Sublime Text, если вы хотите так-же перевести на Русский Язык, смотрите эту статью в которой за 1 минуту вы сможете поменять язык.

Источник

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

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

Установка Emmet.

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

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

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

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

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

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

Пишем название тега без всяких скобок просто 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;

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

Источник