Сниппеты в Sublime Text. Как создать сниппет. Полная инструкция

Сниппеты в Sublime Text. Как создать сниппет. Полная инструкция

Сниппеты — это готовые блоки кода, которые часто используются при создании html разметки, css стилей, программного кода, и так далее. Использование сниппетов значительно сокращает время на написание кода, так как вы начинаете использовать заготовки прямо из редактора. Если вы используете расширение Emmet в Sublime Text — то вероятно знакомы со сниппетом который создает html разметку с doctype html5 при наборе знака ! и нажатии клавиши TAB. В этой статье мы разберемся подробно как создать свой сниппет в Sublime Text 2.

 

Как создать сниппет в Sublime Text

Открываем Sublime Text. Идем в меню Tools → New Snippet. После этого у нас появляется новое окно с заготовкой для нового сниппета. Видим вот такой код:

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

Разберемся подробнее что значат эти строки и как их можно изменить. Раскомментируем строку с тегом <tabTrigger>, и строку с тегом <scope>.

 

Строка с тегом tabTrigger

Содержимое в строке <tabTrigger>hello</tabTrigger> означает что при наборе символов hello и нажатии клавиши TAB будет срабатывать данный сниппет. То есть это является триггером для данного сниппета.

 

Строка с тегом scope

Содержимое в строке <scope>source.python</scope> означает что данный сниппет будет работать в скриптах python.

Чтобы создать сниппет который будет работать html или css необходимо использовать другие значения для строки scope.

Так, для html сниппета строка <scope> должна быть следующей:

<scope>text.html</scope>

Для CSS:

<scope>source.css</scope>

Для LESS:

<scope>source.css.less</scope>

Полный список всех возможных значений scope смотрите конце статьи или по ссылке.

Если оставить строку <scope> закомментированной — то данный сниппет будет работать во всех файлах.

 

Тег content

Рассмотрим блок с тегом <content>

<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>

В параметре CDATA[ ... ] указан собственно текст сниппета, то что будет выведено когда мы наберем hello (значение tabTrigger в нашем примере) и нажмем TAB. То есть на экран выведется:

Hello, this is a snippet.

Ключевые точки

Разберемся со знаками ${1:this} и ${2:snippet}. Это ключевые точки для редактирования сниппета. После вызова сниппета перемещаться по ним можно используя клавишу TAB. В данном примере ключевые точки заданы с некоторыми значениями по умолчанию. Можно задать свое значение по умолчанию, которое выделится для редактирования когда мы создадим сниппет, либо сделать пустую ключевую точку. Создавать пустую ключевую точку имеет смысл тогда когда просто необходимо поставить курсор в нужное место. В примере ниже я изменил текст сниппета и ключевые точки. Первая точка ${1} — пустая, а вторая ${2:сниппет} с значением по умолчанию.

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

Множественные курсоры

Известно что в Sublime Text с помощью зажатой клавиши Ctrl можно поставить курсор сразу в нескольких местах для ввода текста. Множественные курсоры можно использовать и при создании сниппетов. Чтобы задать множественный курсор, необходимо несколько раз указать одну и ту же ключевую точку. Пример ниже:

<h2>${1}</h2>
<p>${2}</p>
<a href="" title="${1}">Читать далее</a>

Это пример сниппета для html разметки короткой новости или статьи. В этом примере используется множественный курсор в точке ${1}, так как она упоминается в сниппете два раза. Соответственно при запуске сниппета курсор автоматически станет в два разных места — в тег <h1>${1}</h1> и в значение атрибута title="${1}" для ссылки. Этот пример сделан только для того чтобы показать как задавать и использовать множественные курсоры при создании сниппетов в Sublime Text.

 

Пример готового сниппета

После манипуляций над начальным примером сниппета, можем получить вот такой сниппет для html документов:

<snippet>
<content><![CDATA[
Привет, ${1}. Это ${2:сниппет}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>hello</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

 

Сохранение сниппетов

Сохранять файл со сниппетом можно в папку Packages/User . По умолчанию Sublime предлагает сохранить его под именем untitled.sublime-snippet. Имя файла изменяем на свое усмотрение, а расширение необходимо оставить неизменным. Желательно давать файлам осмысленные имена. Также можно создать структуру из вложенных папок внутри Packages/User чтобы сортировать все сниппеты, и не возникло путаницы в будущем.

На этом все. Ниже приведен список значений тега scope, чтобы определять сниппеты к конкретным типам файлов.

 

Список значений <scope>

Ниже приведен полный список всех возможных значений параметра <scope> при создании сниппетов в Sublime Text 2.

ActionScript: source.actionscript.2
AppleScript: source.applescript
ASP: source.asp
Batch FIle: source.dosbatch
C#: source.cs
C++: source.c++
Clojure: source.clojure
CoffeeScript: source.coffee
CSS: source.css
D: source.d
Diff: source.diff
Erlang: source.erlang
Go: source.go
GraphViz: source.dot
Groovy: source.groovy
Haskell: source.haskell
HTML: text.html(.basic)
JSP: text.html.jsp
Java: source.java
Java Properties: source.java-props
Java Doc: text.html.javadoc
JSON: source.json
Javascript: source.js
BibTex: source.bibtex
Latex Log: text.log.latex
Latex Memoir: text.tex.latex.memoir
Latex: text.tex.latex
LESS: source.css.less
TeX: text.tex
Lisp: source.lisp
Lua: source.lua
MakeFile: source.makefile
Markdown: text.html.markdown
Multi Markdown: text.html.markdown.multimarkdown
Matlab: source.matlab
Objective-C: source.objc
Objective-C++: source.objc++
OCaml campl4: source.camlp4.ocaml
OCaml: source.ocaml
OCamllex: source.ocamllex
Perl: source.perl
PHP: source.php
Regular Expression(python): source.regexp.python
Python: source.python
R Console: source.r-console
R: source.r
Ruby on Rails: source.ruby.rails
Ruby HAML: text.haml
SQL(Ruby): source.sql.ruby
Regular Expression: source.regexp
RestructuredText: text.restructuredtext
Ruby: source.ruby
SASS: source.sass
Scala: source.scala
Shell Script: source.shell
SQL: source.sql
Stylus: source.stylus
TCL: source.tcl
HTML(TCL): text.html.tcl
Plain text: text.plain
Textile: text.html.textile
XML: text.xml
XSL: text.xml.xsl
YAML: source.yaml

 

Материалы по теме:
snippets.me — удобная программа для создания, хранения и навигации по библиотеке сниппетов
Неофициальная документация по Sublime Text 2
JS сниппеты для Sublime Text 2