Установка emmet в sublime text 3. Практическое использование Emmet (Zen Coding)

Плагины для 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{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

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 ОС.)

  1. Устанавливаем Node.js
  2. Устанавливаем NPM (устанавливается вместе с Node.js)
  3. Устанавливаем Less Глобально. Открываем Windows консоль и вводим npm install less -gd
  4. Установим плагин Less2Css и SublimeOnSaveBuild

Откроем настройки 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 по распространению использования.

  • Устанавливаем Ruby
  • Запускаем консоль, и ставим Ruby Gem gem install sass
  • Устанавливаем плагин Sass для Sublime Text
  • Устанавливаем плагин Sass Build для Sublime Text
  • Устанавливаем плагин SublimeOnSave для Sublime Text
    (мы же говорили о этом плагине в инструкции выше)

Теперь добавим настройки в 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 разметки. Как установить и настроить его работу.

  • Должен быть установлен 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

После этих манипуляций происходит компилирование jade файлов.

Если нет подсветки кода Jade, то идем в нижний правый угол ST, и там скорее всего написано Plain Text, кликаем по той надписи, и затем выбираем подсветку Jade. Теперь подсветка будет работать.

Описание:
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:
Не требуется установка.
Лечение аналогично установочной.

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

И так начнем, запускаем 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*5>a создаст нам пять
с вложенными в них тегами . Для добавления тега в конец конструкции используется оператор + т.е. div+p будет
потом за ним. Для перехода на уровень выше необходимо использовать оператор ^

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

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

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