Sublime Text для работы с контентом

Sublime Text для работы с контентом

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

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

Модули Sublime Text

Мой базовый набор:

    — менеджер пакетов (маст хэв);
  • Theme — Soda — очень классная тема;
  • Drupal — базовая поддержка стандартов Drupal (мы же с вами Drupal разработчики);
  • SCSS — поддержка SASS (SASS);
  • Compass — поддержка Compass (Compass).

Модули и темы устанавливаются через Package control.

Названия модулей говорят сами за себя, тут все прозрачно. Я бы хотел лишь отметить, что благодаря модулю Compass компилировать SCSS файлы можно прямо из Sublime:

пункт меню Tools → Build или комбинация клавиш Ctrl B ( Cmd B )

Тут и далее в скобках указывается комбинация клавиш для macOS. Как вы увидите далее, горячие клавиши — это и есть главное преимущество этого редактора.

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

  • LiveReload — перезагружает страничку в браузере при сохранении файла;
  • Markdown Preview — компилирует Markdown в HTML и открывает в браузере;
  • ApplySyntax — автоматически определяет тип нового файла.

Дополнительных модулей, как видите, у меня не так уж и много, и это еще одна заслуга Sublime — большинство необходимых фич можно получить без дополнений. Единственную настройку я сделал для модуля ApplySyntax, установил Markdown как синтаксис по умолчанию для новых файлов:

Помимо упомянутых выше модулей, мне довелось перепробовать еще массу дополнений, но я не стал включать их в статью.

Сниппеты и горячие клавиши

Раньше я предпочитал размечать контент сразу в HTML. Для этого я использовал следующие сочетания клавиш, как горячие для расстановки тегов:

  • Ctrl 1 — заголовок 1-го уровня: <h1>Выделенный текст</h1>
  • Ctrl 2 — заголовок 2-го уровня: <h2>Выделенный текст</h2>
  • Ctrl 3 — заголовок 3-го уровня: <h3>Выделенный текст</h3>
  • Ctrl P — параграф: <p>Выделенный текст</p>
  • Ctrl W — элемент списка: <li>Выделенный текст</li>
  • Ctrl E — ссылка: <a href="#">Выделенный текст</a>
  • Ctrl R — блок: <div>Выделенный текст</div>
  • Ctrl T — выделенный элемент: <strong>Выделенный текст</strong>
  • Ctrl Y — строчный элемент: <span>Выделенный текст</span>
  • Ctrl U — ненумерованный список: <ul>Выделенный текст</ul>
  • Shift Enter — перевод на новую строку: Выделенный текст<br />¶
  • Shift Space — неразрывный пробел: Выделенный текст&nbsp

И оказывается настолько привык к ним, что с переходом на Markdown для конструкций этого языка я решил использовать эти же сочетания, но с дополнительно зажатым Shift :

  • Ctrl Shift 1 — заголовок 1-го уровня: # Выделенный текст
  • Ctrl Shift 2 — заголовок 2-го уровня: ## Выделенный текст
  • Ctrl Shift 3 — заголовок 3-го уровня: ### Выделенный текст
  • Ctrl Shift W — элемент списка: * Выделенный текст
  • Ctrl Shift E — ссылка: [Выделенный текст](#)
  • Ctrl Shift T — выделенный элемент: **Выделенный текст**
  • Ctrl Shift Enter — перевод на новую строку: Выделенный текст ¶

Настраиваются горячие клавиши в конфигурационном файле:

Preferences → Key Bindings — User

Вглядит это примерно так:

Разобраться не сложно, вот очень полезный ресурс на эту тему — docs.sublimetext.info.

Заодно я настроил хоткеи Ctrl Shift R ( Cmd Shift R ) и Alt M на команды автоматического расставления отступов и предпросмотра для Markdown соответственно:

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

По их образу и подобию можно настроить нужные вам сочетания и функции.

Еще хочу поделиться парочкой полезных сочетаний по теме, работающих по умолчанию:

  • Ctrl Shift L ( Cmd Shift L ) — преобразует выделение в отдельно выделенные строки, это полезно когда вы хотите обернуть в одинаковые теги сразу несколько строк, например для создания списков;
  • Alt Shift W ( Ctrl Shift W ) — оборачивает выделение в тег, по умолчанию это тег <p> , однако продолжив ввод, можно указать любой тег, я его использую например для <em> .

Для расстановки тегов так же очень удобно использовать киллер-фичу Sublime — множественные указатели ввода (устанавливаются с зажатым Ctrl или Cmd для macOS), в первом сочетании как раз используется этот принцип.

Более менее полные списки горячих клавиш, найденные на просторах интернета:

Автодополнение и автоподстановка

Это еще два мощных и удобных инструмента.

Автодополнение — это в общем-то уже привычная фича практически любого редактора: по мере ввода редактор предлагает наиболее возможные варианты завершения. Выглядит это в виде выпадающего списка. Этот список вызывается так же нажатием Ctrl Space ( Cmd Space ).

Автоподстановка — похожая фича, и мне кажется что ее идея в Sublime заимствована из Zen Codding. Суть в том, что при вводе определенных сокращений и последующего нажатия Tab , происходит замена этого сокращения на полную форму. Например ввод a заменяется на тег <a href=""></a> . Для тегов можно указывать классы и id, например a.link преобразуется в <a ></a> .

Сам модуль Zen Codding, который теперь называется Emmet так же доступен для Sublime, но с появлением ST3 необходимость в нем для меня практически отпала. Хотя он, несомненно, предоставляет гораздо больше возможностей, например создавать такие конструкции ul>li*3>h3.title+p . Результат преобразования:

Так что, если вам приходится много работать с HTML — крайне рекомендую Emmet. Единственная причина почему мне пришлось его удалить — перекрытие автоподстановки по умолчанию, которая мне показалась удобнее в некоторых моментах.

Еще несколько полезных автоподстановок самого Sublime Text:

html преобразуется в:

lorem преобразуется в:

Про этот замечательный редактор я мог бы рассказывать часами. А какие у вас любимые фичи или модули для Sublime?

📎📎📎📎📎📎📎📎📎📎