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

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

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

Вы до сих пор пишите теги 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 , и мы получим следующее

Теперь рассмотрим, как добаблять классы и id . Делается это точно так же, как и в css : класс с помощью . , а id с помощью #

В результате получим

То же самое и с id

Получим следующее

Заметьте, что я не писал слово div , а просто ставил точку или решетку и писал нужный мне класс или id . Дело в том, что мы можем пропускать название тега и тогда emmet сам будет додумывать, какой же тег поставить. В большинстве случаев это будет div , но, если вы, например, напишите так внутри тега ul , то тег будет li с нужным классом или id .

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

Получим следующее

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

Получим следующее

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

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

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

#container>.left+.right

Результат

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

Ul>li.item$*5

Результат

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

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

A{Some text}

Результат

Some text

Если во время верстки вам нужен какой-то текст, то просто напишите 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 поможет нам в css

Там достаточно просто написать начальные буквы свойства и значение, а потом нажать tab . Например

В результате получим

Margin: 10px;

В некоторых свойствах уже стоят значения по-умолчанию. Например, в свойстве text-align

Результат

Text-align: left;

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

Результат

Text-align: center;

Все рассматривать нет смысла. Документацию по плагину 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 . Если вы используете другой редактор, то поищите этот плагин для него в интернете. Удачи!

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

Скачать Sublime Text 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Описание:
Sublime Text - кроссплатформенный, написанный с использованием Python и C++, текстовый редактор и редактор исходного кода. Программа изначально разработана как многофункциональное расширение Vim. Sublime Text не является свободным программным обеспечением или программным обеспечением с открытым исходным кодом, однако некоторые его плагины распространяются по свободной лицензии, а также разрабатываются и поддерживаются сообществом разработчиков.

Что нового:
Added new Syntax Definition file format, .sublime-syntax
New C++, javascript and Rust syntax definitions with improved accuracy and performance
Many other syntax highlighting improvements
OSX: Improved rendering performance, especially on high resolution screens
Improved word wrap behavior
Improved spell check behavior
Improved file indexing behavior with multiple windows open
Themes may now be switched on the fly without artifacts
HTML: Pressing enter when between a tag pair will increase indentation
Some snippets have have been moved into a sub-directories, so custom overrides and key bindings that reference them will need to be updated
show_scope_name command shows the scope in a popup
Package Development: Added "Syntax Tests - Regex Compatibility" build variant for evaluating syntax definition performance
Package Development: Expanded the set of regexes the new regex engine is able to handle
Syntax Definitions: Fixed some cases where pop matches with back references weren"t working correctly
Fixed some Unicode handling issues in Goto Anything
Fixed a scenario where changes to .tmPreferences files weren"t being picked up
Fixed a 3096 rendering performance regression
Fixed a 3096 regression in regular expressions when using \x{nnnn} escapes
Fixed a crash that could occur with an invalid result_file_regex settings
API: Added window.status_message
API: Changes to how plugins are loaded. This should be transparent, but resolves a number of corner cases
API: Updated to Python 3.3.6, and now includes the _ssl module on Linux, plus sqlite3 and bz2 on all platforms
API: Updated OpenSSL to 1.0.2h

Русификация:
Цитата:

Скопируйте все файлы с расширением.sublime-menu из папки SublimeText3RussianMenu в одну из следующих папок в зависимости от вашей операционной системы, подтвердив замену (если папки «Default» по указанному пути нет, то создайте ее):

Windows 7/8 c:\Users\Имя_пользователя\AppData\Roaming\Sublime Text 3\Packages\Default\
Windows XP c:\Documents and Settings\Имя_пользователя\Application Data\Sublime Text 3\Packages\Default\
Windows (портативная установка) \папка_с_установленным_Sublime_Text\Data\Packages\Default\

Активация:
Справка - Ввести лицензию - Вставить ключи из раздачи - нажать Use license

