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

Как мне сделать сниппет?

ST3 упрощает создание сниппетов. Вы просто выбираете Инструменты ›Разработчик› Новый сниппет в меню панели инструментов, и вперед в гонки!

Веб-сайт ST3 предлагает отличную информацию о сниппетах и о том, как они настраиваются.

Чтобы фрагмент можно было использовать в дальнейшем, его необходимо сохранить в надлежащем месте. ST3 обычно помещает вас в соответствующий каталог при сохранении нового фрагмента, но если это не так, вам нужно будет искать Пользователь ›Библиотека› Поддержка приложений ›Sublime Text 3› Пакеты ›Пользователь и сохраните там свои фрагменты с расширением .sublime -snippet расширение файла.

Фрагменты комментариев

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

WDS - большой сторонник блоков документации и встроенных комментариев в наших файлах PHP, JS и Sass. Мы должны сделать наши файлы простыми для понимания и не оставлять вопросов, почему мы выбрали именно так, а не так.

Недавно мы улучшили нашу игру с частичными комментариями Sass, сделав стандартом добавление комментария после закрывающей скобки, чтобы указать, что закрывается. Это помогает с любым партиалом Sass, в котором родительский селектор содержит много информации; нам больше не нужно прокручивать страницу вверх, чтобы увидеть, где открывается селектор. Однако это стало для меня утомительным. Мне все время приходилось вручную щелкать вниз до закрывающей скобки, вводить двойное //, а затем мой комментарий. Часто ST регулировал отступ моей закрывающей скобки, вынуждая меня сделать еще один шаг, прежде чем я был готов щелкнуть внутри своего селектора, перейти на вкладку и начать свою фактическую работу.

Утомительно!

Итак, я создал этот удобный небольшой фрагмент:

