Сниппеты sublime text 3: Как добавить свой сниппет в Sublime Text

Содержание

sublime text 3 «Создание собственного снипета» » Сайт частного веб разработчика

Опубликовано Roman K в 03.06.201903.06.2019

Создание собственного снипета

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

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

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

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

и в значение атрибута 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

материал взят с сайта http://rightblog.ru/2702

Перестали работать кастомные снипеты Emmet в Sublime Text 3

В один момент перестали работать кастомные снипеты Emmet в Sublime Text 3.

В настройки эммета очень давно не заходил, все прекрасно работало до последнего момента… Файл настроек:

{
    "snippets": {
        "html": {
            "abbreviations": {
                "gjq": "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery. min.js\"></script>"
            },
            "snippets": {
                "!ru": "<!DOCTYPE html>\n<html lang=\"ru\">\n\t<head>\n\t\t<meta charset=\"UTF-8\">\n\t\t<title>Document</title>\n\t\t<link rel=\"stylesheet\" href=\"styles/style.css\">\n\t</head>\n\t<body>\n\t\t${child}${cursor}\n\t</body>\n</html>",
                "debug12": "<div class=\"debug\">\n\t<div>\n\t\t<div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t</div>\n\t</div>\n</div>",
                "debug24": "<div class=\"debug\">\n\t<div>\n\t\t<div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t\t<div></div>\n\t\t</div>\n\t</div>\n</div>"
            }
        }
    }
}

Внятной информации найти не смог. .. Якобы все правильно написал… Переустановить эммет пробовал, не работает… что это может быть?

sublime-text
sublime-text-3
emmet

Теперь оно должно выглядеть вот так вот:

{
    "config": {
        "html": {
            "snippets": {
                "!ru": "{<!DOCTYPE html>}+html[lang=ru]>(head>meta[charset=UTF-8]+title{Document}+meta[name=viewport content='width=device-width, initial-scale=1, maximum-scale=1'])+body",
                "gjq": "script[src=https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js]",
                "debug12": "div.debug>div>div>div*12",
                "debug24": "div.debug>div>div>div*24"
            }
        }
    }
}

но не очень понятно, как создавать abbreviation, как управлять курсором и тд… Что еще можно делать в новых настройках?

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

фрагментов | Sublime Text Community Documentation

Независимо от того, программируете ли вы или пишете следующий бестселлер о вампирах, вы вероятно, будут нуждаться в определенных коротких фрагментах текста снова и снова. Использовать фрагменты, чтобы избавить себя от утомительного набора текста. Сниппеты — это умные шаблоны который вставит текст для вас и адаптирует его к их контексту.

Чтобы создать новый фрагмент, выберите Инструменты | Разработчик | Новый фрагмент… Sublime Text предоставит вам скелет для этого.

Фрагменты можно хранить в любой папке пакета, но для простоты пока вы учитесь, вы можете сохранить их в свой

Папка Packages/User .

Формат файла фрагментов

Фрагменты обычно находятся в пакете Sublime Text. они упрощены XML-файлы с расширением .sublime-snippet . Например, вы могли бы иметь приветствие .sublime-snippet внутри пакета электронной почты .

Структура типичного фрагмента следующая (включая подсказки Sublime Text вставляет для вашего удобства):

Элемент snippet содержит всю информацию, необходимую Sublime Text в чтобы знать что вставлять, нужно ли вставлять и когда . Давайте посмотрите на каждую из этих частей по очереди.

контент

Фактический фрагмент. Фрагменты могут варьироваться от простых до довольно сложных шаблоны. Мы рассмотрим примеры обоих позже.

Имейте в виду следующее при написании собственных сниппетов:

Если вы хотите получить буквальное $ , вы должны экранировать его как это: \$.
При написании фрагмента, содержащего отступы, всегда используйте вкладки. Когда фрагмент будет вставлен, вкладки будут превращается в пробелы, если вариант translate_tabs_to_spaces равно true .
Содержимое должно быть включено в раздел . Фрагменты не будут работать, если вы этого не сделаете!
содержание вашего фрагмента не должно содержать ]]> потому что эта строка символов преждевременно закроет Раздел , что приводит к ошибке XML. Работать обойдя эту ловушку, вы можете вставить неопределенную переменную в такая строка: ]]$NOT_DEFINED>
. Эта модифицированная строка проходит через синтаксический анализатор XML, не закрывая содержимое элемент , но Sublime Text будет замените $NOT_DEFINED пустой строкой перед вставкой фрагмент в свой файл. Другими словами, ]]$NOT_DEFINED> в вашем фрагменте файла содержимое будет записано как ]]> , когда вы запускаете фрагмент.

tabTrigger

Определяет последовательность клавиш, которые необходимо нажать для вставки этого фрагмента. После ввода этой последовательности фрагмент сработает, как только вы нажмете ключ ⭾ .

область

Селектор области, определяющий контекст, в котором фрагмент будет активен. Смотрите Области для получения дополнительной информации.

описание

Используется при отображении фрагмента в меню Фрагменты. Если нет, Sublime Текст по умолчанию соответствует имени файла фрагмента.

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

Примечание

Для краткости мы включаем только содержимое текст элемента в примерах, если не указано иное.

`Функции фрагмента`

`Переменные среды`

Фрагменты имеют доступ к контекстуальной информации в виде переменные окружения. Значения перечисленных ниже переменных устанавливаются автоматически с помощью Sublime Text.

Переменная	Описание
`$PARAM1 .. $PARAMn`	Аргументы, передаваемые команде insert_snippet9. (Здесь не рассматривается.)
`$SELECTION`	Текст, выбранный при запуске фрагмента.
`$TM_CURRENT_LINE`	Содержимое строки курсора при запуске фрагмента.
`$TM_CURRENT_WORD`	Слово под курсором при запуске фрагмента.
`$TM_DIRECTORY`	Имя каталога редактируемого файла. (с 3154)
`$TM_FILENAME`	Имя редактируемого файла, включая расширение.
`$TM_FILEPATH`	Путь к редактируемому файлу.
`$TM_FULLNAME`	Имя пользователя.
`$TM_LINE_INDEX`	Столбец, в который вставляется фрагмент, на основе 0.
`$TM_LINE_NUMBER`	Строка, в которую вставляется фрагмент, на основе 1.
`$TM_SELECTED_TEXT`	Псевдоним для $SELECTION .
`$TM_SCOPE`	Область начала каждого выбранного региона. (начиная с 3154)
`$TM_SOFT_TABS`	`ДА` , если `translate_tabs_to_spaces` истинно, иначе `НЕТ` .
`$TM_TAB_SIZE`	Количество мест на вкладке (управляется `tab_size` опция).

Давайте рассмотрим простой пример фрагмента с использованием переменных:

`Поля`

С помощью маркеров полей вы можете переключаться между позициями внутри фрагмент, нажав клавишу ⭾ . Поля используются, чтобы провести вас через настройка фрагмента после его вставки.

В приведенном выше примере курсор переместится на $1 , если вы нажмете ⭾ один раз. Если нажать ⭾ во второй раз, он поднимется до $2 и т. д. Вы также может двигаться назад в ряду с ⇧ ⭾ . Если вы нажмете ⭾ после самой высокой позиции табуляции, Sublime Text поместит курсор в конец содержимого фрагмента, чтобы вы могли возобновить обычное редактирование.

Если вы хотите контролировать, где должна быть точка выхода, используйте отметку $0 . К по умолчанию это конец фрагмента.

Вы можете выйти из полевого цикла в любое время, нажав Esc .

`Зеркальные поля`

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

В этом примере «Имя пользователя» будет заполнено тем же значением, что и «Первый Имя».

`Заполнители`

Немного расширив синтаксис поля, вы можете определить значение по умолчанию. значения для поля. Заполнители полезны всякий раз, когда есть общие случай для вашего фрагмента, но вы все равно хотите, чтобы он настраивался.

