Sublime Text 2/3 — сниппеты

  •   21.02.2013
  •   14 комментариев
  •   Кодинг

Пришло время рассмотреть такую возможность в Sublime Text 2, как сниппеты. Надеюсь, все в курсе, что сниппеты — это фрагменты кода/текста, пригодные для многократного использования.

Sublime Text 2 - сниппеты

Для того, чтобы увидеть доступные для текущего типа файла сниппеты, достаночно выбрать в меню пункт Tools → Snippets…, либо же воспользоваться уже знакомой нам комбинацией Ctrl+Shift+P, и начать набирать в появившейся панели слово «snippet». Обратите внимание, что набор доступных сниппетов меняется в зависимости от выбранного типа файла.

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

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

Ваш первый сниппет в Sublime Text 2

Для создания сниппета в Sublime text 2 достаточно выбрать в меню Tools → New Snippet…. При этом откроется заготовка для будущего сниппета, которую вы можете править на свое усмотрение. Собственно, сам сниппет в этой заготовке занимает всего одну строку (она выделена на рисунке ниже), весь остальной код — это вспомогательная разметка и опции.

Заготовка для будущего сниппета в Sublime Text 2

Попробуем на примере создания нового сниппета рассмотреть доступные возможности.
Первым делом нажмите комбинацию Ctrl+S для сохранения текущего сниппета. Обратите внимание, что Sublime предлагает сохранить сниппет в пользовательской директории профиля пользователя (в папке Packages/User) под именем untitled.sublime-snippet. Естественно, имя файла вы можете изменить на свое усмотрение, а расширение оставьте неизменным. Причем желательно давать файлам осмысленные имена, поскольку эти имена будут отображаться в подсказке рядом с сокращением для запуска сниппета. Также рекомендую во избежание дальнейшей путаницы не валить все сниппеты в одну кучу, а создать для их хранения структуру из вложенных подпапок в папке Packages/User.

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

<tabTrigger>hello</tabTrigger>

Раскомментировав вторую доступную опцию (заключенную в тег scope), вы можете задать типы файлов, в которых сниппет будет доступен для использования. Например, если вы хотите, чтобы сниппет был доступен только при редактировании html-файлов, то соответствующая строка должна выглядеть так:

<scope>text.html</scope>

Если же строку, содержащую тег scope, оставить закомментированной, то сниппет будет доступен при работе с любыми типами файлов.

Совет

Обратите внимание, что для того, чтобы закомментировать или раскомментировать строку (или последовательность символов) в Sublime Text 2, достаточно поставить курсор на эту строку (или выделить последовательность символов) и нажать комбинацию Ctrl+/. При этом умный Sublime распознает тип документа и создаст комментарий, соблюдая текущий синтаксис.

У сниппетов в Sublime есть одно очень полезное свойство — возможность задавать ключевые точки для редактирования, переключаться между которыми можно по нажатию на Tab. Позиции этих точек задаются при помощи символа $ и фигурных скобок (см. скриншот выше). Причем можно задать как «пустую» ключевую точку, так и заполнить ее дефолтным текстом (который автоматически выделяется при переключении на эту точку). Пустую ключевую точку имеет смысл создавать, если вы хотите, чтобы курсор просто встал в нужное место. Например, здесь в первой ключевой точке курсор просто установится в заданное место, а при переключении на вторую точку будет выделено слово «сниппет»:

<content><![CDATA[
Привет, ${1}. Это ${2:сниппет}.
]]></content>

Есть множество неочевидных, но полезных кейсов, доступных для использования в сниппетах. Так, можно использовать в сниппетах уже известные нам множественные курсоры, если нужно ввести один и тот же текст несколько раз. Вот реальный пример такого рода, используемый в моем случае для редактирования статей в Joomla (в том числе и этой):

<content><![CDATA[
<hr class="system-pagebreak" title="${1}"  alt="${1}" />
<h2>${1}</h2>
${2}
]]></content>

В примере выше один и тот же текст задается для заголовка страницы и текста названия в содержании статьи. Если вы не работаете с Joomla, можете не заморачиваться с этим примером, просто возьмите прием на вооружение.

Таким же образом можно создавать какие угодно необходимые вам сниппеты.

Установка сниппетов через Package Control

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

В Sublime Text 2 предусмотрена возможность устанавливать наборы сниппетов в виде пакетов (таких же, как плагины, темы и т.п.). Делается это все через тот же Package Control.

Для начала нужно запустить командную панель комбинацией клавиш Ctrl+Shift+P, набрать там слово install и нажать Enter (при этом должна появиться и подсветиться строка «Package Control: Install Package»).

Установка сниппета через Package Control в Sublime Text 2

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

Итак, в появившемся окошке установки пакетов через Package Control введите свой поисковый запрос. Например, это может быть слово snippet, если вы просто хотите просмотреть список доступных к установке наборов сниппетов. Либо же вы сразу можете набрать название языка программирования, для которого хотите установить набор сниппетов.

Просмотр доступных наборов сниппетов в Package Control в Sublime Text 2
Поиск набора сниппетов для JavaScript в Package Control в Sublime Text 2

После установки сниппета вы точно также можете увидеть в командной панели список всех доступных сниппетов для текущего типа файла, набрав в командной панели (Ctrl+Shift+P) соответственно слово snippet, либо название нужного языка. Естественно, такой просмотр следует осуществлять только в качестве подсказки по доступному набору сниппетов, поскольку вставлять в документ сниппеты из командной панели далеко не так удобно, как использовать для этого буквенное сокращение и клавишу Tab.

Это все, что я хотел рассказать про сниппеты. Рекомендую также взглянуть на другие мои статьи про Sublime Text 2, если вы этого еще не сделали:


Оставить комментарий

14 комментариев на «“Sublime Text 2/3 — сниппеты”»

    • Так они же все лежат в каталоге пользователя в виде отдельных файлов. В чем проблема открыть и отредактировать такой файл?

      • Это понятно. Где в Ubuntu они лежат? И можно ли до них добраться более простым путем, чем шуршать по каталогам?

        Спасибо

      • Как по мне, «шуршать по каталогам» — это как раз и есть самый простой путь 🙂
        Там особо нечего шуршать, можно справиться меньше, чем за минуту.
        Поиск в каталоге ~/.config/sublime-text-2/Packages по маске *.sublime-snippet в любом файловом менеджере (я например использую Double Commander) выдаст вам все имеющиеся файлы сниппетов, среди которых достаточно просто отыскать нужный.

      • Тогда уж впору задать вопрос — отчего Sublime, а не vi 😉
        Для большинства целей я использую GUI-шные инструменты, и не вижу причин, по которым я должен отходить от этого подхода в случае с файловым менеджером. Предпочитаю двухпанельники, и из опробованных мной GUI-шных двухпанельников Double Commander — самый функциональный и приятный в использовании.

        • Попробовал, понравилось. Вопрос, как сделать так, чтобы он был доступен из меню? Дело в том что из ppa он не ставится на 13.04, а если запускать и portable, то неудобно

        • Пропишите в источниках приложений в настройках этого ppa «quantal» вместо «raring», и все будет устанавливаться нормально. Когда появятся репозитории для raring — сможете вернуть как было.
          Либо же просто скачайте оттуда же и установите вручную deb-пакет.

        • А… 🙂
          Ну в любом случае, рекомендации те же — либо прописать «precise» в конфигах, либо вручную скачать и установить deb-пакет.

  1. Приветствую!
    В видео от tutsplus есть автодополнение — подсказка по сниппетам (т.е у него появляются все возможные варианты) — не знаете, какой плагин используется для этого? Т.е я печатаю допустим в css m10 + tab — все ок работает. Как надо: m10 (появляется список возможных сниппетов) и далее выбираю нужный.

    Спасибо.

    • Вопрос отпал сам собой. У меня есть такое дополнение, установил другой плагин — все ок)

  2. А как изменить стандартные сниппеты с «sublime text 3»? Как их изменить в «sublime text 2» я нашел, но в новой версии все сниппеты в одном файле, хрен знает какой кодировки(

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *