Snippet sublime text 3

Snippet sublime text 3

Разработчики на протяжении всего процесса кодирования снова и снова используют одни и те же куски кода. Одним из способов устранить этот повторяющийся процесс является использование сниппетов.

Чтобы сделать ваш процесс кодирования более эффективным редактор sublime text 3 предоставляет разработчикам возможность создавать и использовать пользовательские сниппеты. В этой краткой статье я покажу как в sublime text 3 можно создать, редактировать и вставить сниппет; этим вы немного облегчите себе рабочий процесс в редакторе sublime text 3.

Создаем новый сниппет

Для начала давайте разберем создания сниппетов, работающих так: вводите в нужном месте документа заранее подготовленную комбинацию символов, нажимаете tab – готово (сниппет вставляется в документ); при необходимости, если появится выпадающий список, выбираете пункт со snip .

Итак, чтобы создать такой сниппет перейдите, см. картинку, или зайдите в папку AppDataRoamingSublime Text 3PackagesUser и создайте в ней файл: название_сниппета.sublime-snippet .

Если вы создали сниппет через опцию ‘ new snippet ’, то sublime предоставит вам следующий шаблон для установки нового сниппета.

Далее необходимо добавить нужный нам фрагмент кода внутрь будет , например:

Затем мы устанавливаем ключевое слово (триггер) внутри . После того как вы введете ключевое слово и нажмете tab , сниппет будет отображен на странице. Имя триггера должно быть легким в запоминании и соответствовать фрагменту кода. Например, в моем случае наиболее подходящее слово shadow .

Наконец, мы устанавливаем область, в которую этот сниппет может быть добавлен. Поскольку мы используем объявления для box-shadow, то область использования можно ограничить стилевым файлом, например:

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

Отметьте, файлы должны сохраняться с расширением .sublime-snippet , иначе sublime не распознает ваш файл как сниппет.

TAB и указатель для поля

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

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

В приведенном выше примере первое выделенное поле будет $ <1:1px>, и чтобы перейти к следующим полям (для их редактирования) необходимо нажать клавишу Tab. На нижеприведенном скриншоте обратите внимание на первое значение свойства box-shadow : значение подсвечено, включая вендорный префикс.

Читайте также:  Айфон 4s создать новый apple id

Sublime text 3 имеет мульти-курсор, это позволяет нам выделить несколько строк кода за раз, тем самым существенно ускоряя процесс редактирования. Чтобы выделить и начать редактировать следующее поле ( $ <2:1px>) нажмите tab , и так далее по всем полям.

Устанавливаем пакет сниппетов

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

Посредством package control вы можете найти и установить подходящий вам пакет сниппетов.

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

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

Оборачиваем выделенный текст фрагментом кода

Предположим, мы хотим, чтобы при нажатии по ctrl+p текст оборачивался в тег p . В папке AppDataRoamingSublime Text 3PackagesXML создаем файл, например, название_сниппета. sublime-snippet .

В этом файле используем следующий шаблон:

Далее идем в папку AppDataRoamingSublime Text 3PackagesUser и создаем файл Default (Windows).sublime-snippet , для последних ST потребуется файл: Default (Windows).sublime-keymap . В этом файле необходимо задать комбиницию клавиш, по которой выделенный текст будет оборачиваться нужным нам фрагментом кода, например, в нашем случае:

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

Пути и расположения папок можете использовать свои.

Вот такой сниппет я использую для того, чтобы обернуть js-код:

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

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

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

Читайте также:  Java сортировка массива по возрастанию

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

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

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

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

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

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

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

Для CSS:

Для LESS:

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

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

Тег content

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

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

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

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

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

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

Это пример сниппета для html разметки короткой новости или статьи. В этом примере используется множественный курсор в точке $ <1>, так как она упоминается в сниппете два раза. Соответственно при запуске сниппета курсор автоматически станет в два разных места — в тег

Читайте также:  Toshiba 19el933rb не выходит из дежурки

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

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

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

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

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

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

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

Пошаговая инструкция как в редакторе кода Sublime Text создавать сниппеты. Пара несложных действий и в вашем редакторе будут собственные сниппеты.

Популярный редактор кода Sublime Text имеет множество полезных инструментов, среди которых плагин Emmet и его сниппеты.

Но помимо предустановленных, так же можно добавлять и свои уникальные сниппеты. Делается это просто, так как в Sublime есть для этого специальные инструменты.

Добавляем свой сниппет в Sublime Text

Чтобы создать свой собственный уникальный сниппет, нужно в меню перейти по следующему пути:

Tools → Developer → New Snippet

В открывшейся странице мы увидим код для установки сниппета. Он следующего содержания:

Удаляем содержимое в строке 3 следующего содержания:

и вставляем в этом месте код своего нового сниппета.

Например, я в этой строке вставлю код подключающий библиотеку jQuery:

Теперь чтобы сниппет вызывался при нажатии на кнопку Tab↹ , нужно раскомментировать строку 6 исходника и вместо hello прописать набор символов после набора которого и нажатия клавиши Tab↹ будет разворачиваться заданный для сниппета код.

Я усложнять себе сниппет не буду и коротко укажу jq

Для сохранения сниппета нажимаем на клавиатуре Ctrl + S — в открывшемся окне даём название файлу сниппета, такое же как и код сниппета, то есть у меня это jq

Собственно весь процесс создания сниппета в Sublime Text 3 :

Теперь чтобы вызвать код этого сниппета, достаточно набрать в нужном месте jq и нажать клавишу Tab↹

Код сниппета может быть от небольшого однострочного фрагмента до большого кода на тысячи строк.

*** Авторизируйтесь чтобы писать комментарии.

Ссылка на основную публикацию
Adblock detector