В качестве заполнителей можно использовать переменные:

И вы также можете вкладывать заполнители в другие заполнители:

`Подстановки`

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

Синтаксис замены имеет следующие синтаксисы:

${var_name/regex/format_string/}
${var_name/regex/format_string/options}

var_name36 8 2 Имя переменной: 1 , 2 … или переменная среды, такая как TM_FILENAME или SELECTION . регулярное выражение Регулярное выражение в стиле Perl: см. документацию библиотеки Boost для регулярные выражения (открывается в новом окне). format_string Строки формата см. в документации библиотеки Boost (открывается в новом окне). Опции Дополнительно. Может быть любым из следующих: i Регулярное выражение без учета регистра. g Заменить все вхождения регулярного выражения . m Не игнорировать новые строки в строке. 9(\w)|(?:_(\w))/(?1\u$1:)(?2 \u$2:)/g} Оригинал: ${1:text_in_snail_case} # Выход: Трансформация: Текст в корпусе улитки Оригинал: text_in_snail_case Вы также можете использовать переменные среды с заменами: Быстрая вставка текста и кода с помощью фрагментов Sublime Text На этой странице… Устали вырезать и вставлять шаблон HTML5? Или постоянно вводить один и тот же код? К счастью, Sublime Text позволяет легко быстро вставлять фрагменты кода, которые вы определяете. Как вы, наверное, знаете, когда вы вводите p в HTML-документе в Sublime Text и нажимаете Tab, он автоматически расширяется до . Но что, если вам это не нравится (мне не нравится), и вместо этого вы хотите, чтобы он расширился до этого (с курсором, появляющимся там, где находится канал)? <р> | Давайте создадим сниппет именно для этого. Создать Чтобы создать свой первый фрагмент в Sublime Text, сделайте следующее: Выберите «Инструменты» > «Новый фрагмент». Откроется новый безымянный файл, содержащий следующее: <фрагмент> Содержимое находится между & ]]> , в результате получается: <содержание> 1 доллар ]]> Видите, что $1 ? Это говорит Sublime Text поместить курсор туда, когда он закончит расширение вашего фрагмента. Sublime Text называет это маркером поля . Далее следует tabTrigger , текст, который вы вводите, за которым следует вкладка, которая расширяется для создания содержимого. В нашем случае мы хотим использовать букву стр . Избавьтесь от комментария, описывающего tabTrigger , а затем измените фактическую строку для tabTrigger на это: п Наконец, область действия, которая определяет типы файлов (HTML, CSS, PHP, сценарий оболочки и т. д.), в которых происходит расширение. Опять же, избавьтесь от закомментированной строки, описывающей область , и измените строку для области на эту: . text.html На данный момент файл должен выглядеть так: <фрагмент> 1 доллар ]]> п text.html Сохранить Сохраните файл. Когда вы это сделаете, вам нужно будет определить две вещи: имя файла и место его сохранения. Имя файла: файл должен заканчиваться на .sublime-snippet , например: foo. sublime-snippet . Что идет перед .sublime-snippet , зависит от вас. Мне нравится использовать tabTrigger , если это вообще возможно, вместе с основной частью области действия перед tabTrigger , что дает мне это: html-p.sublime-snippet . Где его сохранить: когда вы нажимаете «Сохранить», Sublime Text автоматически пытается сохранить файл в нужной папке. Mac OS X: /Users/yourname/Library/Application Support/Sublime Text 2/Packages/User Окна: Windows Portable (USB-накопитель): Линукс: Вам не нужно беспокоиться о местоположении, так как Sublime Text позаботится об этом за вас, но если по какой-то странной причине вы не в нужном месте, вам нужно будет перейти в нужное место . Тест Теперь давайте протестируем наш новый фрагмент. Откройте документ HTML (или откройте новую вкладку в Sublime Text и щелкните в правом нижнем углу, чтобы изменить тип документа с обычного текста на HTML), щелкните его и введите p , за которым следует Tab. Вы должны увидеть следующее, с курсором вместо символа трубы ( | ): <р> | Введите нужный контент между и , а затем снова нажмите Tab, и Sublime Text автоматически переместит курсор сразу после , поэтому вы нажимаете Enter и продолжаете печатание. Наш фрагмент сработал. Отличный! Другие примеры Вот несколько других примеров, которые также иллюстрируют некоторые другие вещи, которые вы можете делать с фрагментами Sublime Text. Шаблон HTML5 Если вы создаете веб-сайты на основе HTML5, вы, вероятно, снова и снова используете один и тот же шаблон. Это именно то, что вы должны превратить в фрагмент Sublime Text! Перейдите в Инструменты > Новый фрагмент и введите следующее: <фрагмент> <голова> <мета-кодировка="UTF-8"> $1 <тело> $2 $3 ]]> html5skel text. html Сохраните его как html-html5skel.sublime-snippet ¹ . Это то же самое, что и предыдущее, но с одним большим отличием. Ранее мы использовали $1 , чтобы указать, где должен располагаться курсор после расширения. В нашем шаблоне HTML5 вместо этого вы видите $1 , $2 и $3 . Что происходит? Используйте $1 , если вы хотите поместить курсор в определенное место и покончить с этим. В моем примере выше с & , на самом деле есть только одно место для перемещения курсора, так что это все, что мне нужно. Но при создании более длинного и сложного шаблона вы хотите, чтобы ваш курсор перемещался в нескольких местах. $1 указывает Sublime Text поместить туда курсор после завершения расширения, чтобы вы могли ввести соответствующий заголовок для веб-страницы. Когда вы закончите в этом месте, нажмите Tab, и ваш курсор переместится на $2 , чтобы вы могли ввести текст заголовка страницы, который отображается в окне просмотра браузера. После этого снова нажмите Tab, и курсор совершит последний переход к $3 внутри первого абзаца. Вы можете добавить столько прыжков, сколько хотите, с таким количеством прыжков, какое хотите или считаете нужным. О, и если вы хотите перепрыгнуть назад на , а не вперед, нажмите Shift-Tab. 3 пункта Я использую это все время. Я часто ловлю себя на том, что хочу не один абзац, а три. <фрагмент> 1 доллар 2 доллара $3 ]]> p3 text.html Я достаточно умно сохранил это как html-p3.sublime-snippet . Обратите внимание, что я снова использую маркеры полей, чтобы я мог переходить между абзацами после их создания. УСБ Что насчет CSS? Вы можете использовать сниппеты как для CSS, так и для HTML (на самом деле, вы можете использовать сниппеты с любой язык или текст, который работает внутри Sublime Text). Это очень удобно, а также иллюстрирует некоторые дополнительные вещи, которые вам нужно знать о фрагментах Sublime Text. Я сохранил его как css-font.sublime-snippet : . <фрагмент> шрифт шрифт: 1em/1.5 без засечек; исходный.css Первое, на что следует обратить внимание, это строка … . Вы можете положить туда что угодно, так как это только для ваших глаз. Когда вы начнете вводить tabTrigger , вы увидите описание в виде небольшой всплывающей подсказки, чтобы напомнить вам, что делает фрагмент. Вы можете использовать с любым сниппетом, а не только с CSS, так что не стесняйтесь размещать их везде, где это вам поможет. Следующее, что нужно обсудить, это то, что объем отличается. Для фрагмента HTML нам пришлось использовать text.html , но для CSS вместо этого мы используем source.css . Почему разница? Согласно определениям синтаксиса в Sublime Text Docs: Область верхнего уровня для этого определения синтаксиса. Он принимает вид source. или text. . Для языков программирования используйте исходный код . Для разметки и всего остального текст . Итак, если вы создаете фрагмент для HTML или других языков разметки (например, XML, YAML, LaTeX, Textile и Markdown), используйте текст . . Для всего остального — таких языков программирования, как C, C++, Erlang, Python, Perl, Java, JavaScript, PHP, Ruby on Rails и сценариев оболочки bash — используйте исходный код . ² . CSS обычно не то, что я бы назвал языком программирования, но это точно не язык разметки, поэтому он получает source.css . Наконец, сосредоточьтесь на содержании фрагмента: Шрифт: ${1:обычный|курсив|наклонный} ${2:обычный|маленькие прописные} ${3:обычный|полужирный|жирнее|светлее} ${4:1em}/${5:1.5} ${ 6: без засечек|засечек|моноширинный}; Чтобы понять, что это значит, давайте посмотрим на результаты. Когда вы наберете шрифт и нажмете Tab, вы увидите следующее: шрифт: обычный|курсив|наклонный нормальный|маленькие заглавные обычные|жирный|жирнее|светлее 1em/1.5 без засечек|с засечками|моноширинный; Ваш курсор там не виден; вместо этого selected : normal|italic|oblique , что соответствует этому коду в вашем фрагменте: ${1:normal|italic|oblique} . Для Sublime Text ${1:normal|italic|oblique} — это маркер поля, который также содержит местозаполнитель. ${1} точно так же, как $1 : это маркер поля. normal|italic|oblique создает текст-заполнитель, который выбирается при развертывании фрагмента. Идея состоит в том, что вы увидите три варианта в качестве напоминания, а затем сможете ввести тот, который хотите. Когда вы закончите печатать, нажмите Tab и следующий заполнитель — normal|small-caps — будет выбран, поскольку он соответствует ${2} . Введите нормальный или с маленькими заглавными буквами (или что угодно, на самом деле - местозаполнитель - это просто предложение, которое вы можете игнорировать), нажмите Tab, и будет выбран текст заполнителя маркера третьего поля: нормальный | полужирный |жирнее|светлее . И так далее. Еще одна вещь о заполнителях: если вы вместо этого используете что-то вроде ${1:foo} , тогда, когда вы развернете свой фрагмент, будет выбран foo . Затем вы можете изменить foo на что-то другое, или вы можете просто нажать Tab и оставить foo там, переходя к следующему маркеру поля.
регулярное выражение: Регулярное выражение в стиле Perl: см. документацию библиотеки Boost для регулярные выражения (открывается в новом окне).
format_string: Строки формата см. в документации библиотеки Boost (открывается в новом окне).
Опции: Дополнительно. Может быть любым из следующих:
i
Регулярное выражение без учета регистра.
g
Заменить все вхождения регулярного выражения .
m
Не игнорировать новые строки в строке.
9(\w)|(?:_(\w))/(?1\u$1:)(?2 \u$2:)/g} Оригинал: ${1:text_in_snail_case} # Выход: Трансформация: Текст в корпусе улитки Оригинал: text_in_snail_case
Вы также можете использовать переменные среды с заменами:
Быстрая вставка текста и кода с помощью фрагментов Sublime Text
На этой странице…
Устали вырезать и вставлять шаблон HTML5? Или постоянно вводить один и тот же код? К счастью, Sublime Text позволяет легко быстро вставлять фрагменты кода, которые вы определяете.
Как вы, наверное, знаете, когда вы вводите p в HTML-документе в Sublime Text и нажимаете Tab, он автоматически расширяется до
. Но что, если вам это не нравится (мне не нравится), и вместо этого вы хотите, чтобы он расширился до этого (с курсором, появляющимся там, где находится канал)?
<р> |

Давайте создадим сниппет именно для этого.
Создать
Чтобы создать свой первый фрагмент в Sublime Text, сделайте следующее:
Выберите «Инструменты» > «Новый фрагмент». Откроется новый безымянный файл, содержащий следующее:
<фрагмент>
Содержимое находится между & ]]> , в результате получается:
<содержание> 1 доллар ]]>
Видите, что $1 ? Это говорит Sublime Text поместить курсор туда, когда он закончит расширение вашего фрагмента. Sublime Text называет это маркером поля .
Далее следует tabTrigger , текст, который вы вводите, за которым следует вкладка, которая расширяется для создания содержимого. В нашем случае мы хотим использовать букву стр . Избавьтесь от комментария, описывающего tabTrigger , а затем измените фактическую строку для tabTrigger на это:
п
Наконец, область действия, которая определяет типы файлов (HTML, CSS, PHP, сценарий оболочки и т. д.), в которых происходит расширение. Опять же, избавьтесь от закомментированной строки, описывающей область , и измените строку для области на эту:
. text.html На данный момент файл должен выглядеть так: <фрагмент> 1 доллар ]]> п text.html Сохранить Сохраните файл. Когда вы это сделаете, вам нужно будет определить две вещи: имя файла и место его сохранения.
Имя файла: файл должен заканчиваться на .sublime-snippet , например: foo. sublime-snippet . Что идет перед .sublime-snippet , зависит от вас. Мне нравится использовать tabTrigger , если это вообще возможно, вместе с основной частью области действия перед tabTrigger , что дает мне это: html-p.sublime-snippet .
Где его сохранить: когда вы нажимаете «Сохранить», Sublime Text автоматически пытается сохранить файл в нужной папке.
Mac OS X: /Users/yourname/Library/Application Support/Sublime Text 2/Packages/User
Окна:
Windows Portable (USB-накопитель):
Линукс:
Вам не нужно беспокоиться о местоположении, так как Sublime Text позаботится об этом за вас, но если по какой-то странной причине вы не в нужном месте, вам нужно будет перейти в нужное место .
Тест
Теперь давайте протестируем наш новый фрагмент. Откройте документ HTML (или откройте новую вкладку в Sublime Text и щелкните в правом нижнем углу, чтобы изменить тип документа с обычного текста на HTML), щелкните его и введите p , за которым следует Tab. Вы должны увидеть следующее, с курсором вместо символа трубы ( | ):
<р> |
Введите нужный контент между
и
, а затем снова нажмите Tab, и Sublime Text автоматически переместит курсор сразу после , поэтому вы нажимаете Enter и продолжаете печатание. Наш фрагмент сработал. Отличный! Другие примеры Вот несколько других примеров, которые также иллюстрируют некоторые другие вещи, которые вы можете делать с фрагментами Sublime Text. Шаблон HTML5 Если вы создаете веб-сайты на основе HTML5, вы, вероятно, снова и снова используете один и тот же шаблон. Это именно то, что вы должны превратить в фрагмент Sublime Text! Перейдите в Инструменты > Новый фрагмент и введите следующее: <фрагмент> <голова> <мета-кодировка="UTF-8"> $1 <тело> $2 $3 ]]> html5skel text. html Сохраните его как html-html5skel.sublime-snippet ¹ . Это то же самое, что и предыдущее, но с одним большим отличием. Ранее мы использовали $1 , чтобы указать, где должен располагаться курсор после расширения. В нашем шаблоне HTML5 вместо этого вы видите $1 , $2 и $3 . Что происходит? Используйте $1 , если вы хотите поместить курсор в определенное место и покончить с этим. В моем примере выше с & , на самом деле есть только одно место для перемещения курсора, так что это все, что мне нужно. Но при создании более длинного и сложного шаблона вы хотите, чтобы ваш курсор перемещался в нескольких местах. $1 указывает Sublime Text поместить туда курсор после завершения расширения, чтобы вы могли ввести соответствующий заголовок для веб-страницы. Когда вы закончите в этом месте, нажмите Tab, и ваш курсор переместится на $2 , чтобы вы могли ввести текст заголовка страницы, который отображается в окне просмотра браузера. После этого снова нажмите Tab, и курсор совершит последний переход к $3 внутри первого абзаца. Вы можете добавить столько прыжков, сколько хотите, с таким количеством прыжков, какое хотите или считаете нужным. О, и если вы хотите перепрыгнуть назад на , а не вперед, нажмите Shift-Tab. 3 пункта Я использую это все время. Я часто ловлю себя на том, что хочу не один абзац, а три. <фрагмент> 1 доллар 2 доллара $3 ]]> p3 text.html Я достаточно умно сохранил это как html-p3.sublime-snippet . Обратите внимание, что я снова использую маркеры полей, чтобы я мог переходить между абзацами после их создания. УСБ Что насчет CSS? Вы можете использовать сниппеты как для CSS, так и для HTML (на самом деле, вы можете использовать сниппеты с любой язык или текст, который работает внутри Sublime Text). Это очень удобно, а также иллюстрирует некоторые дополнительные вещи, которые вам нужно знать о фрагментах Sublime Text. Я сохранил его как css-font.sublime-snippet : . <фрагмент> шрифт шрифт: 1em/1.5 без засечек; исходный.css Первое, на что следует обратить внимание, это строка … . Вы можете положить туда что угодно, так как это только для ваших глаз. Когда вы начнете вводить tabTrigger , вы увидите описание в виде небольшой всплывающей подсказки, чтобы напомнить вам, что делает фрагмент. Вы можете использовать с любым сниппетом, а не только с CSS, так что не стесняйтесь размещать их везде, где это вам поможет. Следующее, что нужно обсудить, это то, что объем отличается. Для фрагмента HTML нам пришлось использовать text.html , но для CSS вместо этого мы используем source.css . Почему разница? Согласно определениям синтаксиса в Sublime Text Docs: Область верхнего уровня для этого определения синтаксиса. Он принимает вид source. или text. . Для языков программирования используйте исходный код . Для разметки и всего остального текст . Итак, если вы создаете фрагмент для HTML или других языков разметки (например, XML, YAML, LaTeX, Textile и Markdown), используйте текст . . Для всего остального — таких языков программирования, как C, C++, Erlang, Python, Perl, Java, JavaScript, PHP, Ruby on Rails и сценариев оболочки bash — используйте исходный код . ² . CSS обычно не то, что я бы назвал языком программирования, но это точно не язык разметки, поэтому он получает source.css . Наконец, сосредоточьтесь на содержании фрагмента: Шрифт: ${1:обычный|курсив|наклонный} ${2:обычный|маленькие прописные} ${3:обычный|полужирный|жирнее|светлее} ${4:1em}/${5:1.5} ${ 6: без засечек|засечек|моноширинный}; Чтобы понять, что это значит, давайте посмотрим на результаты. Когда вы наберете шрифт и нажмете Tab, вы увидите следующее: шрифт: обычный|курсив|наклонный нормальный|маленькие заглавные обычные|жирный|жирнее|светлее 1em/1.5 без засечек|с засечками|моноширинный; Ваш курсор там не виден; вместо этого selected : normal|italic|oblique , что соответствует этому коду в вашем фрагменте: ${1:normal|italic|oblique} . Для Sublime Text ${1:normal|italic|oblique} — это маркер поля, который также содержит местозаполнитель. ${1} точно так же, как $1 : это маркер поля. normal|italic|oblique создает текст-заполнитель, который выбирается при развертывании фрагмента. Идея состоит в том, что вы увидите три варианта в качестве напоминания, а затем сможете ввести тот, который хотите. Когда вы закончите печатать, нажмите Tab и следующий заполнитель — normal|small-caps — будет выбран, поскольку он соответствует ${2} . Введите нормальный или с маленькими заглавными буквами (или что угодно, на самом деле - местозаполнитель - это просто предложение, которое вы можете игнорировать), нажмите Tab, и будет выбран текст заполнителя маркера третьего поля: нормальный | полужирный |жирнее|светлее . И так далее. Еще одна вещь о заполнителях: если вы вместо этого используете что-то вроде ${1:foo} , тогда, когда вы развернете свой фрагмент, будет выбран foo . Затем вы можете изменить foo на что-то другое, или вы можете просто нажать Tab и оставить foo там, переходя к следующему маркеру поля.