Установка plugins в sublime 3. Установка через репозиторий производителя. Установка плагина Emment

Автору довелось пользоваться многими текстовыми редакторами и IDE, среди которых были nano, vim, gedit, geany, kate, eclipse… Любой из них имеет как свои преимущества, так и свои недостатки. Речь сегодня пойдёт не о них: о том редакторе, который с первого же дня может завоевать ваше сердце, о Sublime Text.

Поскольку о нём уже немало написано, пост будет достаточно коротким: целью ставится познакомить читателя с этим замечательным текстовым редактором и показать пути для его настройки под свои нужды. Остальную, более подробную информацию, можно найти на официальном сайте.

Сразу надо бы оговориться: sublime text 3 не бесплатный продукт. На момент написания поста его стоимость составляла $70. Как мне доводилось слышать, обязательна лишь оплата для пользователей Mac, на Linux и Windows вы можете не оплачивать лицензию и спокойно работать, время от времени наблюдая всплывающее окно с предложением о покупке. Собственно говоря, это практически не мешает.

Где найти и как установить

Как правило в случае с дистрибутивами Linux последняя версия текстового редактора имеется в репозитории. Хотя может возникнуть необходимость подключить помимо основного какой-либо дополнительный репозиторий. Для примера в Gentoo Linux следует подключить оверлей sublime-text и установить редактор:

# layman --add sublime-text # eix-update # emerge -av sublime-text

Для Debain с архитектурой amd64 последовательность команд такова (устанавливаем готовый пакет):

$ wget http://c758482.r82.cf2.rackcdn.com/sublime-text_build-3047_amd64.deb $ sudo dpkg -i sublime-text_build-3047_amd64.deb

Внешний вид sublime достаточно приятен, есть несколько цветовых схем в стандартной поставке, в колонке слева отображаются проекты, справа - что-то вроде эскиза кода (миникарта). Вверху - панель инструментов и вкладки, внизу - информативная полоса, сообщающая о количестве строк, определяющая язык программирования, количество пробелов в отступе, а также кодировку документа, если вы пожелаете это настроить.

Пользовательские настройки

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

Preferences --> Settings-User

Допишите по вкусу:

{ "auto_indent" : true , #автоотступ "auto_match_enabled" : true , #автоматически добавлять закрывающую скобку, парную кавычку "bold_folder_labels" : true , #каталоги выделить жирным "open_files_in_new_window" : false , # открывать новые файлы во вкладке # цветовая схема "color_scheme" : "Packages/Color Scheme - Default/Solarized (Light).tmTheme" , "ensure_newline_at_eof_on_save" : true , "font_size" : 11 , #размер шрифта "highlight_line" : true , #выделять строку, на которой находится курсор "ignored_packages" : [ "Vintage" ], "tab_size" : 4 , #настройка отступа "translate_tabs_to_spaces" : true , #перевод табов в пробелы "trim_trailing_white_space_on_save" : true #удалять пробелы и табуляции в конце строк }

Полный перечень команд можно отыскать через пункты меню Preferences -> Settings -> Default и Preferences -> Key Bindings -> Default . Надо только отметить, что у json нет комментариев, поэтому не нужно слепо копировать приведённые выше настройки.

Любопытно и то, что приверженцам vim, к коим себя относит и автор сего поста, можно включить привычные в работе сочетания клавиш, если стандартные по какой-то причине не совсем устраивают. Делается это достаточно просто. Следует исключить из игнорируемых режим Vintage Mode:

"ignored_packages":

Здесь же можно включить автозакрытие скобок:

{ "keys" : [ "(" ], "command" : "insert_snippet" , "args" : { "contents" : "($0)" }, "context" : [ { "key" : "setting.auto_match_enabled" , "operator" : "equal" , "operand" : true }, { "key" : "selection_empty" , "operator" : "equal" , "operand" : true , "match_all" : true }, { "key" : "following_text" , "operator" : "regex_contains" , "operand" : "^(?:\t| |\\)|]|;|\\}|\\\"|$)" , "match_all" : true } ] }

Быстрое выделение текста без использования мыши осуществляем стрелками с зажатой клавишей Shift , что представляется весьма удобным.

Радует наличие установок для отдельных типов файлов. Это может пригодиться в том случае, когда вы используете разное количество пробелов при написании кода на разных языках.

Откройте в редакторе css -файл, затем Preferences -> Settings - More -> Syntax Specific - User и пропишите:

{ "tab_size" : 4 }

Теперь в коде css отступы будут выровнены по 4 пробела.

Сниппеты

Как любой уважающий себя текстовый редактор, sublime умеет работать с пользовательскими сниппетами. Пример создания нового сниппета через Tools -> New Snippet:

jq source.js

Сохраните сниппет где-нибудь внутри.config/sublime-text-3/Packages/User . Это всё. Теперь в js-файлах появится возможность вставки текста, описанного нами в поле

Плагины

Разумеется, sublime не был бы так привлекателен, если бы не его коллекция плагинов. Для установки и удаления плагинов используется Package Control . Увы, его нет в стандартной поставке. На момент написания поста установка самого Package Control выглядит следующим образом:

Перейдём в директорию, где хранится конфигурация Sublime-Text, клонируем нужный репозиторий:

$ cd .config/sublime-text-3/Packages/ $ git clone https://github.com/wbond/sublime_package_control.git "Package Control" $ cd "Package Control" $ git checkout python3

Откройте редактор и нажмите сочетание клавиш Ctrl+Alt+P , в появившемся меню следует найти "Package Control: Install Package" . Это всё. Отныне вы вольны выбирать и устанавливать нужные вам плагины.

SublimeCodeIntel

Приближает возможности Sublime Text к возможностям IDE. Ставить в первую очередь.

Status Bar Extension

Отображает кодировку открытого файла, количество строк, используемый язык программирования, количество табов/пробелов в статус-баре.

Placeholders

Для случаев вставки «рыбы» в код. Помните lorem ipsum?

Зачем слова? Кто однажды попробовал emmet, тот уже не в силах от него отказаться. И как без этого раньше жили верстальщики?

SublemacsPro

Для тех, кто привык к старому доброму Emacs.

Интегрирует систему контроля версий Git и Sublime Text, он реализует в редакторе большинство повседневно используемых команд, таких как diff , status , pull .

И, пожалуй, самое интересное: проверка русской орфографии .

Sublime Text 3 - один из самых распространенных текстовых редакторов для программистов. Он предоставляет своим пользователям уникальные возможности, которых нет больше нигде. Одни из самых главных достоинств - кроссплатформенность и расширяемость.

Здесь можно настроить все - от внешнего вида до компонентов программы (плагинов). Но и уровень настройки у Sublime Text соответствующий - как редактор для программистов, он настраивается через исходный код, что под силу не каждому. В этой статье мы рассмотрим как выполняется настройка Sublime Text 3.

Для Sublime Text с первых же версий возможности были гораздо выше, чем у других редакторов. Шутка ли - полностью настраиваемый интерфейс, возможность настроить поведение программы, а не просто вводить текст? Что уж говорить о плагинах - код, написанный на Python, позволяет пользователю управлять редактором так, как укротитель змей, играя на магической дудочке, заставляет гигантского удава трепетать перед ним. Однако, как бы нам ни было жаль, именно это и отпугивает новичков - будучи не в состоянии настроить редактор, они перестают им пользоваться.

Настройка Sublime Text 3

Сначала поговорим про внешний вид, а затем перейдем к настройке горячих клавиш и плагинов.

1. Внешний вид Sublime Text

Итак, пора запустить Sublime Text (статья про установку - ). Многим дизайн программы нравится, другим же - нет. И сейчас перед вами встает уникальная возможность поменять интерфейс до неузнаваемости!

Самый простой с виду способ - выбрать тему через настройки. Для этого идем в меню "Preferences" -> "Color Scheme" и выбираем нужную вам тему. Но это способ лишь поменяет расцветку редактора, и ничего более.

Другой, более сложный, но верный вариант - разобраться с файлом настроек. Чтобы открыть его, перейдите в меню "Preferences" -> "Settings". И вот, перед вами не что иное, как громада текста. Но не все так сложно, как кажется! Слева - настройки по умолчанию, их трогать не надо. Их можно взять за пример. А вот справа нужно разместить свои настройки - взять, скопировать нужную строку и поменять ее значение. Основные настройки:

  1. "color_scheme" - цветовая тема. Можно выбрать из существующих, а можно скачать в папку Packages/Color Scheme - Default/.
  2. "font_face" - шрифт текста. Важно, чтобы он был в системе. Чтобы посмотреть список доступных шрифтов, откройте любой текстовый редактор, к примеру, Lible Office Writer.
  3. "font_size" - размер шрифта, устанавливающийся дробным или целочисленным значением.
  4. "font_options" - дополнительные опции шрифта типа "no_bold", "no_italic".
  5. "word_separators" - разделители слов.
  6. "line_numbers" - настройка нумерации строк.
  7. "gutter" - отображать ли "канавку" (в ней располагаются номера строк и закладки).
  8. "margin" - длина отступа от "канавки" .
  9. "fold_buttons" - если навести курсор на "канавку" , то будут видны треугольные стрелки, позволяющие скрыть или показать фрагмент кода между фигурными скобками. Их тут можно отключить или включить.
  10. "fade_fold_buttons" - если поставить значение false, то треугольные кнопки не будут скрываться.

Вот пример действия настроек (не забудьте сохранить файл):

Вы можете поэкспериментировать здесь сами. А мы идем дальше.

2. Настройка сочетаний клавиш

Да-да, вы не ослышались! Любой может настроить сочетания по-своему, присвоив им другие значения. Чтобы открыть файл, перейдите в "Preferences" -> "Key Bindings" .

Перед нами снова два файла, один из которых - настройки по умолчанию, а другой - ваши персональные настройки. Чтобы поменять сочетание, необходимо скопировать одну или несколько строк, заключенных между фигурными скобками. Вот пример моего файла:

Конечно, это ничего не меняет (это сочетание клавиш для закрытия любого приложения), однако данный файл является лишь примером.

Ну вот и все, Sublime Text стал таким, каким он вам нужен и вы знаете как настроить Sublime Text 3. А сейчас пора двигаться дальше - к установке плагинов.

3. Установка Package Control

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

Package Control - предназначен для более быстрой и удобной установки плагинов. Он позволяет устанавливать их через визуализированный интерфейс, а не через код.

Для начала установим Package Control с официального сайта. Это не значит, что мы его будем скачивать!

  1. Скопируем текст из соответствующего текстового поля (в зависимости от версии Sublime Text).
  2. С помощью сочетания клавиш "Ctrl + ~" вызываем встроенную в редактор консоль (да-да, есть и такое!).
  3. Вставляем скопированный код в текстовое поле и ждем успешной установки.
  4. Перезапускаем редактор.

Package Control установлен! Теперь пора разобраться с тем, как им пользоваться.

4. Работа с плагинами в Package Control

Чтобы запустить Package Control, необходимо набрать сочетание клавиш "Ctrl + Shift + P" и из списка выбрать элемент Package Control: Install Package.

И перед нами долгожданная установка плагинов! Теперь есть возможность быстрого их поиска и выбора, а если выбрать другие команды для Package Control, то можно и удалять, и изменять элементы редактора. Теперь надо потренироваться на установке. Уставноим Material Theme и выполним настройки темы sublime text 3.

  1. Запускаем установщик плагинов.
  2. Набираем в поле поиска Material Theme.
  3. Нажимаем и ждем, внизу должна появиться надпись "Installing package Material Theme" . В процессе установки будет запрошено добавление еще одного плагина, разрешаем.

Чтобы применить тему, необходимо перейти в меню "Preferences" -> "Color Scheme" -> "Material Theme" -> "schemes" , а далее - тема, которая вам больше всего понравится.

Однако это еще не все. Несмотря на установку темы в качестве плагина, она активируется не до конца. Чтобы исправить это, зайдите в файл настроек и допишите следующий текст:

"theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"overlay_scroll_bars": "enabled",
"line_padding_top": 3,
"line_padding_bottom": 3,
// On retina Mac
"font_options": [ "gray_antialias" ],
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
// Highlight active indent
"indent_guide_options": [ "draw_normal", "draw_active" ]

Вид редактора после применения к нему темы:

Неплохо, да? Настройка Sublime Text 3 почти завершена. А сейчас пора установить что-нибудь более существенное. Давайте ознакомимся с самыми популярными плагинами для Sublime Text.

Топ 5 плагинов для Sublime Text 3

1. Emmet

Emmet - плагин, позволяющий сделать отображение кода более удобным. Здесь используются сочетания клавиш. К примеру, "html + tab" создает каркас документа, а " div.wrapper + tab" превратится в полноценный код:

Этот плагин представляет собой коллекцию сокращений снипсетов для JavaScript. Длина набираемого текста с помощью подсказок правда уменьшается! К примеру, вместо набора "document.querySelector("selector’);" можно просто набрать "qs + Tab" .

