Как сделать плагин для sublime text 3
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Sublime Text 3 — продвинутый мультиплатформенный редактор кода. Он имеет огромное количество плагинов, соответственно функционал редактора можно значительно расширить, чем мы и займемся. Прокачаем ваш Sublime Text 3 для web-разработки по полной. Рассмотрим топ 65 лучших плагинов 2020 — PHP, Python, JS, CSS… и их правильные настройки.
Редактор Sublime Text 3 — распространяется по коммерческой лицензии без особых ограничений. Версия без лицензии будет лишь иногда ненавязчиво напоминать о том, что лицензия должна быть приобретена для дальнейшего использования.
Для начала нам нужен установленный PHP в системе и прописанный в Path, для Windows я например использую OSPanel , можно установить Xampp или WampServer.
Качаем версию Sublime Text 3 для нашей ОС, устанавливаем, запускаем.
Устанавливаем Node.js
Для работы некоторых плагинов нам понадобиться Node.js и Python, качаем и устанавливаем node.js. При установке, оставляем все по умолчанию.
Устанавливаем Python
Далее скачиваем и устанавливаем Pyton, последний релиз, ссылка типа Windows x86(или x64) web-based installer.
Устанавливаем Ruby и RubyGems
Для работы необходимо установить Ruby и RubyGems . После установки Ruby, распакуйте RubyGems и кликаем правой кнопкой мышки с зажатым SHIFT на ней, выбираем PowerShell или консоль, вводим:
Должна начаться установка RubyGems.
Устанавливаем Package Control
Package Control — с его помощью вы можете устанавливать, обновлять , удалять и просматривать список плагинов, которые вы установили в SublimeText. На самом деле плагины Sublime Text 3 можно просто копировать (или клонировать при помощи Git) в папку (…\AppData\Roaming\Sublime Text 3\Packages), и они будут работать. Но устанавливать через Package Control куда проще.
Открываем наш редактор, жмем ctr+` или View > Show Console, должна появиться консоль, вводим:
Теперь, чтобы установить или удалить плагин для Sublime Text, жмем ctr+shift+p, вводим install Package
или настройки-> Package Control -> вводим install Package (remove Package для удаления), выбираем, пишем название плагина, выбираем его из списка, жмем Enter.
Я специально проставил ссылки на все плагины Sublime Text 3, чтобы лучше понять, как они работают, не поленитесь пройти по ним и прочесть оригинальные инструкции.
Идем в пользовательские настройки кнопок: Preferences — Key Binding, идем во вкладку User (вторая вкладка), тыкаем в нее курсор, вставляем туда:
Эта запись добавляет горячие клавиши alt+shift+f для команды reindent — форматирования выделенного кода (выравнивания отступов).
Далее создадим файл пользовательских настроек: Preferences — Setting — User, жмем ctrl+s, проверяем так же, через ctrl+o, должен быть файлик Preferences.sublime-settings, если нет, создаем его.
Топ плагины Sublime Text.
Я не зря поставил ссылки на все плагины, очень рекомендую ознакомиться с описанием и инструкциями от разработчиков, если плохо с английским, пользуемся Google Chrome с переводчиком.
All Autocomplete — автозаполнение с открытых вкладок.
Каждый раз когда вы начинаете печатать, редактор анализирует набранный текст и предлагает наиболее релевантные варианты (из открытых документов) продолжения слова или функции в виде выпадающего списка. По-умолчанию функция доступна для языков программирования и для HTML, если набранное слово начинается со скобки «
E501 — означает пропуск проверки длины строк (мне не нужно), ну и авто формат включил, пригодиться.
AutoFileName — еще одно автозаполнение для подключения внешних файлов в код: имени файла, картинок в папке с проектом. Не конфликтует c All Autocomplete, скорее дополняет его. Активируется так же: ctrl+space.
Auto-save — Sublime Text плагин , который автоматически сохраняет текущий файл после каждой модификации.
В настройки горячих клавиш пользователя (Preferences / Key Bindings — User) добавляем строку:
Настройки для двух последних версий браузеров:
ApacheConf — подсветка синтаксиса .conf, .htaccess, .htgroups, .htpasswd.
Bootstrap 3 Snippets — автозаполнение кода Bootstrap 3 в виде выпадающего списка и по Tab.
В настройки пользователя (Preferences — Setting — User) добавляем строку:
Пример работы: пишем в html-файле — bs3-template: html5, жмем tab, должен появиться код стандартного шаблона html5+Bootstrap 3
Аналоги этого плагина уже имеются для Bootstrap 4, (Bootstrap 4 Snippets и Bootstrap 4 Autocomplete) хотя пока чаще используется Bootstrap 3.
BracketHighlighter — подсвечивает открытие/закрытие тегов и скобок в коде.
ColorHelper — упрощает работу с цветами: подсветка цветовых кодов, позволяет получать доступ к избранным цветам и цветовой палитре документа. Перевод цвета в различные форматы. Легко изменить цвет без знания кода.
Console Wrap — добавление вывода переменной в консоль по горячим клавишам ctrl+shift+q.
CSS Format — форматирование и минификация CSS из контекстного меню.
CSS3 — наиболее полная поддержка CSS для Sublime Text.
Djaneiro — автозаполнение и синтаксис Python Django для Sublime Text.
DocBlockr — это пакет для Sublime Text 3, который делает написание документации на одном дыхании. DocBlockr поддерживает JavaScript (включая ES6), PHP, ActionScript, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ и Rust.
Dockerfile Syntax Highlighting — подсветка синтаксиса Dockerfile для Sublime Text.
EditorConfig — помогает разработчикам поддерживать согласованные стили форматирования кода между различными редакторами.
Emmet — наш знакомый плагин по статье про Notepad++, позволит нам писать HTML и CSS код быстрее, используя аббревиатуры / ярлыки, затем расширит их до допустимых HTML тегов. Это один из моих самых часто используемых плагинов, который экономит время. Emmet занимает топ 1 по популярности среди плагинов репозитория SublimeText. Как и в прошлый раз настоятельно советую изучить документацию.
GhostText — один из самых крутых плагинов, позволяет связать редактор Sublime Text (со всеми вашими плагинами) с полями для ввода текста в браузере. Например, вы можете работать с CodePen, но все редактировать в Sublime Text. Просто нужно установить плагин и расширение для браузера. Просто выделите текстовую область, которую вы хотите связать, и щелкните расширение браузера: тогда произойдет волшебство.
GitGutter — плагин для отображения информации о файлах в репозитории. Всплывающее окно diff показывает исходный контент из коммита или различия между ним и рабочей областью.
Gitignore — плагин для загрузки шаблонов gitignore из коллекции шаблонов gitignore от Github
Google Search — поиск выделенного текста в Google.
Goto-CSS-Declaration — позволяет находить и переходить к id и классам в открытых CSS, LESS, SASS из редактируемых html, js и PHP-файлов.
jQuery и jQuery Snippets pack— наборы снипетов для jQuery. Эти плагины Sublime Text помогут с функциями jQuery. Они имеют почти все методы jquery в виде фрагментов для автозаполнения в коде и не конфликтуют друг с другом.
HTML5 — аналогичный набор для набор снипетов для автозаполнения HTML5 в коде.
HTML Nest Comments — позволяет правильно комментировать код, который уже содержит комментарии по ctrl+shift+/ .
Icon Fonts — автозаполнение для популярных шрифтов иконок, таких как Font Awesome, Glyphicons и других. ( Ctrl + Space).
Inc-Dec-Value — плагин позволяет уменьшать и увеличивать различные значения по горячим клавишам: числа, преобразовывать друг в друга цветовые форматы hex, rgb, rgba, hsl, hsla. С помощью этого плагина в коде мы можем одним движением заменять true на false, fadeIn на fadeOut, next на prev, дни недели и так далее. Стандартные горячие клавиши больше не работают в Windows, потому добавим в настройки клавиш:
SublimeText 3 – продвинутый мультиплатформенный редактор кода. Он настраивается немного сложнее, чем Notepad++, но и имеет намного больше плагинов, соответственно функционал редактора можно значительно расширить.
Редактор Sublime Text 3 – распространяется по коммерческой лицензии без особых ограничений. Версия без лицензии будет лишь иногда ненавязчиво напоминать о том, что лицензия должна быть приобретена для дальнейшего использования.
Для начала нам нужен установленный PHP в системе и прописанный в Path, для Windows я использую OSPanel .
Прокачка займет немало времени, зато сэкономит в процессе работы еще больше. Тут, как говорится : лучше день потерять, зато потом за пять минут долететь. Я специально проставил ссылки на все плагины Sublime Text 3, чтобы лучше понять, как они работают, не поленитесь пройти по ним и прочесть оригинальные инструкции.
Качаем версию Sublime Text 3 для нашей ОС, устанавливаем, запускаем.
Идем в пользовательские настройки кнопок: Preferences – Key Binding, идем во вкладку User (вторая вкладка), тыкаем в нее курсор, вставляем туда:
Эта запись добавляет горячие клавиши alt+shift+f для команды reindent – форматирования выделенного кода (выравнивания отступов).
Далее создадим файл пользовательских настроек: Preferences – Setting – User, жмем ctrl+s, проверяем так же, через ctrl+o, должен быть файлик Preferences.sublime-settings, если нет, создаем его.
Давайте установим руссификатор
| Операционная система | Путь |
| Windows XP | c:Documents and SettingsИмя_пользователяApplication DataSublime Text 3PackagesDefault |
| Windows 7/8 | c:UsersИмя_пользователяAppDataRoamingSublime Text 3PackagesDefault |
| Windows (Portable версия) | папка_с_программой_Sublime_TextDataPackagesDefault |
| OS X | ~/Library/Application Support/Sublime Text 3/Packages/Default/ |
| Linux | ~/.config/sublime-text-3/Packages/Default/ |
Как установить плагин Emmet в Sublime Text
Плагин Emmet позволяет писать код быстрее, благодаря сочетанием клавиш. Например базовую HTML5-разметку вы можете создать сочетанием клавиш ! + tab. Удобно правда?
Для установки Emmet перейдите в Preferences — Package Control и в открывшемся окне напечатайте install package, затем введите слово emmet и выберите его для запуска процесса установки. Иногда требуется перезагрузка Sublime Text 3 после установки новых дополнений.
Важно: плагин Emmet в Sublime Text 3 не будет генерировать код, если вы ранее не сохранили файл, например, как index.html
Более подробную работу с Emmet и горячие клавиши мы рассматриваем в курсе HTML/CSS и других курсах Профессия веб-программист. Пройдя данные курсы, вы получите знания основ программирования и создадите на практике свой первый профессиональный сайт о кино.
Начать обучение на курсе Профессия веб-программист вы можете прямо сейчас, без ожидания пока наберется группа, и данный курс рассчитан на самостоятельное обучение, что позволит вам обучаться по собственному расписанию когда вам будет удобно, а если у вас появятся вопросы в процессе обучения, вы сможете их задать в наше сообщество FRUCTCODE, где другие студенты обязательно вам помогут решить задачу.
Устанавливаем Package Control
Package Control необходим для того чтобы расширять функциональность редактора Sublime Text 3 различными плагинами.
Идем на сайт,смотрим инструкцию по установке. Или заходим в редактор, нажимаем клавиши: Ctrl + ~ , в появившейся коммандной строке вводим следующую комманду на установку:
Далее нажимаем Ctrl+Shift+P и набираем Package Control — Install Package .
Обзор Sublime Text 3, основные плагины.
Некоторое время назад в качестве альтернативы знаменитому Notepad++, был установлен редактор Sublime Text 3. После работы на нем в течении некоторого времени стало понятно, что он останется основным редактором, Notepad++ отошел на второй план в качестве запасного варианта.
Sublime Text 3 — при первом запуске осталось сразу положительное впечатление, оформление и стили шрифтов.
В редакторе возможно открытие нескольких окон одновременно и разделение экрана как по горизонтали так и по вертикали. Экран делится не только пополам, но и на четыре колонки например, в каждой колонке возможно открыть отдельный файл.
Справа у каждого окна имеется полоса прокрутки в виде карты кода, ее можно убрать в настройках если нет в ней необходимости. Так же можно вывести или убрать панель проектов или открытых файлов — она располагается слева.
К примеру в ней можно создать новый файл. переименовать существующий или удалить его, открытый проект вы видите в виде дерева папок и файлов как в файловом менеджере.
Самое интересное.
В Sublime Text вы можете просматривать файл изображения, это удобно и ускоряет поиск нужного, при верстке например.
Единственное не хватало функционала, но оказалось, что его функционал огромен, к этому текстовому редактору существует множество плагинов которые безгранично расширяют его функционал.
Опишем некоторые плагины, основные.
На официальном сайте и в сообществах этого редактора вы сможете найти плагины которые расширят функционал этого редактора в той сфере в какой нужно вам.
Самый главный плагин — Package control этот плагин устанавливается в первую очередь, в дальнейшем с помощью него вы сможете устанавливать или удалять все последующие плагины.
Скачивать их не надо, просто набираем название нужного в поиске через Package control. В строке поиска пишем нужный, затем выбираем необходимый. Выбранный плагин автоматически скачивается и установится.
Второй по популярности плагин Emmet. Этот плагин сильно ускоряет написание кода, для верстальщика это просто чудо. К примеру набрав всего один символ ! и после этого нажав TAB мы получаем такой код:
Плагин Alignment — выравнивает код. Очень удобно когда вы открываете чужой файл и пытаетесь в нем разобраться, выделяем код и жмем ctrl+Alt+A и код стало приятно читать.
Чтоб понять все прелести и удобство данного редактора необходимо его попробовать. Поработать на нем и настроив его под свои нужды вы сразу поймете как он ускоряет работу и удобен.
Так же имеется множество плагинов которые не только расширяют функционал но и меняют внешний вид. Вы сможете придать внешний вид в стиле который вам нравится
Sublime Text 3 — программа условно бесплатная и во время работы иногда выскакивает окно с предложением его купить, но при нажатии ESC окно пропадает и ни как не ограничивает функционал программы.
Разработаны версии как для Windows так и для MacOS и Linux.
Установка цветовых схем
Снова нажимаем Ctrl+Shift+P и набираем daylerees — themes .
Быстрое выделение текста
Множество вариантов выделить определённый фрагмент текста, например то, что заключено внутри скобок – Ctrl+Shift+M. Пригодится в программировании, например. Ставим курсор в любое место внутри скобок и нажимаем заветное сочетание клавиш! Редактор выделит текст по обе стороны от курсора до ближайшей пары скобок.
Если же речь идёт о HTML/XML коде, то выделит содержимое какого-либо тега можно нажатием клавиш Ctrl+Shift+A – выделится только текст внутри конкретного тега. Это очень удобно, если имеется большая вложенность, а инденты (отступы) расставлены не очень красиво.
Кстати, об отступах. Мало того, что они здесь гибко настраиваются, так ещё и есть возможность выделить весь текст на определённом уровне отступов. Для этого нужно запомнить сочетание клавиш Ctrl+Shift+J. Запомнить такое количество клавиш сразу тяжело, но стоит попрактиковать это пару часов в работе и всё!
Кстати, можно выделив какой-то фрагмент текста быстро выделить и другие вхождения этого же фрагмента в тексте нажав Ctrl+D, причём тут мы сталкиваемся с таким понятием, как множественное выделение и редактирование. Теперь в тексте у нас несколько курсоров! Можно вводить и удалять текст одновременно в несколько мест! Этот способ хорош для переименования класса или переменной или перепечатки какого-либо участка текста, если использование поиска и замены нежелательно!
Плагины
Плагинов великое множество! А так как редактор, насколько я знаю, написан на Python, то и писать какие-то свои дополнения под силу каждому, кто знаком с языком.
Установка плагинов достаточно проста – в уже упомянутой мной панели быстрого доступа к настройкам вводим Install Packages и попадаем в панель дополнений, где так же действует поиск. Выбрав нужное дополнение жмём Enter и оно устанавливается! Нет ничего проще!
Плагинов великое множество! Есть и для встраивания терминала прямо в окно редактора, для работы с git, подсветки синтаксиса и ещё много чего ещё!
Сниппеты
Вот эта тема мне очень понравилась! Есть определённые заранее заготовленные “кирпичики”, которыми можно пользоваться для ускорения ввода текста. Кроме того, можно задавать собственные! Сейчас покажу.
Плагины
Ставим плагин Emmet, он помогает расширить количество сокращений удобных для вёрстки кода (вот список), переходим в редактор и напишем конструкцию вида:
То есть класс, в который вложен ul, в который вложены li в количестве пяти штук, имеющие класс MenuItem с содержимым тега “Пункт ” и порядковый номер элемента.
Нажимаем Tab и конструкция развернётся в
По ссылке есть и правила, по которым преобразуются сниппеты. Там ОЧЕНЬ много материала, стоит брать на вооружение.
Собственные сниппеты
Мы также можем делать собственные сниппеты. Весьма несложно. Делается следующим образом:
Думаю понятно, что есть что. content – то, что будет вписано. tabTrigger – по какому сочетанию клавиш это вызывать. scope – область видимости, с какими типами файлов работать. Всё есть в документации. Я же сделал цикл for и описал там некоторую текстовую константу с тремя маркерами ввода, причём в пермое задано значение по умолчанию “0”. Символы $ тут являются служебными, и те, что относятся к тексту, приходится экранировать слешем.
Сначала курсор у нас стоит в позиции с выделенным текстом 0 (это значение по умолчанию $), при нажатии следующего Tab, он перейдёт в позицию $, затем $. Таким образом мы можем расставить якоря, куда прыгать курсору для ввода текста! Также есть много служебных ключевых слов и методик, позволяющих модифицировать тело сниппета на лету. Ну я так не углубляюсь, просто пишу часто употребляемые конструкции.
Настройка Sublime Text 3
По умолчанию все настройки уже заданы и записаны в файл Preferences Settings — Default
. Если нам необходимо внести изменения, то мы лезем на сайт, ищем нужные настройки, открываем
Preferences User — Default
и вписываем свои значения.
Ниже выкладываю свой файл с настройками, на заполнение которого ушел не один месяц, в котором представлены основные настройки. Остальное уже самостоятельно, через мануал.
Особое внимание нужно обратить на то, что при смене настроек через меню, в файле настроек исчезают все комментарии к переменным. По крайне мере у меня и я неоднократно злился, пытался понять почему т.к. люблю, когда все подписано и красиво упаковано.
От автора: начиная с данного урока, мы с вами начнем расширять именно функциональные возможности редактора. Расширять возможности Sublime Text, мы будем, устанавливая плагины. Плагины – это расширения, дополнения которые дополняют существующий и вносят новый функционал в какую-либо программу. В данном случае мы рассматриваем плагины для редактора Sublime Text.
Устанавливать плагины для Sublime Text стандартными средствами самого редактора не очень удобно, поэтому для этих целей есть специальный плагин, который делает установку плагинов более удобной. В данном уроке мы установим такой плагин, который в будущем упростит нам установку последующих плагинов.
Подготовка Sublime Text 3 к работе
Установка редактора под Windows не вызывает никаких затруднений – просто следуйте указаниям. Можно упомянуть только один нюанс – по ходу установки можно отметить чекбокс, чтобы добавить Sublime Text в контекстное меню операционной системы. Т.е. при клике правой клавишей мыши на каком-либо файле, его можно будет сразу открыть в данном редакторе.
Следующий шаг – установка Package Control. Зачем это нужно? Для полноценной работы потребуется некое количество плагинов и либо мы будем устанавливать их руками, либо за нас эту работу выполнит Package Control. Итак, идём на эту страницу и копируем код для Sublime Text 3. Возвращаемся в редактор и открываем консоль: View > Show Console или просто используем комбинацию клавиш Ctrl +` . Вставляем код в консоль и нажимаем Enter.
Установка и удаление плагинов и тем
Для установки выполняем следующие шаги:
- Открываем Package Control: Preferences > Package Control или Shift + Ctrl + P .
- В появившемся поле вводим install чтобы найти пункт Package Control: Install Package . Выбираем его и нажимаем Enter.
- В поле ввода появившейся панели набираем название нужного плагина, выбираем его в списке и снова Enter.
Чтобы удалить какой-либо из ранее установленных плагинов выполняем те же три действия, только во втором пункте вводим не install, а remove , так как нам нужен Package Control: Remove Package .
Темы устанавливаются так же, как и плагины. При этом добавится 4-й шаг: нужно зайти в Preferences > Settings и далее в Preferences.sublime-settings – User добавить тему. Если конкретнее, то добавить примерно такой код:
Плагины для Sublime Text 3
Кто бы что ни говорил или писал, но для начала не помешает зайти на страничку популярных плагинов и выбрать те, которые подойдут непосредственно Вам. Также я бы порекомендовал перед установкой плагина ознакомиться с его документацией, потому как могут быть нюансы. Ну а ниже перечислю те плагины, которые использую сам:
EditorConfig
Работать приходится с разными проектами и с разными людьми. Дабы определить единый стиль кода и придерживаться его и нужен EditorConfig. Подробнее об этом плагине можно почитать здесь
SideBarEnhancement
Расширяет функционал сайдбара. Надо признать, что у самого Sublime этот функционал уж очень скуден.
SublimeCodeIntel
BracketHighlighter
Подсвечивает парные скобки и теги.
PHP Companion
Позволяет добавлять namespace, оператор use и т.д. нажатием одной клавиши. Привязки клавишам нужно писать самому, но можно использовать авторские. Для этого открываем Preferences > Key Bindings , вставляем во вкладку Default.sublime-keymap – User этот код и сохраняем.
DocBlockr
Я противник комментариев как таковых – если понимаешь, что надо написать комментарий к коду, то тут надо не комментарии писать, а код переписывать. Но это не касается комментариев DocBlock, написание которых и упрощает данный плагин.
TrailingSpaces
Подсвечивает пробелы в конце строк и может удалять их при сохранении. По умолчанию опция удаления отключена. Чтобы её включить, надо зайти в Preferences > Package Settings > Trailing Spaces > Settings User и вставить следующее:
A File Icon
В сайдбаре к названиям файлов добавляет иконки. Так воспринимать информацию гораздо удобнее.
Emmet
Незаменимая вещь для вёрстки, значительно ускоряет процесс, позволяя расширять табом аббревиатуры HTML, XML, HAML и CSS/SASS/LESS/Stylus. Если раньше не работали с Emmet, то на первых порах будет полезна вот эта шпаргалка.
Autoprefixer
Color Highlighter
Полагаю, из названия уже понятно о чём речь. Поставляется вместе с конвертором цветов. Настроек достаточно, поэтому следует почитать доки.
С основными плагинами вроде всё. Что касается конкретных фреймворков или библиотек– тут уж кто с чем работает. Можно лишь сказать, что, как минимум, помимо подсветки желательно также ставить и плагины сниппетов. Лично у меня ещё установлены:
Laravel Blade Highlighter, Blade Snippets, Babel, Babel Snippets, Vue Syntax Highlight, Vuejs Snippets, Sass, LESS, Pug.
Следует упомянуть такие плагины как Git или Laravel Artisan, но им я всё-таки предпочитаю консоль.
О горячих клавишах
Практически полный перечень находится здесь. Я же приведу лишь небольшую выдержку комманд, которые использую чаще всего:
| Ctrl + D | Выделить слово, в котором курсор |
| Ctrl + Shift + M | Выделить содержимое скобок |
| Ctrl + F | Поиск в файле |
| Alt + Enter | Выделить всё найденное (после поиска) |
| Ctrl + / | Закомментировать строку |
| Ctrl + Shift + / | Закомментировать блок кода (в котором находится курсор) |
| Ctrl + S | Сохранить |
| Tab | Добавить отступ |
| Tab + Shift | Удалить отступ |
| Ctrl + Shift + D | Продублировать строку/фрагмент |
| Ctrl + Shift + ↑ | Поднять строку вверх |
| Ctrl + Shift + ↓ | Опустить строку вниз |
| Ctrl + Shift + Enter | Вставить строку выше курсора |
| Ctrl + Enter | Вставить строку ниже курсора |
| Ctrl + P | Переход к файлу в проекте |
И в завершение. Из редактора IDE не слепить, но с другой стороны – а нужно ли? Я пробовал NetBeans, Eclipse, PhpStorm, но в итоге (наряду с последним) всё равно продолжаю пользоваться Sublime. Этот быстрый на подъём и шустрый редактор меня полностью устраивает.
Как ускорить верстку страницы в разы? А на помощь нам придет плагин под названием 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?
. Для задания любых других атрибутов используются квадратные скобки — [] внутри них указываются необходимые атрибуты.
Хочу еще добавить что Emmet умеет работать и с CSS таким же образом, только в Sublime Text должен быть выбран синтаксис CSS, Emmet знает все CSS свойства и достаточно написать первую букву свойства и нажать Tab или еще можно указать первую букву и необходимое значение например m20 + Tab выведет следующий результат margin: 20px;
У кого если вдруг появились какие-то вопросы задаем их в комментариях с радостью отвечу на них.
Читайте также: