Life saving Sublime Text 3 snippets

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!