SublimeText 2 — создание сниппета
Доброго времени суток. Мы продолжаем изучать замечательный редактор SublimeText 2. Так мы с Вами уже рассмотрели основы работы и интерфейс SublimeText 2. Превратили SublimeText 2 в редактор для WEB-разработчика, поставив дополнительные плагины. Но не всегда Вы найдете подходящий плагин. Для продвинутых пользователей, знающих Python это не проблема. А, что делать пользователям, которые не знают Python? А хочется некоторую рутину автоматизировать, например добавлять фрагмент код, через сокращенный ввод. Для этих целей в SublimeText 2 есть сниппеты. И в этой статье мы создадим свой сниппет.
Сниппет в SublimeText 2 — это фрагмент кода, который часто используется в языке программирования и который можно вызвать через меню или сокращенный набор. Сниппет можно вызвать путем ввода сокращенного выражения и нажать Tab. Или сниппет можно вызвать через командную строку (Ctrl+Shift+P) и ввести команду Snippet:<название сниппета>. Или через меню Tools->Snippets…
Как Вы уже могли понять сниппеты существенно помогают писать код, избавляя нас от набора одинаковых кусков кода. Ну, что ж давайте приступим к созданию собственного сниппета.
Переходим в меню Tools->New Snippet… Откроется файл с каркасом сниппета:
Давайте рассмотрим, что есть что:
- <snippet>…</sippet> — обертка сниппета, его начало и конец
- <content>…</content> — содержимое, которое будет добавляться при срабатывании сниппета <![CDATA[ сюда вставляем содержимое сниппета]]
- <tabTrigger>…</tabTrigger> — сокращенное выражение, которое при нажатии на Tab будет вызывать наш сниппет
- <scope>…</scope> — селектор диапазона для активации сниппета
- <description>…</description> — в шаблоне нет, но Вы можете добавить — это описание сниппета.
Теперь давайте остановимся на создании сниппета подробнее и создадим в качестве примера свой сниппет. При написании короткого выражения wh будет подставляться:
while (): endwhile;
В создании такого сниппета нет ничего сложного.
Создаем файл сниппета, для этого переходим в Tools->New Snippet…
И исправляем каркас следующим образом:
<![CDATA[ while() endwhile; ]]> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> wh <!-- 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 --> wh <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> -->
Сохраняем и проверяем.
Вводим в новом файле wh и жмем Tab и видим:
при нажатии на Tab мы перейдем к “инструкции”. Отлично именно то, что мы и хотели получить.
Давайте теперь остановимся на этом примере подробней и разберем, что мы сделали.
- Как я уже говорил выше сниппет должен начинаться с тега <snippet> и заканчиваться тегом </snippet>
- Инструкции сниппета, которые должны быть выполнены при отработке сниппета должны заключаться в теги <content> и </content>. А сам код (или текст), который будет выведен в результате отработки сниппета помещается в конструкцию <![CDATA[<код, который будет выведен >]]>. Как Вы видите в код мы поместили следующую инструкцию ${1:Введите условие}, которая позволяет нам переключаться между полями при помощи Tab.1 указывает, что это первое поле в переключении Tab-ом. А значение после двоеточия — это плейсхолдер (подсказка). Дальше у нас есть поле {0:инструкции}, 0 указывает, что это последнее поле для переключения Tab-ом, и “инструкции” — это плейсхолд. Если Вы укажите поля с одним и тем же значением, то они будут зеркальными, т.е. их значения будут одинаковыми.
- Ну и короткое выражение, которое вызывает наш сниппет должно заключаться в теги <tabTrigger> и </tabTrigger>
Надеюсь основы создания сниппетов я изложил понятно. А тем, кто хочет изучить создание сниппетов более глубоко я рекомендую заглянуть на страницу документации
А на этом я заканчиваю статью, посвященную созданию сниппетов для редактора SublimeText 2.