Зачем искать место для нового файла в неудобном дереве каталога? Данный плагин позволит быстро и эффекстивно ввести нужные данные, и файл будет создан буквально за пару нажатий клавиш!

4. Git

Название этого плагина говорит само за себя: вы сможете выполнять все необходимые действия в рамках Git"а, не выходя из редактора!

Кроссплатформенный текстовый редактор.

Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно)

Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале.

1. Установка программы и контроль за дополнениями (Package Control)

  1. Устанавливаем Sublime Text 3. Тут всё просто - качаем и запускаем.
Теперь нажимаем ctrl/⌘+shift+p или в меню (Tool > Command Palette).

Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д.

2. Настройки программы:

  1. Используем пробелы, вместо табов.
    «translate_tabs_to_spaces»: true
  2. Размер таба равен 4 пробела.
    «tab_size»: 4

    Вы спросите зачем?
    Что бы случайно не нажать пробел и таб вместе, и не сломать сборку pug.
    А так же для единообразия работы в команде.

  3. Строки не должны заканчиваться пустыми символами .
    Для этого используем плагин TrailingSpaces .

- Пожалуй на этом обязательные MustHave настройки заканчиваются. Перейдём к индивидуальным:

  1. Полноэкранный режим F11 + скрытие панели menu (alt). Позволяет максимально использовать монитор для работы и не отвлекаться на статус панели OS.
  2. Запрет переноса строки. Наверное лучшее свойство из перечисленных. Не даёт путаться в pug синтаксисе. Показывает всегда ожидаемый код и вложенность независимо от размера экрана. Горизонтальная прокрутка осуществляется shift + колёсико, (либо тачПанель)
    «word_wrap»: «false»
  3. Themes. Ничего не могу сказать по этому поводу. Просто найдите то, что нравится (желательно использовать тёмную схему). Я использую „theme“: „Material-Theme-Darker.sublime-theme“.
  4. Подсветка синтаксиса. Ну я думаю тут не должно быть проблем. Если следить, что бы расширение и подсветка совпадали (Pug for Pug, а не Jade for Pug)
  5. View → Side Bar → Hide Open Files - Освобождает пространство для дерева проекта. Т.к это поле так и так дублируется вкладками и тремя точками сверху

3. Полезные клавиши "hotkey" :

  1. В первом пункте скажем, что пропустим все стандартные сочетания, такие как ctrl(⌘) + Z (⌘ - далее просто ctrl). Отменить, сохранить, повторить, закрыть вкладку, восстановить вкладку, и тд…
  2. Пожалуй следующее самое популярное сочетание это:
    crtl + P - Позволяет выполнить поиск по файлам открытого вами проекта. Позволяет избавится от огромного дерева открытых стилей.
  3. Следующее по важности:
    ctrl + D - Поиск копий выделенного текста. Идеально подходит для мульти-редактирования. И для поиска дублей. Особенно в больший файлах и больших фрагментов. Для мульти-курсора зажмите ctrl и используйте мышь.
  4. ctrl + L - Выделяет всю строку и позволяет удалить её полностью. Хорошо работает совместно с ctrl+D.
  5. Поиск… Ну наверное первое это ctrl+F - поиск по файлу. Второе и более важное это поиск в папке по множеству файлов ctrl + shift + F (Можно вызвать кликнув по папке правой кнопкой и выбрать "Find in folder…") Советую не включать в поиск папку «Известного толстячка»
  6. ctrl + shift + up/down - Перемещает строку наверх/вниз (меняет их местами). Удобно для работы со стилями и переменными.
  7. Теперь небольшой туториал по комбинациям комбинаций клавиш . Вы наверное видели эти комбинации через запятую. Вот и я видел… а теперь я знаю как их использовать. Для этого по очереди нажимаем эти комбинации (можно не отпускать общую мод клавишу)
    Вот полезные из них:
  8. ctrl + K, ctrl + 4 - Скрывает все ветки, вложенность которых больше 4. Аналог стрелочки свернуть. (ctrl + K, ctrl + J - разворачивает всё что есть)
  9. ctrl + K, ctrl + B - Скрывает/показывает SideBar. (хорошо работает с F12)

Привет, друзья! По многочисленным просьбам обновил руководство по быстрой настройке редактора кода Sublime Text 3 , установке необходимых для вёрстки плагинов и создании своего пресета настроек для быстрого старта на новом рабочем месте.

Класснуть

Плюсануть

Запинить

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

Сегодня мы рассмотрим максимально быструю настройку Sublime Text, самые популярные среди верстальщиков плагины для ускорения вёрски и установим одну из лучших и комфортных тем оформления редактора One Dark Material Theme .

По-умолчанию Sublime Text выглядит довольно печально:

Для начала необходимо настроить Package Control . Для этого нажимаем хоткей Ctrl+Shift+P. Во всплывающем окне набираем Install Package Control и выбираем соответствующий пунк. Через несколько секунд Package Control будет установлен, о чём вы получите соответствующее уведомление.


Если вы пользователь MacOS, необходимо нажать на клавиатуре Cmd+Shift+P.

Package Control необходим для того, чтобы вы могли устанавливать дополнения и плагины в Sublime Text 3 из репозитория пакетов.

Установка плагинов в Sublime Text

Далее необходимо установить нужные для работы плагины. Мы рассмотрим установку самых популярных среди верстальщиков плагины, которые значительно упрощают разработку. Вы также можете поэкспериментировать с другими плагинами в Package Control, может быть вам понравятся и другие из огромного количества доступных пакетов.

Для установки плагинов в Sublime Text через Package Control необходимо вызвать меню, как мы это делали ранее: Ctrl+Shift+P. Затем вводим команду "Install Package" и выбираем нужный пакет из списка.

Самые популярные плагины для Sublime Text:

  • Emmet - ускоряет написание HTML и CSS кода до скорости света. Урок по Emmet ;
  • AutoFileName - дополняет код при написании путей до файлов в вёрстке;
  • Gist - подключает в Sublime Text возможность использовать сервис сниппетов кода GitHub Gist. Урок по Gist ;
  • Sass - плагин для подсветки Sass синтаксиса в Sass и Scss файлах. Раскрывает Emmet в Sass файлах.

Установка внешнего оформления Sublime Text

Мне очень нравится тема оформления One Dark Material Theme и подсветка кода соответствующей цветовой гаммой. Это наиболее сбалансированные, достаточно контрастные, но не слишком резкие цвета для комфортной работы в редакторе.

Дя установки цветового оформления One Dark нам необходимо доустановить следующие пакеты через Package Control:

  • One Dark Color Scheme - цветовая схема для подсветки кода;
  • One Dark Material - Theme - тема оформления UI Sublime Text.

Установка плагина вручную

Некоторые плагины более не обновляются в Package Control или просто там не фигурируют. Кое-какие из этих плагинов имеют жизненную необходимость при работе с кодом и их приходится устанавливать вручную.

Один из таких плагинов BufferScroll - потрясающий плагин, который при повторном открытии документа устанавливает курсор на том месте, на котором вы закончили редактирование в прошлый раз, тем самым сокращая время на поиск нужной позиции для продолжения работы.

Для установки BufferScroll вручную, перейдите на GitHub страницу плагина , скачайте и распакуйте его в любое удобное место на вашем диске. Далее в Sublime Text выбираем пункт меню Preferences > Browse Packeges. Откроется папка пользовательских данных на вашем диске. Скопируйте сюда папку, содержащую файлы Buffer Scroll и перезапуститие Sublime Text. Теперь плагин работает.

Тонкая настройка редактора, пресет моих настроек

Переходим к настройкам Sublime Text.

На Github Gist лежит мой пресет настроек, который я всегда использую для стартовой настройки редактора Sublime Text на новом рабочем месте или после переустановки системы. Вы можете использовать данный пресет в вашем редакторе и кастомизировать его при необходимости.

Код пресета для пользовательских настроек (Preferences.sublime-settings | Preferences > Settings):

