Installing snippets

Sublime Text 3 snippets can be created by going to Tools -> Developer -> New Snippet. You'll be presented with a new file with a default template, simply delete its contents and copy one of the snippets in this post. Once you're happy with snippet, save it within your Packages -> User folder, I usually create a folder within there called snippets but thats personal preference.

As a side note, you can use the <scope> element to scope a snippet to specific language, however I tend to leave this out as some snippets can be used in multiple languages.

Now that's out of the way, here's my list of snippets in no particular order:

PHP snippets

Basic function starter kit

When starting off functions in any framework, I find myself wasting a lot of time laying out the function nicely and providing docblocks. Problem solved.

<snippet>
    <content><![CDATA[
/**
 * ${1}
 */
${2:public }function ${3}(${4})
{
    ${5}
}
]]></content>
    <tabTrigger>func</tabTrigger>
</snippet>

print_r()

print_r() can be hard to read when working with a PHP file that also has HTML within. This snippet will wrap your output in <pre> tags making it very easy to work with.

<snippet>
    <content><![CDATA[
<?php
    echo "<pre>";
    print_r(${1});
    echo "</pre>";
?>
]]></content>

    <tabTrigger>print</tabTrigger>
</snippet>

Unfortunately, this doesn't play nicely with the <scope> declaration for Sublime Text 3 snippets. You could extend this to work within PHP code too, as this automatically created the opening and closing <?php ?> tags.

var_dump()

Just like with the print_r() function, var_dump() is much easier to read when wrapped in <pre> tags.

<snippet>
    <content><![CDATA[
<?php
    echo "<pre>";
    var_dump(${1});
    echo "</pre>";
?>
]]></content>

    <tabTrigger>dump</tabTrigger>
</snippet>

Again, this doesn't play nicely with the <scope> declaration for Sublime Text 3 snippets.

WordPress

new WP_Query();

A nice and simple new WP_Query() loop when in need.

<snippet>
    <content><![CDATA[
<?php

\$${1:new_query} = new WP_Query([
    ${2}
]);

?>

<?php if ( \$${1:new_query}->have_posts() ) : ?>
    <?php while ( \$${1:new_query}->have_posts() ) : \$${1:new_query}->the_post(); ?>
    <?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
]]></content>

    <tabTrigger>wpquery</tabTrigger>
</snippet>

CSS Snippets

Media Queries

Sublime Text 3 has its own default CSS Media Query snippet but its not robust enough for my liking.

<snippet>
    <content><![CDATA[
@media ${1:screen and }(${2:min-width}: ${3}) {
    ${4}
}
]]></content>

    <tabTrigger>mq</tabTrigger>
</snippet>

Prefixed properties

I mainly use autoprefixer these days for my browser prefix woes, but this is still a great snippet that comes in hardly every now and then.

<snippet>
    <content><![CDATA[
-webkit-${1}: ${2};
-moz-${1}:    ${2};
${1}:         ${2};
]]></content>

    <tabTrigger>cssprefix</tabTrigger>
</snippet>

Table of contents

Whilst I use the Docblockr addon for Sublime Text 3, I like to roll my own table of contents block for CSS which is in line with my team's Front-end Framework.

<snippet>
    <content><![CDATA[
/**
 * Title:
 *    ${1:Component title}
 * Description:
 *    ${2:A brief description of the component and where it may be used}
 * Sections:
 *    ${3:Section Heading}
 */



/* ${3:Section Heading}
\*----------------------------------------------------------------*/
]]></content>

    <tabTrigger>csstoc</tabTrigger>
</snippet>

I'll continue to add to this list as I go on, if you have any suggestions let me know!


# Related posts

Like what you've seen? Want more? Check out similar posts on Assortment that you may find interesting:


# Leave a comment

No wookies will get this, its just for your Gravatar image.

Basic markdown supported, go to FAQ for more info.