Пользователь
0,0
рейтинг
23 июля 2012 в 20:25

Разработка → Sublime Text 2: Как создать сниппет? перевод tutorial

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

О неточностях, опечатках, ошибках пишите в личку — буду оперативно исправлять.




Сниппет


Это шаблон сниппета в Sublime Text 2. Добраться до него можно через Tools-New Snippet.

  1. <snippet>
  2.  <content><![CDATA[
  3. Hello, ${1:this} is a ${2:snippet}.
  4. ]]>
  5.  </content>
  6.  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  7.  <!-- <tabTrigger>hello</tabTrigger> -->
  8.  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  9.  <!-- <scope>source.python</scope> -->
  10. </snippet>


Непосредственно код для вставки содержится между <![CDATA[ какой-то код ]]>. А вот реальный пример:
  1. <snippet>
  2.     <content><![CDATA[
  3.      assert_equal(${1:expected}, ${0:actual})
  4.   ]]></content>
  5.     <tabTrigger>ase</tabTrigger>
  6.     <scope>source.ruby</scope>
  7.     <description>assert_equal(..)</description>
  8. </snippet>
.

Теперь, когда вы вбиваете в редактор «ase» и затем нажимаете Tab «ase» заменяется на заданный в сниппете код.
  1. assert_equal( expected, actual )


Теперь мы понимаем, что ${1:expected} означает, что слово “expected” будет подсвечено первым после нажатия Tab, готовое к редактированию, а если нажать Tab еще раз, то курсор перейдет на ${0:actual}, т.е. подсвечено будет слово “actual”.

Довольно странно, что ${0:actual} подсвечивается вторым. Вы могли подумать, что по нажатию Tab после ввода «ase» подсвечено будет ${0:actual} т.к. 0 идет перед 1, но не тут то было — ${0} всегда будет выделено последним, куда бы вы его не впихнули. Так что если у вас сниппет наподобие этого:
  1. <snippet>
  2.  <content><![CDATA[
  3. Hello, ${1} is a ${2:snippet}. ${0}, ${3}
  4. ]]></content>
  5.  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  6.  <tabTrigger>hello</tabTrigger>
  7.  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  8.  <!-- <scope>source.python</scope> -->
  9. </snippet>

Каждый раз по нажатию Tab вас будет перебрасывать на ${1} затем на ${2} затем на ${3} и наконец ${0}.
Так же обратите внимание, что достигнув ${0}, выделение перестанет перемещаться. Можно догадаться, что ${0} обозначает тот участок кода, после которого пользователь обычно сразу начинает писать дальше.

Надоело жать на Tab


Вам могло показаться, что забиндить таким образом можно только кнопку Tab. А что если вы хотите использовать ctrl-alt-. чтобы создавать подобные обертки: <%= %>?
Чтобы этого добиться вы должны привязать клавиатурное сочетание к сниппету:
идем в Preferences, затем Key Bindings – User. Вот как это должно выглядеть:
  1. [
  2.  {
  3.     «keys»: [«command+shift+.»], 
  4.     «command»: «insert_snippet»,
  5.     «args»: {«name»: «Packages/User/erb.sublime-snippet»}
  6.  }
  7. ]

Итак, тут есть несколько опций:
“keys”: желаемое сочетания клавиш
“command”: название команды
“args”: дополнительные аргументы

Не забываем, что в конце концов нам нужно создать сниппет :) Чтобы найти где лежат все «packages» кликните на пункт меню Preferences, затем Browse Packages. Отыщите папку User и добавьте erb.sublime-snippet со следующим содержимым:
  1. <snippet>
  2.  <content><![CDATA[<%= ${1} %>]]></content>
  3. </snippet>


Готово!

Дополнение от zimorodok

1. Можно использовать переменные, например $TM_SELECTED_TEXT. Удобно для указания значения по умолчанию, когда для сниппета указана горячая клавиша или сниппет запускается из панели команд.

<snippet>
    <content><![CDATA[console.log(${0:$TM_SELECTED_TEXT});]]></content>
    <tabTrigger>cl</tabTrigger>
    <scope>source.js</scope>
    <description>console.log</description>
</snippet>


2. Можно использовать регулярные выражения, чтобы модифицировать тело сниппета в процессе набора.

<snippet>
    <content><![CDATA[set${5:T}${5/(T)|(I).*/(?1:imeout)(?2:nterval)/}(${20:function () \{${0:$TM_SELECTED_TEXT}\}}, ${10:50});]]></content>
    <tabTrigger>set</tabTrigger>
    <scope>source.js</scope>
    <description>setTimeout, setInterval</description>
</snippet>


При наборе «set» — TAB можно продолжить писать «I», и автоматом подставится «terval». На словах сложно описать, но это удобно.

Набор сниппетов для javascript от zimorodok

Ссылки:

www.sublimetext.com/download — Download
www.sublimetext.com/docs/api-reference — Plugin API Reference
habrahabr.ru/post/136529 — Отличная статья о создании плагинов для Sublime Text 2
github.com/bobthecow/sublime-sane-snippets — Sane Snippet — плагин для создания сниппетов (спасибо TycoooN)
sublimetext.info — Неофициальная документация
sublimetext.info/docs/en/reference/snippets.html — Глава про сниппеты
Перевод: Plattsi
Ярослав @YKapodastr
карма
19,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (51)

  • +6
    Пользуюсь для создания сниппетов плагином SaneSnippet, намного удобнее чем ковыряться в XML.
    • +1
      Добавил в топик, спасибо за ссылку — плагин опробую.
    • 0
      Есть еще Snippets snippets.me/. При использовании Distributor for Sublime Text вы получаете снипеты из Snippets в Sublime Text нативно. Как минимум выходит бесплатный и удобный UI для управления снипетами, как максимум куча других фич. Вот демка с TextMate www.youtube.com/watch?v=7FeyujDFo_Y, но с Sublime Text точно так же.
  • –7
    Подозрительно часто стали писать о Sublime Text 2 на Хабре. Сразу в комментах начали активно хвалить, потом и статьи пошли. Причём почему-то авторы этих статей других статей не имеют. Смотрите:
    habrahabr.ru/users/ykapodastr/topics/
    habrahabr.ru/users/siberianman/topics/
    habrahabr.ru/users/aingis/topics/
    Одно исключение:
    habrahabr.ru/users/faiwer/topics/
    Складывается впечатление, что это такой маркетинг.
    Если это не так, извиняюсь за излишнюю подозрительность.
    • +5
      Читаю хабр около трёх лет, решил и в жизни его как то поучаствовать. За пост не заплатили :(
      В будущем, надеюсь, порадую хабровчан и статьями на другие темы.
      • +1
        Ну что же, значит ошибся. Надо авторам идею предложить: давать лицензии за обзоры продукта на популярных ресурсах :)
        • 0
          Старый добрый бартер :)
          Кстати пользуюсь бесплатной версией Sublime Text 2 пока, из ограничений заметил только лишь крайне редко всплывающее окошко с предложением пожертвовать авторам немного денег )
          • +2
            Кстати, я его купил и ни грамма не пожалел. После NetBeans реально почувствовал кайф работы на слабых машинах, радует еще то, что одна лицензия подходит как для рабочей так и домашней тачки.

            За статью спасибо, добавил в избранное, попробую на досуге. Сам всячески агитирую за этот редактор.
            • +1
              одна лицензия подходит как для рабочей так и домашней тачки

              Это действительно радует.
              Вам спасибо )
    • 0
      Неправда ваша, у меня есть ещё один пост: «Простой универсальный переключатель на JavaScript», он просто не от моего аккаунта написан.
    • +2
      Редактор этот просто становится достаточно популярным. Многие мои знакомые (и я в том числе) в последнее время стали им пользоваться.
    • 0
      Из моего опыта общения с разработчиками Sublime я сомневаюсь что они кому-то заплатят за такое.
  • 0
    Чёрт, всё больше и больше радует этот редактор! Как без него жил, непонятно)

    п.с. Единственное чего мне не хватает в нём при редактировании css — это отсутвие блока палеты использованных цветов а-ля Top Style:

    image
    • 0
      Раньше пользовался notepad++, но Sublime Text 2 пришелся больше по душе, изначально привлек приятный дизайн, каюсь :)

      А вот блока а-ля Top Style правда не хватает, остается надеяться на светлое будущее )
      • 0
        или на копание и допиливание своими ручками…
        • 0
          К сожалению в этом я не силен, но если найдется умелец, который реализует подобный функционал — с благодарностью пожму ему руку )
          • 0
            да я бы и материально поблагодарил, раз такое дело…
            • +2
              Нашел Color Picker, возможно будет кому-либо полезно.
    • +2
      Плагин Live CSS. Подсвечивает код цвета его же цветом.
      • 0
        Не совсем то, но определенно полезен, спасибо за ссылку.
      • 0
        Спасибо, немного не то, но определённо полезно!
        • 0
          Вы-таки повторяете за мной )
          • 0
            )) Чёрт, не обновил вовремя…
  • +3
    В дополнение к сказанному:
    1. Можно использовать переменные, например $TM_SELECTED_TEXT. Удобно для указания значения по умолчанию, когда для сниппета указана горячая клавиша или сниппет запускается из панели команд.

    <code><snippet>
        <content><![CDATA[console.log(${0:$TM_SELECTED_TEXT});]]></content>
        <tabTrigger>cl</tabTrigger>
        <scope>source.js</scope>
        <description>console.log</description>
    </snippet></code>
    


    2. Можно использовать регулярные выражения, чтобы модифицировать тело сниппета в процессе набора.

    <snippet>
        <content><![CDATA[set${5:T}${5/(T)|(I).*/(?1:imeout)(?2:nterval)/}(${20:function () \{${0:$TM_SELECTED_TEXT}\}}, ${10:50});]]></content>
        <tabTrigger>set</tabTrigger>
        <scope>source.js</scope>
        <description>setTimeout, setInterval</description>
    </snippet>
    


    При наборе «set» — TAB можно продолжить писать «I», и автоматом подставится «terval». На словах сложно описать, но это удобно.

    Мой набор сниппетов для javascript
  • +1
    Класс, когда же появиться нормальный плагин для форматирования кода HTML/JS/CSS/PHP как в NetBeans
    • 0
      Могу посоветовать пару плагинов:
      Zen Coding для HTML
      jQuery Package для jQuery соответственно )
      • 0
        На мой взягл Zen Coding немного не из той серии, не могу я состыковать сокращённые теги с их полными вариантами… Мне проще вручную написать «back..» и автодополнением получить «background:» и так далее…
        • 0
          Просто требует время на привыкание, возможно много времени )
    • 0
      jsFormat — для javascript. Ставить можно через package control.
  • +2
    Не посоветует ли кто плагин для упрощения создания подсветки синтаксиса?
  • 0
    Ищу что-то такое: jetbrains Instant HTML editing
    видео

    Может кто видел для Sublime Text 2? :)
    • 0
      Нечто подобное делает эта програмка, но она пока только под Mac OS — под Win жутко сырая и глючная.

      По собственному опыту пользования jetbrains Instant HTML editing для WebStorm скажу, что мне оно больше мешало, а написание js превращалось в сущий ад. Но вам виднее :)
      • 0
        Огромное спасибо! Под Mac и надо :)
        Будем пробовать!

        Собственно продукцией jetbrains я и не пользуюсь. Плагин этот нашел здесь: habrahabr.ru/post/147979/#comment_4993280
        Можно сказать, что мечтал о таком плагине и вот он нашелся, да не под мои любиые IDE.

        Очень полюбился Zend Studio (ну или Еclipse сойдет на крайний случай) и второй – Sublime Text 2 (Вот только не привыкну работать с ftp/sftp в нем..)
  • –2
    Вы тут так хвалите этот редактор… уже не первый раз. Ну что ж, я скачал, поставил, запустил. Открыл cpp-файл, php. Всё отлично, красивая подсветка. Потом захотелось посмотреть, как он раскрашивает паскалевские файлы. И — о ужас! — никак!

    Это у разработчиков такое оригинальное чувство юмора, или просто врожденная нетерпимость к паскалю?
    • 0
      Можете не благодарить )
      svn.textmate.org/trunk/Bundles/Pascal.tmbundle/
      • 0
        Это я и так нашёл, просто вопрос к разработчикам — какая причина не включения подсветки по умолчанию. Типа, паскалисты самые продвинутые, и должна сами искать себе всякие плагины?
        • 0
          Может не было соответствующего фичереквеста (или мало «лайков») или последняя версия бандла ещё не соответствует их стандартам?
        • 0
          А что в этом такого? Я подсветку SASS,SCSS, Jade, Apache2 и Nginx конфигов ставил из PackageControl-а. В нём по умолчанию не так уж и много всего. Никакой ненависти к паскалю тут нет :)
          • 0
            Да и я не вижу плохого, в том, что базовый дистрибутив не перегружен, а то будет как Nero :)
            • 0
              Вы мне напомнили: xxx: В споре, кто раньше напишет свою операционную систему, ACDSee или Nero, победили Google и Firefox
              • 0
                Попов выиграл)
                Посыпаю голову пеплом, не удержался.
  • 0
    Господа, подскажите: очень не хватает функции, как в PhpStorm, вызывающейся по Ctrl+W — последовательное выделение родительского тега/блока, вверх по иерархии.

    То есть встаём курсором на слово, нажимаем Ctrl+W — выделилось слово, еще раз — предложение, еще раз — родительский тег и т.д.

    Возможно есть стандартное, ну или может нестандартное решение в ST?
    • 0
      Вообще наиболее подходящий аналог это Ctrl+Shift+Space, но стоит посмотреть и другие шорткаты касательно выделения:



      P.S.: на картинке 1-й раздел.
    • 0
      Оригинал шпоры по шорткатам здесь
  • 0
    многие купили это редактор?
    • 0
      С ним можно полноценно работать и не покупая, в триальной версии нет ограничений никаких, насколько я понял.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.