SublimeText 2 — создание сниппета

Ромчик
0

Доброго времени суток. Мы продолжаем изучать замечательный редактор SublimeText 2. Так мы с Вами уже рассмотрели основы работы и интерфейс SublimeText 2. Превратили SublimeText 2 в редактор для WEB-разработчика (  ), поставив дополнительные плагины. Но не всегда Вы найдете подходящий плагин. Для продвинутых пользователей, знающих Python это не проблема. А, что делать пользователям, которые не знают Python? А хочется некоторую рутину автоматизировать, например добавлять фрагмент код, через сокращенный ввод. Для этих целей в SublimeText 2 есть сниппеты. И в этой статье мы создадим свой сниппет.

Сниппет в SublimeText 2 — это фрагмент кода, который часто используется в языке программирования и который можно вызвать через меню или сокращенный набор. Сниппет можно вызвать путем ввода сокращенного выражения и нажать Tab. Или сниппет можно вызвать через командную строку (Ctrl+Shift+P) и ввести команду Snippet:<название сниппета>. Или через меню Tools->Snippets…

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

Переходим в меню Tools->New Snippet… Откроется файл с каркасом сниппета:

Шаблон сниппета

Давайте рассмотрим, что есть что:

  1. <snippet>…</sippet> — обертка сниппета, его начало и конец
  2. <content>…</content> — содержимое, которое будет добавляться при срабатывании сниппета <![CDATA[ сюда вставляем содержимое сниппета]]
  3. <tabTrigger>…</tabTrigger> — сокращенное выражение, которое при нажатии на Tab будет вызывать наш сниппет
  4. <scope>…</scope> — селектор диапазона для активации сниппета
  5. <description>…</description> — в шаблоне нет, но Вы можете добавить — это описание сниппета.

Теперь давайте остановимся на создании сниппета подробнее и создадим в качестве примера свой сниппет. При написании короткого выражения wh будет подставляться:

while ():

endwhile;

В создании такого сниппета нет ничего сложного.

Создаем файл сниппета, для этого переходим в Tools->New Snippet…

И исправляем каркас следующим образом:

<![CDATA[
while()
endwhile;
]]>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>wh</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->

Сохраняем файл. Для этого в переходим File->Save As и называем его wh.sublime-snippet.

Проверяем, создаем новый файл и вводим wh жмем Tab и видим:

Отлично мы с Вами создали простейший сниппет для SublimeText 2.

Давайте немного модернизируем наш сниппет. При вводе короткого выражения wh и нажатии на Tab появлялось:

while(Введите условие)
инструкции
endwhile;

При этом было выделено “Введите условие”, а при нажатии Tab мы переходили к “инструкции”.

Для этого отредактируем файл wh.sublime-snippet следующим образом:

<![CDATA[
while(${1:Введите условие})
${0: инструкции}
endwhile;
]]>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>wh</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->

Сохраняем и проверяем.

Вводим в новом файле wh и жмем Tab и видим:

при нажатии на Tab мы перейдем к “инструкции”. Отлично именно то, что мы и хотели получить.

Давайте теперь остановимся на этом примере подробней и разберем, что мы сделали.

  1. Как я уже говорил выше сниппет должен начинаться с тега <snippet> и заканчиваться тегом </snippet>
  2. Инструкции сниппета, которые должны быть выполнены при отработке сниппета должны заключаться в теги <content> и </content>. А сам код (или текст), который будет выведен в результате отработки сниппета помещается в конструкцию <![CDATA[<код, который будет выведен >]]>. Как Вы видите в код мы поместили следующую инструкцию ${1:Введите условие}, которая позволяет нам переключаться между полями при помощи Tab.1 указывает, что это первое поле в переключении Tab-ом. А значение после двоеточия — это плейсхолдер (подсказка). Дальше у нас есть поле {0:инструкции}, 0 указывает, что это последнее поле для переключения Tab-ом, и “инструкции” — это плейсхолд. Если Вы укажите поля с одним и тем же значением, то они будут зеркальными, т.е. их значения будут одинаковыми.
  3. Ну и короткое выражение, которое вызывает наш сниппет должно заключаться в теги <tabTrigger> и </tabTrigger>

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

А на этом я заканчиваю статью, посвященную созданию сниппетов для редактора SublimeText 2.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2017 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика