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

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

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

Модули Sublime Text

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

• Package control — менеджер пакетов (маст хэв);
• 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 как синтаксис по умолчанию для новых файлов:

"new_file_syntax": "Markdown/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

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

{ "keys": ["ctrl+q"],
  "command": "insert_snippet",
  "args": {"contents": "<p>${0:$SELECTION}</p>" }
}

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

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

{ "keys": ["ctrl+shift+r"],
  "command": "reindent" ,
  "args": { "single_line": false }
},
{ "keys": ["alt+m"],
  "command": "markdown_preview",
  "args": {"target": "browser", "parser":"markdown"}
}

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

Win / *nix macOS

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

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

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

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

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

Win / *nix macOS

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

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

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

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

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

<ul>
  <li>
    <h3 class="title"></h3>
    <p></p>
  </li>
  <li>
    <h3 class="title"></h3>
    <p></p>
  </li>
  <li>
    <h3 class="title"></h3>
    <p></p>
  </li>
</ul>

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

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

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

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

</body>
</html>

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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