Створення сниппета в sublime text 3

Створення сниппета в sublime text 3
Розробники протягом усього процесу кодування знову і знову використовують одні і ті ж шматки коду. Одним із способів усунути цей повторюваний процес є використання фрагментів.

Створюємо новий сниппет

Для початку давайте розберемо створення фрагментів, які працюють так: вводите в потрібному місці документа заздалегідь підготовлену комбінацію символів, натискаєте tab - готово (сниппет вставляється в документ); при необхідності, якщо з'явиться список, що випадає, вибираєте пункт зі snip.

Отже, щоб створити такий сниппет перейдіть, см. Картинку, або зайдіть в папку AppData \ Roaming \ Sublime Text 3 \ Packages \ User і створіть в ній файл: названіе_сніппета.sublime-snippet.

Створення сниппета в sublime text 3

Якщо ви створили сниппет через опцію 'new snippet', то sublime надасть вам наступний шаблон для установки нового сниппета.

Далі необхідно додати потрібний нам фрагмент коду всередину буде . наприклад:

Потім ми встановлюємо ключове слово (тригер) всередині . Після того як ви введете ключове слово і натиснете tab. сниппет буде відображений на сторінці. Ім'я тригера має бути легким в запам'ятовуванні і відповідати фрагменту коду. Наприклад, в моєму випадку найбільш підходяще слово shadow.

Все готово, тепер ви можете зберегти сниппет. Для організації ваших фрагментів можна створювати папки для певних фрагментів коду, наприклад, імена папок: css, html, php і т.д.

Створення сниппета в sublime text 3

Відзначте, файли повинні зберігатися з розширенням .sublime-snippet. інакше sublime не розпізнає ваш файл як сниппет.

TAB і покажчик для поля

Крім того, бувають випадки, коли нам необхідно змінити певні характеристики всередині фрагмента коду (сниппета). У нашому випадку, для властивості CSS3 box-shadow. ймовірно, буде потрібно змінити колір тіні, розмиття або горизонтальне зміщення.

Sublime text 3 також надає можливість виділити конкретні поля, які ми хочемо змінити після вставки сниппета в документ. Ці поле (я) починаються з $ і наступними за ним фігурними дужками <>. наприклад:

У наведеному вище прикладі перший виділене поле буде $. і щоб перейти до наступних полях (для їх редагування) необхідно натиснути клавішу Tab. На наведеному нижче скріншоті зверніть увагу на перше значення властивості box-shadow. значення підсвічується, включаючи Вендорний префікс.

Створення сниппета в sublime text 3

Sublime text 3 має мульти-курсор, це дозволяє нам виділити кілька рядків коду за раз, тим самим істотно прискорюючи процес редагування. Щоб виділити і почати редагувати наступне поле ($) натисніть tab. і так далі по всіх полях.

Створення сниппета в sublime text 3

Встановлюємо пакет сніпетів

Вам не обов'язково робити все на свій розсуд. Є кілька пакетів, які ви можете встановити для практично будь-якої мови програмування.

За допомогою package control ви можете знайти і встановити відповідний вам пакет сніпетів.

Наприклад, я хочу встановити сніппети для SASS:

Створення сниппета в sublime text 3

Вам необов'язково запам'ятовувати ключове слово для сниппета, так як sublime text 3 покаже вам всі можливі варіанти, як тільки ви почнете набирати код.

Створення сниппета в sublime text 3

Обертаємо виділений текст фрагментом коду

Припустимо, ми хочемо, щоб при натисканні по ctrl + p текст обертався в тег p. В папці AppData \ Roaming \ Sublime Text 3 \ Packages \ XML створюємо файл, наприклад, названіе_сніппета. sublime-snippet.

У цьому файлі використовуємо наступний шаблон:

Далі йдемо в папку AppData \ Roaming \ Sublime Text 3 \ Packages \ User і створюємо файл Default (Windows) .sublime-snippet. для останніх ST потрібно файл: Default (Windows) .sublime-keymap. У цьому файлі необхідно задати комбініцію клавіш, по якій виділений текст буде обертатися за потрібне нам фрагментом коду, наприклад, в нашому випадку:

Все, тепер при натисканні ctrl + p. і виділивши попередньо фрагмент тексту, виділений текст обернеться в теги параграфа.

Шляхи і розташування папок можете використовувати свої.

Ось такий сниппет я використовую для того, щоб обернути js-код: