Сниппеты sublime text 3

Пошаговая инструкция как в редакторе кода 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↹

Читайте также:  3 Длинных 4 коротких hp моноблок

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

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

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

Чтобы сделать ваш процесс кодирования более эффективным редактор 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 : значение подсвечено, включая вендорный префикс.

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 . В этом файле необходимо задать комбиницию клавиш, по которой выделенный текст будет оборачиваться нужным нам фрагментом кода, например, в нашем случае:

Читайте также:  1С таблица значений итог по колонке

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

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

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

Очередь просмотра

Очередь

  • Удалить все
  • Отключить

Хотите сохраните это видео?

  • Пожаловаться

Пожаловаться на видео?

Выполните вход, чтобы сообщить о неприемлемом контенте.

Понравилось?

Не понравилось?

Текст видео

Список уроков курса по Sublime Text 3 находится здесь:
http://master-css.com/page/nastroika-.
(там же находятся файлы для работы)

Сниппеты – очень удобный инструмент. Это кусок кода, который можно вставить по короткой команде. Обычно вебмастер делает сниппетом кусок кода, который часто использует на практике. И таких кусочков может быть много.

И вместо того что бы писать пару абзацев кода, на который уйдет минут 10 – этот код можно вставить за секунд 5.

В этом уроке вы поймете как создать и активировать свои собственные сниппеты в Sublime Text 3.

Оцените статью
Добавить комментарий

Adblock detector