Sublime Text 2: Как создать сниппет?

в 16:25, , рубрики: Веб-разработка, Программирование, сниппеты, Софт, удобство

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, готовое к редактированию. If если нажать 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>

Готово!

Автор: YKapodastr

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js