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

Что такое сниппет ?

Сниппет это фрагмент когда

В веб разработке часто приходится прописывать какие то теги, например основные HTML теги

Такие как

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h1>Заголовок</h1>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>

Или теги таблицы

<table>
  <tbody>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
    </tr>
    <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
    </tr>
    <tr>
      <td>Ячейка 7</td>
      <td>Ячейка 8</td>
      <td>Ячейка 9</td>
    </tr>
  </tbody>
</table>

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

Русская версия -> вверхнее меню -> иструменты -> разработка -> новый сниппет
Английская версия -> top menu -> tools -> developer -> 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>

Строку

Hello, ${1:this} is a ${2:snippet}.

Нужно заменить на желаемый код автозаполнения

Например на

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h1>Заголовок</h1>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>

У вас дожно получится так

<snippet>
	<content><![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h1>Заголовок</h1>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>
]]></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>

Строка

Отвечает за триггер, это то чем мы будем вызывать данный сниппет

Например !DOC

Делаем так

<tabTrigger>!DOC</tabTrigger>

Вот готовый код сниппета как должно получится

<snippet>
	<content><![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h1>Заголовок</h1>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>!DOC</tabTrigger>
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

Теперь нажимаем Контрол + S или файл сохранить как

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

В моем случае это

C:\Users\Professional\AppData\Roaming\Sublime Text\Packages\User

У вас будет другой путь

Пишем имя файла при сохранении !DOC и нажмите сохранить

Все сниппет готов к использованию

Теперь создайте пустой файл

Вверхнее меню -> файл -> новый файл

Теперь наберите !DOC и нажмите клавишу Tab

Snippet Sublime Text

::: Первый вариант сайта ::: Все для DataLife Engine ::: Генератор паролей :::

Основные разделы сайта
:: Android :: DLE :: Linux :: MARKDOWN :: PWM Шим генераторы :: Shell :: Windows :: Безопасность :: Веб Сервер :: Дизаин :: Еда :: Тесла :: HTML :: Посты :: Регулярные Выражения :: Софт :: Электроника :: Уфология ::

Карта сайта