sublime text 3 php emmet
Плагины
Плагины для Sublime Text пишутся на языке Python. Сам по себе язык очень простой и если вы программист, то вам не составит труда его выучить. Если нет, то тоже не беда, так как скорее всего под Вашу задачу плагин уже написан.
Установка плагинов в Sublime Text
На данный момент существует два метода установки плагинов в программу:
Перед тем, как начать инсталлировать плагины нужно установить Sublime Package Control, об этом читаем тут.
Для установки плагинов нужно:
(см инструкцию на 3 скринах)
Рассказывать о том, какие плагины популярны, а какие-нет особого смысла нет, так как в Sublime пишут на нескольких десятках языков программирования и под каждый язык есть свои плагины.
Но так как основная масса людей, выбирающая этот редактор пишет на php мы все же рассмотрим несколько.
Sublime Text Emmet
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.
Вы до сих пор пишите теги 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 структуру, просто напишите знак !
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;
У кого если вдруг появились какие-то вопросы задаем их в комментариях с радостью отвечу на них.
Sublime text 3 php emmet
This plugin is deprecated and no longer maintained, please use new version.
Emmet for Sublime Text
Official Emmet plugin for Sublime Text.
Warning: this plugin may not work at all in some OSes since it written in JavaScript and uses PyV8 and Google V8 binaries to run. If you experience problems or editor crashes please fill an issue.
WARNING: When plugin is installed, it will automatically download required PyV8 binary so you have to wait a bit (see Loading PyV8 binary message on status bar). If you experience issues with automatic PyV8 loader, try to install it manually.
The default value of extensions_path is
Overriding keyboard shortcuts
Sublime Text is a great text editor with lots of features and actions. Most of these actions are bound to keyboard shortcuts so it’s nearly impossible to provide convenient plugin shortcuts for third-party plugins.
If you’re unhappy with default keymap, you can disable individual keyboard shortcuts with disabled_keymap_actions preference of Emmet.sublime-settings file.
Use a comma-separated list of action names which default keyboard shortcuts should be disabled. For example, if you want to release Ctrl+E (“Expand Abbreviation”) and Ctrl+U (“Update Image Size”) shortcuts, your must set the following value:
You should refer Default (Your-OS-Name).sublime-keymap file to get action ids (look for args/action key).
To disable all default shortcuts, set value to all :
Not that if you disabled any action like so and you’re create your own keyboard shortcut, you should not use emmet_action_enabled.ACTION_NAME context since this is the key that disables action.
How to expand abbreviations with Tab in other syntaxes
Emmet expands abbreviations in limited syntaxes only: HTML, CSS, LESS, SCSS, Stylus and PostCSS. The reason to restrict Tab handler to a limited syntax list is because it breaks native Sublime Text snippets.
Go to Preferences > Key Bindings — User and insert the following JSON snippet with properly configured scope selector instead of SCOPE_SELECTOR token:
Emmet plugin allows you to expand abbreviations with Tab key, just like regular snippets. On the other hand, due to dynamic nature and extensive syntax, sometimes you may get unexpected results. This section describes how Tab handler works and how you can fine-tune it.
By default, Tab handler works in a limited syntax scopes: HTML, XML, HAML, CSS, SASS/SCSS, LESS, PostCSS and strings in programming languages (like JavaScript, Python, Ruby etc.). It means:
To fine-tune Tab key handler, you can use the following settings in user’s Emmet.sublime-settings file:
If you’re unhappy with Emmet tab handler behavior, you can disable it: just add «disable_tab_abbreviations»: true into user’s Preferences.sublime-settings file.
Disable automatic vendor prefixes insertion
Устанавливаем emmet на Sublime text
Сегодня коснемся темы emmet в Sublime, установим, сделаем скриншоты, почему может не работать. Вообще emmet – это шикарная вещь! Как я раньше вообще без неё обходился!
Sublime emmet установка.
Sublime emmet установка.
После этого в новом окне ищем passage control – install passage.
Sublime emmet установка.
Далее в поиске забиваем emmet. Он сам его надут см. На скриншоте. Нажимаем на него и должна начаться установка.
Sublime emmet установка.
Зачем нужен emmet!?
Если вы часто занимаетесь программированием, либо любительски либо профессионально, то быстрота – это самое необходимое. И когда у вас есть куча повторяющегося кода, либо просто надо много кодировать, то вы сможете всегда это сделать с помощью горячих клавиш.
Как работает для emmet.
Emmet работает таким образом! К примеру если вы хотите загрузить простую страницу html, достаточно в новой странице набрать восклицательный знак и нажать tab и у вас появится готовая страница.
Либо вам нужен заголовок h2, так и набирайте и нажимайте tab. В общем в процессе использования – знания сами придут.
Кстати очень удобно использовать свой шаблон, для своих страниц – это мы поговорим в следующий раз.
Почему не работает Emmet!?
Вам просто нужно сохранить страницу и тогда он заработает. И после установки, естественно нужно перезагрузить страницу!
Сообщение системы комментирования :
Форма пока доступна только админу. скоро все заработает. надеюсь.