<snippet>
    <!-- Type `bracket` and hit tab to open a bracket with a closing comment. -->
    <!-- Type the class for the element you are styling and it is placed at the top and in the comment after the closing bracket -->
    <!-- Hit tab a second time to put your cursor into a beautifuly tabbed spot within the bracket -->
    <content><![CDATA[
${1:this} {
    $2
} // ${1:this}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>bracket</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.scss</scope>
</snippet>

Мы не только стремимся к четким комментариям в наших файлах тем, но и смотрим на эти комментарии в самом фрагменте - вы точно знаете, что он делает, и мне не нужно это объяснять! Тем не менее, вот небольшой гиф, чтобы вы могли увидеть его в действии:

И только тогда я отступил на шаг и стал смотреть на оставшуюся часть отрывка. А как насчет быстро используемого блока комментариев в верхней части самого партиала или даже одного, когда мы начинаем стилизовать родительский элемент? Что ж, тебе повезло!

Вот фрагмент, который выводит блок комментариев в верхней части партиала Sass:

<snippet>
    <!-- Type `partialcomment` or `pcomment` and hit tab to output a comment block. -->
    <!-- Type a short description of your partial and you're good to go! -->
    <content><![CDATA[
//--------------------------------------------------------------
// ${1:Partial Description}
//--------------------------------------------------------------
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>partialcomment</tabTrigger>
    <tabTrigger>pcomment</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.scss</scope>
</snippet>

И модифицированная версия вышеупомянутого для небольшого блока комментариев над родительским селектором:

<snippet>
    <!-- Type `selectorcomment` or `scomment` and hit tab to output a comment block. -->
    <!-- Type a short description of the element you are styling and you're good to go! -->
    <content><![CDATA[
//-----------------------------------------
// ${1:Selector Comment}
//-----------------------------------------
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>selectorcomment</tabTrigger>
    <tabTrigger>scomment</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.scss</scope>
</snippet>

Так легко! В приведенных выше фрагментах вы заметите одну замечательную вещь - настройку ‹scope›. Это отличный список доступных областей для использования с сниппетами. В приведенных выше примерах source.scss гарантирует, что наш фрагмент кода будет только доступен при редактировании файла .scss, поэтому нам не нужно беспокоиться о каких-либо неожиданных результатах при работе с файлом PHP или JS.

Также существует отличный пакет под названием DocBlockr, который упрощает и ускоряет процесс написания блоков документации над вашими функциями. Одна из настроек, которые мне очень нравятся, - это возможность указать свое имя как автора функции, чтобы исключить дополнительный ввод текста. Не только это, но он также вынюхивает любые значения, передаваемые в вашу функцию, и позволяет вам переходить через табуляцию и добавлять дополнительные детали:

Фрагменты Sass

Комментарии красивы и важны, но мы также можем сделать гораздо больше с помощью фрагментов внутри партиала Sass. Мы используем Bourbon Neat в WDS в нашей стартовой теме wd_s, поэтому имеет смысл использовать только некоторые фрагменты, относящиеся к замечательным вещам, доступным благодаря Neat.

Начнем с одного из краеугольных камней Neat: до смехотворно простых столбцов. Хотя разместить эти столбцы на месте проще простого, это не повод отказываться от упрощения использования. Посмотрите наш фрагмент кода span-columns ниже:

<snippet>
    <!-- Type `span-columns` and hit tab to output the span-columns() mixin. -->
    <!-- The cursor will be placed inside of the mixin's parenthesis for ease of entering a column size. -->
    <content><![CDATA[
@include span-columns(${1:8});
]]></content>
    <tabTrigger>span-columns</tabTrigger>
    <description>Set a column width using Neat</description>
    <scope>source.scss</scope>
</snippet>

Конечно, есть вероятность, что мы захотим изменить размер этого столбца на более крупной точке останова. Хорошо, что у нас есть небольшой отрывок и для этого!

<snippet>
    <!-- Type `media` and hit tab to output the media() mixin. -->
    <!-- The cursor will be placed inside of the mixin's parenthesis for ease of entering a breakpoint. -->
    <content><![CDATA[
@include media(${1:\$tablet-landscape}) {

}
]]></content>
    <tabTrigger>media</tabTrigger>
    <description>WDS Media Query</description>
    <scope>source.scss</scope>
</snippet>

Однако иногда нам нужно что-то попроще. Регулировка полей и отступов на элементе не является сложной задачей, но будут моменты, когда нам просто понадобится свежий сброс полей и отступов элемента до нуля. Зачем вручную вводить значения полей и сброса, если мы можем ввести одно слово, нажать одну клавишу и получить красивый простой элемент без полей и отступов? Ответ: «Не набирай это вручную», большой индюк!

<snippet>
    <!-- Type `margin reset` and hit tab to output the margin-padding-reset mixin. -->
    <content><![CDATA[
@include margin-padding-reset;
]]></content>
    <tabTrigger>margin reset</tabTrigger>
    <description>Reset the margin and padding</description>
    <scope>source.scss</scope>
</snippet>

PHP

Мы работаем и любим WordPress, поэтому большинство наших сниппетов ориентированы на WP. Однако это не означает, что у нас нет более универсальных сниппетов для хорошего старого PHP. В основном это помогает нам отлаживать проблемы или выводить данные на интерфейс в целях тестирования. Я часто использую фрагмент кода echoprintr, которым впервые поделился со мной Джастин Штернберг:

<snippet>
    <!-- Type `echoprintr` and hit tab to output the print_r function wrapped in xmp tags mixin. -->
    <!-- The cursor will be placed inside of the print_r function. -->
    <!-- Hitting tab will palce the cursor before the colon inside the opening xmp tag for the addition of helper text. -->
    <content><![CDATA[
echo '<xmp>${2}: '. print_r( ${1}, true ) .'</xmp>';$0
]]></content>
    <tabTrigger>echoprintr</tabTrigger>
    <scope>source.php</scope>
</snippet>

Вам нужно просмотреть содержимое массива или объекта? Попробуй этот милый маленький фрагмент var_dump и пусть он скрасит твой день:

<snippet>
    <!-- Type `echovardump` and hit tab to output the print_r function wrapped in xmp tags mixin. -->
    <!-- The cursor will be placed inside of the var_dump function and inside of the preceding <strong> tags. -->
    <content><![CDATA[
echo '<strong>${1}:</strong><br>', var_dump( ${1} ), '<hr>';
]]></content>
    <tabTrigger>echovardump</tabTrigger>
    <scope>source.php</scope>
</snippet>

Фрагменты WordPress

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

Мы знаем, что на нашем сайте будут изображения. Ваш веб-сайт будет представлять собой красивую комбинацию изображений и текста, и мы должны убедиться, что у нас есть изображения нужного размера в нужное время для любых случаев использования, которые нам нужны. У вас есть массивный раздел с героями вверху страницы и вам нужно изображение определенного размера и обрезанное до определенных размеров? У вас есть река постов под этим огромным героем с небольшими, но не менее важными изображениями? Добавить эти размеры изображений в WordPress легко с помощью add_image_size, но с помощью отличного фрагмента мы можем сделать это еще проще:

<snippet>
    <!-- Type `add_image` and hit tab to output the add_image_size function. -->
    <!-- The cursor will be placed inside of the function where you can enter the name of your custom image size. -->
    <!-- Hitting tab once will allow you to set the width of the image. -->
    <!-- Hitting tab a second time will allow you to set the height of the image. -->
    <!-- Hitting tab a third time will select the entire crop setting. This can be a boolean (true/false) or an array with more custom settings. -->
    <!-- If using the crop array, hitting tab again will allow you to specify the x-crop position. -->
    <!-- If using the crop array, hitting tab a final time will allow you to specify the y-crop position. -->
    <content><![CDATA[
add_image_size( '${1:foo}', ${2:300}, ${3:350}, ${4:array( '${5:left}', '${6:top}' )} );
]]></content>
    <tabTrigger>add_image</tabTrigger>
    <description>Register a new image size with WordPress</description>
    <scope>source.php</scope>
</snippet>

Сила WordPress живет в его петлях. Петля - это жизненная сила, с помощью которой существуют все посты. Нам нужен цикл для отображения нашего контента, но нам не нужен цикл, который может сбивать с толку и запоминать серию строк и операторов if / else. В следующем цикле предполагается, что вы уже установили $ args для своего нового экземпляра WP_Query. Как только эти аргументы установлены, просто введите цикл, нажмите вкладку и вуаля!

<snippet>
    <!-- Type `loop` and hit tab to output a simple WP_Query loop. -->
    <content><![CDATA[
<?php \$foo_query = new WP_Query( \$args ); ?>

<?php if ( \$foo_query->have_posts() ) : ?>

    <?php while ( \$foo_query->have_posts() ) : \$foo_query->the_post(); ?>

    <?php endwhile; ?>

<?php endif; ?>
<?php wp_reset_postdata(); ?>
]]></content>
    <tabTrigger>loop</tabTrigger>
    <description>A custom WordPress Loop</description>
    <scope>source.php</scope>
</snippet>

Теперь у вас есть цикл, в котором вы можете извлекать контент и отображать его внешнему миру. Но что происходит, когда люди, просматривающие ваш сайт, приезжают из разных уголков мира? Вы хотите, чтобы каждый человек мог получить одинаковый опыт, независимо от того, на каком языке он предпочитает язык, верно? Похоже, вам может потребоваться интернационализировать текстовые строки! Это ключевой компонент всего, что мы разрабатываем в WDS; мы всегда хотим быть уверены, что любую текстовую строку в теме или плагине можно будет легко перевести на другие языки. Если вы еще не садились в поезд i18n, прочтите, что это такое и почему это так важно. Будем ждать здесь.

…

Все сделано? Хорошо! Теперь вы готовы использовать этот изящный фрагмент кода ST для упрощения работы со строками i18n:

<snippet>
    <!-- Type `i18n` and hit tab to output a ready-to-use escaped and translatable string. -->
    <!-- The cursor will initially be placed where your text string needs to be entered. -->
    <!-- Hitting tab a second time will allow you to type your textdomain. -->
    <content><![CDATA[
<?php esc_html_e( '${1:some text}', '${2:textdomain}' ); ?>
]]></content>

    <tabTrigger>i18n</tabTrigger>
    <description>i18n a text string</description>
    <scope>source.php</scope>
</snippet>

jQuery

Последним в нашем списке, но не в последнюю очередь, является jQuery. Хотя вам не всегда может потребоваться какой-либо необычный jQuery для вашего проекта, всегда приятно иметь простой способ быстро создать файл JavaScript, из которого может расцвести замечательные качества jQuery. С помощью JS Mastermind Camden Segal был создан следующий стартовый скрипт, который позже превратился в простой в использовании фрагмент. Он предоставляет нам образцы переменных, функций и множество замечательных встроенных комментариев, которые помогут нам на нашем пути. Его невероятно легко расширить и еще проще читать - здесь никакого jQuery Soup!

Взгляните на сам фрагмент, а затем просмотрите его в действии ниже:

<snippet>
        <!-- Type `jquery-wds` and hit tab to output a ready-to-use jQuery function. -->
        <content><![CDATA[
/**
 * Foo Script
 */
window.Foo_Object = {};
( function( window, \$, that ) {

    // Private variable
    var fooVariable = 'foo';

    // Constructor
    that.init = function() {
        that.cache();

        if ( that.meetsRequirements() ) {
            that.bindEvents();
        }
    };

    // Cache all the things
    that.cache = function() {
        that.\$c = {
            window: \$(window),
            fooSelector: \$( '.foo' ),
        };
    };

    // Combine all events
    that.bindEvents = function() {
        that.\$c.window.on( 'load', that.doFoo );
    };

    // Do we meet the requirements?
    that.meetsRequirements = function() {
        return that.\$c.fooSelector.length;
    };

    // Some function
    that.doFoo = function() {
        // do stuff
    };

    // Engage
    \$( that.init );

})( window, jQuery, window.Foo_Object );
]]></content>
    <tabTrigger>jquery-wds</tabTrigger>
    <description>Insert a Javascript function - the WDS way</description>
    <scope>source.js</scope>
</snippet>

Заключение

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

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

Первоначально опубликовано на WebDevStudios.com.