{ "show_definitions": false, "auto_complete": false, "bold_folder_labels": true, "color_scheme": "Packages/One Dark Material - Theme/schemes/OneDark.tmTheme", "fold_buttons": false, "font_size": 13, "highlight_line": true, "indent_guide_options": [ "draw_normal", "draw_active" ], "line_padding_bottom": 2, "line_padding_top": 2, "margin": 2, "material_theme_compact_sidebar": true, "material_theme_compact_panel": true, "material_theme_small_statusbar": true, "material_theme_small_tab": true, "tab_size": 2, "theme": "OneDarkMaterial.sublime-theme", "word_wrap": "false", }

Код пресета для пользовательских клавиатурных сокращений (Default (Windows).sublime-keymap | Preferences > Key Bindings):

[ { "keys": ["alt+shift+f"], "command": "reindent" }, ]

Теперь при выделении и по нажатию Alt+Shift+F ваш код будет автоматически выравниваться отступами с соответствующей иерархией вложенности элементов.

Разместив данные сниппеты в соответствующих файлах настроек вы получите полностью готовый к рабое, настроенный Sublime Text или можете настроить редактор под себя. В настройках есть два поля - левое с дефолтными настройками и правое с пользовательскими. В дефолтных настройках вы можете увидеть подсказки к каждому свойству и применить его в правой части скопировав и установив своё значение.


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

Для того, чтобы сделать бэкап всех ваших настроек и быстро развернуть Sublime Text на другом рабочем месте, достаточно скопировать папку
"C:\Users\{Ваш пользователь}\AppData\Roaming\Sublime Text 3"
в потаённое резервное место на вашем диске или на флешку, а затем разместить у другого юзера или на другом компьютере в этой-же директории под пользователем.

Также дополнительно на ваше усмотрение можно отключить миникарту справа и скрыть меню. Это можно сделать перейдя в меню View > Hide Minimap и View > Hide Menu. Показать меню можно нажатием клавишы Ctrl на клавиатуре.

У начинающих верстальщиков и программистов часто возникают вопросы по поводу текстового редактора Sublime Text 3. Они касаются настройки и установки плагинов. В данной статье мы постарались дать максимум информации по этому поводу.

Как скачать

Просто выберите свою операционную систему и нажмите на нужную ссылку.

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

Запустите полученный файл. При его установке обязательно поставьте галочку Add to explorer context menu. Это нужно для того, чтобы у нас была возможность открывать файлы на нашем компьютере из контекстного меню, которое появляется после нажатия правой кнопкой мыши по нужному документу.

Плагины

Когда текстовый редактор установлен, пришло время плагинов, пакетов и прочих необходимых для эффективной работы модулей.

Package Control

Выделяем код на вкладке SUBLIME TEXT 3, копируем его, переходим в наш редактор, View — Show Console. Вставляем все это в нижнюю длинную строчку и нажимаем Enter. Дожидаемся когда операция по установке завершиться и перезагружаем Sublime Text, т.е. выключаем и заново запускаем.

Теперь для вызова консоли Package Control нам достаточно нажать Ctrl + Shift + P.

Появляется строчка поиска, набираем в ней install, выбираем Install Package.

После этого в новой открывшейся строчке выбираем название плагина который мы хотим установить, например:

Emmet

Набираем в этой строке Emmet, жмем Enter. Запускается установка. Ждем.

Теперь давайте проверим как все установилось, создайте файл index.html, откройте его правой кнопкой мыши — Open with Sublime Text, введите! и нажмите клавишу Tab. У Вас должна распаковаться первоначальная структура html документа.

Настройка горячих клавиш

Для того чтобы настроить автоматическое выравнивание верстки, DOM дерева, переходим в Preferences — Key Bindings-User. В открывшемся файле между квадратными скобками вставляем наш код:

{ "keys": ["alt+shift+v"], "command": "reindent" }

Сочетание клавиш можете придумать свое. Главное, чтобы оно не совпадала с уже имеющимися в системе горячими клавишами. Проверить можно в файле Preferences — Key Bindings-Default.

Все готово, берем любую кривую html верстку, выделяем ее и жмем alt+shift+v.

Прочие настройки редактора

Стандартные Preferences — Settings-Default. Чтобы их переопределить, делаем свои пользовательские Preferences — Settings-User. Не буду объяснять все, переведите комментарии в Google переводчике и посмотрите какие параметры вам нужно изменять, а какие оставить.

Я бы сделал

"fold_buttons": false,

это отключает кнопки треугольники для сворачивания блоков кода.

"auto_complete": false,

для тех кто использует Emmet и не нуждается в функции Автокомплит.