Цитата:
-– BEGIN LICENSE -– Michael Barnes Single User License EA7E-821385 8A353C41 872A0D5C DF9B2950 AFF6F667 C458EA6D 8EA3C286 98D1D650 131A97AB AA919AEC EF20E143 B361B1E7 4C8B7F04 B085E65E 2F5F5360 8489D422 FB8FC1AA 93F6323C FD7F7544 3F39C318 D95E6480 FCCC7561 8A4A1741 68FA4223 ADCEDE07 200C25BE DBBC4855 C4CFB774 C5EC138C 0FEC1CEF D9DCECEC D3A5DAD1 01316C36 -- END LICENSE --

Цитата:
-– BEGIN LICENSE -– Free Communities Consultoria em Informatica Ltda Single User License EA7E-801302 C154C122 4EFA4415 F1AAEBCC 315F3A7D 2580735A 7955AA57 850ABD88 72A1DDD8 8D2CE060 CF980C29 890D74F2 53131895 281E324E 98EA1FEF 7FF69A12 17CA7784 490862AF 833E133D FD22141D D8C89B94 4C10A4D2 24693D70 AE37C18F 72EF0BE5 1ED60704 651BC71F 16CA1B77 496A0B19 463EDFF9 6BEB1861 CA5BAD96 89D0118E -- END LICENSE --

Цитата:
-– BEGIN LICENSE -– Nicolas Hennion Single User License EA7E-866075 8A01AA83 1D668D24 4484AEBC 3B04512C 827B0DE5 69E9B07A A39ACCC0 F95F5410 729D5639 4C37CECB B2522FB3 8D37FDC1 72899363 BBA441AC A5F47F08 6CD3B3FE CEFB3783 B2E1BA96 71AAF7B4 AFB61B1D 0CC513E7 52FF2333 9F726D2C CDE53B4A 810C0D4F E1F419A3 CDA0832B 8440565A 35BF00F6 4CA9F869 ED10E245 469C233E -- END LICENSE --

Цитата:
-– BEGIN LICENSE -– Anthony Sansone Single User License EA7E-878563 28B9A648 42B99D8A F2E3E9E0 16DE076E E218B3DC F3606379 C33C1526 E8B58964 B2CB3F63 BDF901BE D31424D2 082891B5 F7058694 55FA46D8 EFC11878 0868F093 B17CAFE7 63A78881 86B78E38 0F146238 BAE22DBB D4EC71A1 0EC2E701 C7F9C648 5CF29CA3 1CB14285 19A46991 E9A98676 14FD4777 2D8A0AB6 A444EE0D CA009B54 -- END LICENSE --

Цитата:
-– BEGIN LICENSE -– Alexey Plutalov Single User License EA7E-860776 3DC19CC1 134CDF23 504DC871 2DE5CE55 585DC8A6 253BB0D9 637C87A2 D8D0BA85 AAE574AD BA7D6DA9 2B9773F2 324C5DEF 17830A4E FBCF9D1D 182406E9 F883EA87 E585BBA1 2538C270 E2E857C2 194283CA 7234FF9E D0392F93 1D16E021 F1914917 63909E12 203C0169 3F08FFC8 86D06EA8 73DDAEF0 AC559F30 A6A67947 B60104C6 -- END LICENSE --

Цитата:
-– BEGIN LICENSE -– Peter Halliday Single User License EA7E-855988 3997BFF0 2856413A 7A555954 67069B78 06D8CE12 63EAF079 AD039757 79E16D13 C555AD90 465CBE53 10F6DFC4 D3A3C611 411106F8 0CFEB15F 0A7BB891 111F5ED2 C6AA8429 77913528 FA6291A9 B88D4550 F1D6AB13 BF9153BC 91B4DFFE D296CFE0 C1D8EB22 13D5F14E 75A699EC 49EDDC23 D89D0F9B D240B10A A3712467 09DE7870 -- END LICENSE --

Цитата:
-– BEGIN LICENSE -– Fred Zirdung Single User License EA7E-844672 6089C0EC 22936E1A 1EADEBE2 B8654BBA 5C98FFA6 C0FD1599 0364779B 071C74FB EEFE9EAB 92B3D867 CD1B32FE D190269F 6FC08F8F 8D24191D 32828465 942CE58E AECE5307 08B62229 D788560A 6E0AAC4B 48A2D9EE 24FD8CAA 07BEBDF2 28EA86D4 CCB96084 6C34CAD2 E8A04F39 3B5A3CBC 3B668BB7 C94D0B4B 847D6D7F 4BC07375 -- END LICENSE --

Цитата:
-– BEGIN LICENSE -– Wixel Single User License EA7E-848235 103D2969 8700C7ED 8173CF61 537000C0 EB3C7ECB 5E750F17 6B42B67C A190090B 7669164F C6F371A8 5A1D88D5 BDD0DA70 C065892B 7CC1BB2B 1C8B8C7C F08E7789 7C2A5241 35F86328 4C8F70D9 C023D7C2 11245C36 59A730DB 72BDB9A7 D5B20304 90E90E72 9F08CA25 73F49C20 179D938E 5BC8BEDA 13457A69 39E6265F 233767F9 -- END LICENSE --

Цитата:
-– BEGIN LICENSE -– Daniel Russel Single User License EA7E-917420 9327EC62 44020C2A 45172A68 12FE13F1 1D22245B 680892EE F551F8EB C183D032 8B4EDB4B 479CB7E4 07E42EDD A780021D 56BADF42 AC05238B 023B47B1 EBA1B7DE 6DF9A383 159F32AE 04EBE100 1278B1D2 52E81B60 C68AA2E8 F84A20BE FE7990EB 5D44E4B6 16369263 1DDAACBC 280FF19E 86CF4319 0B8615A8 4FF0512E B123B8EC -- END LICENSE --

Цитата:
-– BEGIN LICENSE -– Peter Eriksson Single User License EA7E-890068 8E107C71 3100D6FC 2AC805BF 9E627C77 72E710D7 43392469 D06A2F5B F9304FBD F5AB4DB2 7A95F172 FE68E300 42745819 E94AB2DF C1893094 ECABADC8 71FEE764 20224821 3EABF931 745AF882 87AD0A4B 33C6E377 0210D712 CD2B1178 82601542 C7FD8098 F45D2824 BC7DFB38 F1EBD38A D7A3AFE0 96F938EA 2D90BD72 9E34CDF0 -- END LICENSE --

Цитата:
-– BEGIN LICENSE -– Ryan Clark Single User License EA7E-812479 2158A7DE B690A7A3 8EC04710 006A5EEB 34E77CA3 9C82C81F 0DB6371B 79704E6F 93F36655 B031503A 03257CCC 01B20F60 D304FA8D B1B4F0AF 8A76C7BA 0FA94D55 56D46BCE 5237A341 CD837F30 4D60772D 349B1179 A996F826 90CDB73C 24D41245 FD032C30 AD5E7241 4EAA66ED 167D91FB 55896B16 EA125C81 F550AF6B A6820916 -- END LICENSE --

Установка Package Control:
Package Control - это менеджер дополнений, который работает из интерфейса редактора и позволяет устанавливать дополнения прямо на лету, без перезапуска редактора. Благодаря «умному» fuzzy-поиску весь процесс занимает считанные секунды.

Чтобы установить Package Control, нужно проделать следующее:

Открываем консоль (View -> Show Console или Ctrl+`);
В приглашение (там где мигает курсор) копируем и вставляем следующее:

Код:
import urllib.request,os,hashlib; h = "2915d1851351e5ee549c20394736b442" + "8bc59f460fa1548d1514676163dafc88"; 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)

Жмём Enter;
Немного ждём. Как только увидим в консоле сообщение "plugins loaded", значит Package Control установился;
Чтобы скрыть консоль, выбираем View -> Hide Console (либо через Ctrl+`или Esc);
Чтобы убедиться в том, что Package Control действительно установился, переходим в Preferences -> Package Control (либо через Ctrl+Shift+P).

Особенности Portable:
Не требуется установка.
Лечение аналогично установочной.