Life saving Sublime Text 3 snippets

Everyone has there own little list of snippets for their favourite Text Editors. Here's my most useful ones for Sublime Text 3.

By Luke Whitehouse on

Code editorsWorkflow

Snippet

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() 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!

Follow us on Twitter, Facebook or Github.
© Copyright 2019 Assortment.
Created and maintained by Luke Whitehouse.