Плагины
Плагины для Sublime Text пишутся на языке Python. Сам по себе язык очень простой и если вы программист, то вам не составит труда его выучить. Если нет, то тоже не беда, так как скорее всего под Вашу задачу плагин уже написан.
Установка плагинов в Sublime Text
На данный момент существует два метода установки плагинов в программу:
- Варварский. Достаточно просто скачать из интернета необходимый плагин и закинуть его в соответствующую папку. Но это не корректные метод из-за этого мы на нем останавливаться не будем.
- Через Sublime Package Control
Перед тем, как начать инсталлировать плагины нужно установить Sublime Package Control, об этом читаем тут.
Для установки плагинов нужно:
- открыть командную строку, нажав комбинацию клавиш: ctrl+shift+p ;
- в строчке вводим Install Package и жмем ентер;
- снизу в открывшемся поле вводим название плагина, например: emmet;
- нажимаем enter и ждем конца установки, там появится экран с кучей строчек;
- Готово.
(см инструкцию на 3 скринах)
Рассказывать о том, какие плагины популярны, а какие-нет особого смысла нет, так как в Sublime пишут на нескольких десятках языков программирования и под каждый язык есть свои плагины.
Но так как основная масса людей, выбирающая этот редактор пишет на php мы все же рассмотрим несколько.
Sublime Text Emmet
Чуть ранее в примере мы установили этот плагин. Он очень сильно ускоряет разработку сайтов. Для того, что бы понять, что он делает в правом нижнем углу вместо Plain Text выберим PHP. Теперь в редакторе ставим ! и нажимаем TAB.
Еще можно ввести: .wrapper нажимаем tab, как видем у нас появился div.
Для того, что бы сделать меню на 10 ссылок можно написать следующее, после чего нажать tab: .menu>ul>li*10>a[href=#]
В левой части «!+tab» , в центральной части «.wrapper + tab», а в правой части «menu>ul>li*10>a[href=#]
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: установка
Emmet — плагин, ускоряющий написание HTML и CSS кода. Статья поможет установить плагин для Sublime text.
Emmet — плагин, ускоряющий написание HTML и CSS кода, за счёт сокращений. Например, в пустом документе достаточно поставить ! и нажать Tab , чтобы получить заготовку страницы с базовой разметкой.
Emmet в википедии
Emmet (ранее Zen Coding) — набор плагинов для текстовых редакторов, которые в некоторой степени ускоряют написание кода HTML, XML, XSL, а также кода на некоторых других языках. Проект был начат Вадимом Макеевым в 2008 году и активно разрабатывается Сергеем Чикуенком начиная с 2009 года, а также сообществом пользователей Zen Coding на основе идеи Zen Coding 2.0.
Emmet доступен для всех популярных текстовых редакторов, но эта заметка о том, как установить Emmet для Sublime text.
Установка Package Control для Sublime text
Прежде, чем ставить Emmet, нужно поставить «Package Control» — это менеджер плагинов для редактора Sublime text. С его помощью вы сможете ставить и другие плагины в пару кликов.
Нужно открыть поле ввода кода: View -> Show Console 
Скопируйте код целиком и вставьте в текстовое поле, как указано на скриншоте ниже.
В нижнее, маленькое поле ввода. 
После чего нажнмите Enter и перегрузите редактор.
Теперь займёмся основным делом и установим таки Emmet.
Установка Emmet на Sublime text
После того, как поставили Package Control, запустим его:
- Ctrl + Shift + P на Windows
- Command + Shift + P на MacOS
В появившееся окно вбиваем «Package Control: Install Package» и выбираем нужный пункт. В окне работает автоподбор, так что всё целиком вбивать не обязательно. Смотрите скриншот. 
Выбрав нужный пункт и нажав на него, подождите, пока не появится следующее окно. При первом запуске это может занять больше времени, чем обычно: зависит от ресурсов компьютера.
Когда отобразилось следующее окно, вбиваем в строку поиска «Emmet». Выбираем первый пункт и кликаем в него. 
Когда плагин установится, в Sublime text откроется новая вкладка с благодарностью. 
Значит, Emmet установлен успешно и им можно пользоваться.
Плагин Emmet для Sublime Text.
Вы до сих пор пишите теги 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, и мы получим следующее
Как видите, 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 структуру, просто напишите знак !